Two derived commits that left the copies' sync in an undo entry of its own
(Phase 3c).
- Move frame guides in the undo group of their transform.
A transform of a board sends the move of its guides before the shapes'
update. The guide move committed every guide of the board, moved or not,
each in a commit with an undo group of its own, so when the board was a
main with a guide, its transform and the copies' sync landed in different
undo entries: one undo reverted only the copies (F6).
Both transform paths now give the shapes' update an undo group up front
and pass it to the guide move, which commits only the guides that move,
all in one commit in that group.
workspace-frame-guides-undo-test: one undo reverts a rotation of a main
with a guide, its copy included, and a move of a main together with its
guide.
- Reflow layouts in the undo group of the step that asked for it.
A layout reflow runs a moment after the commit that needs it: the
:layout/update events are buffered for 100 ms and reflowed per page. The
reflow lost the undo group of the step (F43):
- the buffer passed no undo group to the reflow;
- update-shapes asked for a reflow without the group of its commit;
- the reflow's transform opened an undo transaction, so it made an entry
of its own instead of stacking on the latest one, and the sync that a
reflow of a main starts took that entry's fresh group.
So one undo after a sync that reflows (a flex main's margin edit, a nested
sync with minimal frames, a swap) reverted only the reflow, or only part
of the step.
update-shapes now gives a commit that needs a reflow an undo group up
front and passes it on; the buffer reflows each page in the group an
update of that buffer names (those that name none come from the same step,
like update-layout-child's); the reflow stacks on the latest entry with no
transaction of its own.
Cases AJ and AN no longer pin F43: one undo after a nested sync reverts
the remote change and the float noise of the reflow, and one undo after a
flex main's margin edit reverts the margin, the sync and the reflow. The
frontend golden master records that.
AI-assisted-by: claude-opus-5-5
Fixes in the variant events of the workspace and in the component calls of
the plugin API (Phase 3c).
- Rename a variant in one commit.
Renaming a variant renamed its board, then each of its components and
mains, as separate commits inside an undo transaction. The transaction
kept the undo group of its first commit, the board's, while the sync that
the renamed mains started took the group of their commits and made an
entry of its own: one undo reverted only the copies' names (F6, case AV).
clv/generate-rename-variant builds the board, component and main renames
in common, and the event commits them once, so the rename and its sync are
one undo entry, like transform into a variant.
Case AV no longer marks its round trip as a known failure; the frontend
golden master records it without failures.
- Keep overrides in a plugin swap only within a variant set.
The plugin's swapComponent swapped with keep-touched for any component,
while the UI keeps a copy's overrides only on a variant switch: the same
swap kept different overrides by route (F33). It now keeps them only when
the copy's component and the target are variants of one set (decision
(p)), as swap-keeps-touched? says.
shape-bugfixes-test: two variants of one set keep the overrides; of
different sets, or plain components, do not.
- Look up a plugin variant head's component in its own file.
The plugin's isVariantHead looked the shape's component up in the file of
the shape, so it was false for copies of a library's variants; and it
looked it up before checking the shape is a head, so on a shape with no
component it failed the lookup's assert (F91). It now checks the head
first and looks in the shape's :component-file.
shape-bugfixes-test: a copy of a library variant is a variant head, and a
plain rect is not.
- Add a variant with the shortcut when a variant set is selected.
The context menu of a variant container offers "Add variant" and shows the
create-component shortcut for it, but the shortcut's event did not know
containers: with one selected it fell through to creating a component,
which the container's own rules refuse (F95). With a single variant
container selected, the shortcut now adds a variant to it, as the menu
entry does.
workspace-variants-test: the shortcut on a variant container gives the set
a third member.
- Refuse plugin variant edits whose variant is on another page.
The variant events the plugin API calls (add a variant, add, remove or
rename a property, set a property value) build their changes on the
objects of the page the workspace shows. For a variant whose mains sit on
another page, they updated the components but not their mains, so the
mains kept their old :variant-name and the file failed validation (F94).
The plugin now refuses these edits, as it refuses edits of shapes on
another page, unless the variant is in the current file and on the current
page.
library-test: each edit goes through with the variant on the current page
and is refused, with nothing emitted, with it elsewhere.
- Check every component of an assets group before combining it.
The assets panel offers to combine a group of components as variants when
they can be: more than one, none a variant, all with their main on one
page. It counted every component of the group, subgroups included, but
checked the other two rules only on the components directly in it, while
the combine takes them all; with none directly in it, those rules always
held (F98). can-combine-group? now checks every component of the group.
assets-components-test: a group whose only components are in a subgroup
can be combined; a variant or a main on another page in a subgroup blocks
it; one component cannot.
AI-assisted-by: claude-opus-5-5
- The UI offers swap and reset only on copy heads, and detach only on
copies that are not inside another copy. The plugin's swapComponent
and resetOverrides accepted any shape inside a copy (F92), and its
detach any shape at all (F93), and sent the same events, whose
changes expect a head. swapComponent and resetOverrides report "The
shape is not a component copy head" for anything else; detach
reports a shape that is not a copy, or a copy inside another copy,
by ctn/detachable?, which the detach event checks too. swapComponent
looked up the target file before checking its argument, so a value
that is not a component failed an assert instead of reporting
"Component not valid".
- The plugin's switchVariant did not check whether the switch would
nest a component in itself. The switch event checks that and calls
the :on-error of its params' metadata; the plugin passed none, so
the default, rx/throw, built an error observable that nothing used,
and the call did nothing and reported nothing (F53). The plugin
passes an :on-error that reports "The switch would create a
component nesting loop", and the event's default does nothing.
- Choosing a property value in the design tab with several members
selected sent, for each member, an event that set the value and
another that cleared its error, each its own commit and undo entry.
The plugin's setVariantProperty set the value and left the error as
it was (F94). dwv/update-property-value takes the components, and
sets the value and clears the error of each in one commit; the
design tab passes the selected members, the plugin its component,
and the composable interpreter the one member of its edit.
shape-bugfixes-test checks each plugin case on the proxy, and
workspace-variants-test sets a value on two members with errors.
AI-assisted-by: claude-opus-5-5
Several actions built their changes in frontend events, step by step,
each step its own commit, so the pure runner could not run them and
one undo could revert half an action.
- Renaming a variant member in the layers panel sent three events,
each in its own undo transaction: update the properties from the
typed formula, remove the properties no member gives a value, and
set or clear the member's error. One undo reverted only the last.
clvp/generate-rename-member builds the three steps in one changes
(with generate-update-properties and
generate-remove-empty-properties), and dwv/rename-member commits it
once with the same analytics events.
update-properties-names-and-values goes; remove-empty-properties and
update-error stay for the design tab.
- Transforming a component into a variant sent about fourteen events,
and combining components as variants that transform and eight more.
clv/generate-transform-in-variant and
clv/generate-combine-as-variants build those steps as one changes,
from the generators common already had, and the events commit them
once. The flex layout initializer moves to common as
cls/layout-initializer. Combine still sizes the board with two
frontend dimension updates inside its undo transaction: the
frontend applies them through modifiers, which common has no step
for.
- update-component split the changes of an update main (the copy's,
marked :local-change?, from the main's, which may belong to a
library) with two transducers; cll/split-local-changes does it. Its
undo-group argument, never passed, goes, and the main's library is
the copy head's :component-file, which it looked up through the
file data only to read its id back.
- dwv/valid-variant-switch? read the libraries from the state and
repeated the lookup of clv/find-switch-target. clv/valid-switch?
takes the libraries and asks find-switch-target; the plugin's
switchVariant and the frontend test call it.
Behavior changes:
- One undo after a rename of a member, a transform or a combine
reverts all of it. After a transform, it reverted only the sync of
the copies' names (F6 in case AT); its pins go.
- The transform no longer sends the "create-board" analytics event of
the board it creates around the main.
In the composable suites, renaming a member in the layers panel,
removing the empty properties and setting a member's error are
variant property edits both runners run, and case AW joins the JVM
set. Its rename node drives the real layers-panel rename, which
removes the empty properties too, so the step that removed them goes.
The golden masters are recorded again for AW (the JVM one gains the
case, the frontend one loses that step) and for AT (its final states
no longer list the F6 undo failures).
AI-assisted-by: claude-opus-5-5
remove-empty-properties, run after a rename in the layers panel, found
the position of each property by grouping all the properties of the
variant's components by name and numbering the groups. A map of more
than eight keys does not keep their order, so with nine or more
properties the numbers did not match the positions and the wrong
property was removed: with ten properties and the sixth empty in every
component, it removed the first (F86).
The positions now come from the properties themselves: a property is
removed when its value is empty in every component. The work moves to
common as clvp/generate-remove-empty-properties, and the event only
commits what it builds.
workspace-variants-test checks the case with ten properties.
AI-assisted-by: claude-opus-5-5
- component-changed marked the component modified and sent
launch-component-sync, its only caller, which opened an undo
transaction around the syncs of the copies. component-changed sends
those events itself, in the same order.
- The library update notification found the libraries that would
change with a lazy filter, so the check ran up to the first one when
the notification was built and the rest when the user clicked
"Update". It is a filterv, so the whole check runs when the
notification is built, as the comment above it says.
- The check that a new name is valid (trimmed, not blank, no trailing
separator) was written in the shape rename and the component rename;
cpn/clean-valid-name gives the cleaned name, or nil.
- Paste and the move of shapes into a parent each tested whether they
put a component head inside a variant; ctn/head-into-variant? does.
- Going to the local main of a component and combining components into
variants each opened another page and ran their work once it was
initialized, with the same stream code; dwl/go-to-page-then does it.
- Making components from the selection mapped the check over the
shapes and then tested every result; every? takes the check.
- generate-components-menu-entries reads the current file and page
with mf/use-ctx, so it is a hook, and called conditionally it would
break the order of its caller's hooks. It is
use-components-menu-entries, and its docstring says why.
The analytics events that paste and duplicate send for each new shape
are built the same way but look up the parent's layout in different
objects, so they stay apart.
No behavior change: the suites are unchanged.
AI-assisted-by: claude-opus-5-5
- Removing, reordering and setting the value of a variant property
each wrote the component's new properties and then the variant name
of its main, built from them. set-variant-properties does both.
- ctv had two functions that find the position of a property by name;
the private find-index-by-name goes.
- generate-reorder-variant-poperties and the frontend event
reorder-variant-poperties are spelled reorder-variant-properties.
- Nine events of workspace/variants (set the value, the name, the
error, the variant id, add, remove, remove the empty ones, reorder,
and update after a rename in the layers) each looked up the page,
its objects and the file data, built the same empty changes, and
committed them inside an undo transaction. variant-changes builds
those changes, and the transactions go: each one held a single
commit, which already makes one undo entry on its own, or joins the
transaction a caller has open.
No behavior change: the golden masters and the suites are unchanged.
AI-assisted-by: claude-opus-5-5
- The sync walk took its direction as a map of seven closures
(direct-sync, inverse-sync). The two directions are fixed, so each
is now a plain recursive function: sync-copy-recursive (main to
copy, a sync or a reset) and update-main-recursive (copy to main),
with sync-copy-shape and update-main-shape for the pair itself.
Both share compare-children, which takes the children, a pair?
predicate and four callbacks instead of 13 arguments; the inverse
branch's call of the swapped callback, which could never run, goes.
- The container of the main shapes is found once, at the start of the
walk. The walk holds the :remote-synced a reset or an update main
gives the copy shapes, instead of initial-root? and two branches.
add-shape-to-instance and add-shape-to-main take the parent from the
pair being walked instead of searching the whole subtree for it.
- pcb/add-changes takes a container and the redo and undo changes, and
applies them locally. Eight sync functions and the library
typography sync each wrote that block; make-change goes from both
namespaces. One list holds the attributes that link a copy shape
with its main, and one shape-label prints shapes in the log lines.
- change-touched chose what to write from three flags. It is now
set-touched, which takes the value each caller computes. The swap's
restore of the kept properties passes ignore-touched instead of
calling it afterwards to put the groups back.
- generate-sync-shape was a multimethod over the three asset types; it
is a case in generate-sync-container. generate-sync-file loses its
unused arity. The 100-line comment that opened the sync helpers
described an older model; a short note points at the component sync
contract. text-content-with-overrides only called
txt/merge-overrides, which sync and switch now call.
- update-flex-child-copy-attrs and update-flex-child-main-attrs are one
function, update-flex-children, and the omit-touched? argument that
was always false goes.
- In the variant switch, sized-geometry-value builds the resized
:selrect and :points that two geometry policies each built, and a
binding of skip? shadowed by a second one is skip-attr?.
add-shape-to-main keeps two changes that look wrong, now marked F102:
its :reg-objects names the component, so it only reaches a deleted
component's objects, and the undo of its new shapes deletes them from
the copy's page.
No behavior change: the golden masters and the suites are unchanged.
libraries.cljc: 1816 -> 1284 lines.
Benchmark (lower quantile, ms; baseline / now / ratio):
deepest-edit-through-three-levels 35.2 / 15.2 / 0.43
edit-through-a-chain-of-dependents 68.9 / 35.7 / 0.52
library-update-into-copies 83.1 / 40.5 / 0.49
main-edit-among-many-shapes 4.8 / 2.4 / 0.51
main-edit-into-10-copies 1.8 / 0.8 / 0.46
main-edit-into-100-copies 15.4 / 7.8 / 0.51
main-edit-into-1000-copies 153.1 / 97.4 / 0.64
variant-switch-into-copies 32.1 / 17.6 / 0.55
(The machine was busy for the 1000-copies world: its mean was 119 ms,
against about 83 in the runs of the earlier steps, at 0.49-0.52.)
AI-assisted-by: claude-opus-5-5
Which shapes of a copy a transform leaves untouched (the ignore tree)
was frontend code, written twice: calculate-ignore-tree for the
modifiers of the SVG renderer and calculate-ignore-tree-wasm for the
matrices of the WASM renderer. The second is the single-pass version
of the first: each shape still compares itself with the copy root of
the latest transformed shape above it, as the repeated walks did when
the last one won.
app.common.logic.placement now holds it once: calculate-ignore-tree
takes the transformed ids in order and a function that transforms a
shape, built with modifiers-transform (SVG) or matrices-transform
(WASM), both cached per shape. check-delta and transform-attrs moved
with it. The frontend calls the common version, and its tests moved
to common-tests.logic.placement-test, which runs on the JVM and in JS,
with a rotation through modifiers added.
No behavior change: the golden masters and the suites are unchanged.
The benchmark does not run this code.
AI-assisted-by: claude-opus-5-5
update-component-sync and launch-component-sync both emitted the same
pair of sync-file events: the current file, and the library file when
it is another one. component-sync-events builds them for both, each
event keeping its own undo transaction. The two-argument arity of
launch-component-sync had no caller and is gone.
No behavior change: the frontend suite and its golden master are
unchanged. No common code changed, so the benchmark does not apply.
AI-assisted-by: claude-opus-5-5
The namespace held 3,300 lines: component sync, instance creation and
detach, swap and the variant switch's attribute carry, duplication,
and the sync of library colors and typographies. Each now has its own
namespace:
- app.common.logic.libraries (cll): component sync, reset, update
main, attribute and placement sync, and the sync of a file with its
libraries;
- app.common.logic.instances (cli): create, instantiate and restore a
component, detach a copy;
- app.common.logic.swap (clsw): swap a copy head, carry overrides
across a variant switch;
- app.common.logic.duplicate (cld): duplicate components and shapes;
- app.common.logic.library-assets (clla): sync of library colors and
typographies, which the asset multimethods delegate to.
Each new namespace may require libraries, never the reverse; the
helpers they share became public there (attr-operations,
reposition-shape, orient-like, swap-content-root-id, ...). Callers use
the new aliases. The functions move as they were.
No behavior change: the golden masters and the suites are unchanged.
Benchmark (lower quantile, ms; baseline / now / ratio):
deepest-edit-through-three-levels 35.2 / 37.3 / 1.06
edit-through-a-chain-of-dependents 68.9 / 69.7 / 1.01
library-update-into-copies 83.1 / 79.8 / 0.96
main-edit-into-10-copies 1.8 / 1.6 / 0.92
main-edit-into-100-copies 15.4 / 15.4 / 1.00
main-edit-into-1000-copies 153.1 / 156.0 / 1.02
variant-switch-into-copies 32.1 / 27.0 / 0.84
AI-assisted-by: claude-opus-5-5
Sync and the variant switch can take a copy text's family from one side
and its weight from the other. The variant id goes with the weight, so
it can name a variant of the other family: the WASM renderer then picks
the closest variant, but the SVG renderer falls back to the regular one.
The frontend now gives each text content that a sync or a component swap
commits variants of its own families: a run whose variant is not one of
its family's takes the family's closest to its weight and style
(cttx/update-font-variants, fonts/find-closest-variant). The pure runner
has no fonts, so case BA leaves variant ids out of its comparison.
The merge also leaves alone a run that already shows the placed style,
so a main edit no longer rewrites the variant ids of a copy whose
family is its own; with a new family, the run still takes the placed
variant id.
Benchmark (lower quantile, ms; baseline / now / ratio):
deepest-edit-through-three-levels 35.2 / 35.7 / 1.01
edit-through-a-chain-of-dependents 68.9 / 65.2 / 0.95
library-update-into-copies 83.1 / 75.1 / 0.90
main-edit-into-10-copies 1.8 / 1.5 / 0.86
main-edit-into-100-copies 15.4 / 15.1 / 0.98
main-edit-into-1000-copies 153.1 / 151.4 / 0.99
variant-switch-into-copies 32.1 / 30.4 / 0.95
AI-assisted-by: claude-opus-5-5
The migration 0033 stores every swap of a file as an override group.
A swap made in a copy is paired with the child of the near main that
holds the same position, as sync paired it; any other slot is dropped.
All pairings are found on the data as it was, so swaps nested in swaps
pair against the content of the outer one, and libraries pair the same
whether they are migrated or not. A head that refers to its own slot
only inherited it, and drops it even when its near main cannot be
reached. Any other slot that matches no child, or whose near main is in
a library that is not loaded, keeps the slot as its ref, so validation
reports it. An import, which migrates its files before it links their
libraries, leaves those slots and converts them once the libraries are
linked. A migrated head that sits elsewhere than the child it replaces
would place it gets its geometry marked as touched, so the first sync
does not move it. Migrated and new files carry the feature
components/swap-group, so a client that still writes slots cannot open
them.
Validation checks the new form: :misplaced-slot reports any slot,
:misplaced-swap-group the group anywhere but on a nested copy head in a
copy, :ref-not-in-near-main a nested copy head whose ref is not a child
of the near main of its parent, and :duplicate-ref two children of a
copy that refer to the same main shape. Each has a repair.
Nothing but the migrations reads slots any more: the slot branches go
from sync, swap, switch, reset, detach, paste, duplicate and move. The
helpers that read and write a slot on a shape move to files/swap-slots,
and the ones that follow refs to files/comp-processors. The graph
projection drops the FillsSwapSlot edge, the components debugger shows
the component a swapped head takes its content from, and the plugin API
documents componentRefShape for a swapped copy. The swap tests are
named after what they check.
Benchmark (lower quantile, ms; baseline / now / ratio):
deepest-edit-through-three-levels 35.2 / 34.6 / 0.98
edit-through-a-chain-of-dependents 68.9 / 63.5 / 0.92
library-update-into-copies 83.1 / 76.4 / 0.92
main-edit-into-10-copies 1.8 / 1.6 / 0.87
main-edit-into-100-copies 15.4 / 15.1 / 0.98
main-edit-into-1000-copies 153.1 / 148.8 / 0.97
variant-switch-into-copies 32.1 / 26.4 / 0.82
AI-assisted-by: claude-opus-5-5
No components v1 file reaches the code any more: opening one fails the
feature check, and imports reject it or give it the feature. What only
served v1 goes:
- validate-file and validate-file-affected no longer skip a file
without components/v2;
- the root of a deleted component is found by its main instance id
only, in the type helper and the component sprite;
- generate-sync-library, which synced shapes inside live components,
and the live components in containers-seq, so asset usages walk the
pages only (deleted components keep their objects and still sync);
- the unused :components-v2 file option, from the schema, the file
data and the test fixtures; stored files that carry it still
validate;
- the team migration-in-progress check and its frontend alert, which
leaves ephimeral features out of the team comparison;
- the components v2 introduction dialog, its styles and icons, and the
:v2-info-shown profile prop;
- the graphic asset events and builders and the reads of graphics in
the selection (the :add-media, :mod-media and :del-media changes stay,
so stored changes still apply), and the uncalled render-page and
render-components helpers.
AI-assisted-by: claude-opus-5-5
Both binfile importers stored a file without the components/v2 feature
as a v2 file, though its component data was never migrated. Such a file
is now rejected with :file-in-components-v1, the code that opening a v1
file already raises, when it has components or shapes linked to them
(:component-id, :shape-ref or :main-instance). A file without component
data takes the feature and imports as before.
Since every imported file now has the feature before the pending
migrations are registered, the no-op components/v2 migration goes.
The import dialog explains the rejection: the entry says that the file
uses an old type of components that Penpot no longer supports, with its
own text, as errors.deprecated talks about opening a file.
AI-assisted-by: claude-opus-5-5
A review found tests that would pass with what they test broken.
- Runners: both judge one variant at a time, fail a variant with no
assertion and a known-failure mark that applies nowhere, and give
the asserter the state the operations produced. The pure runner
validates the final file and rejects operations of unknown kind.
The frontend interpreter fails a step when the store reports an
event error (Potok only logs it), reports asserter errors against
their case, and stops the watchers that install! starts.
- Nodes drive the real code: a main root rename goes through
end-rename-shape, and the clipboard's advance of nested copies is
one common function, cll/advance-copied-objects, that copy-selected
and both test paths call.
- Cases N, AH, AI, AK, AD, AE, K, C, H, S, AY, I, Y, AX and F check
what they claim; O, R and T get real sizes.
- Stricter common unit tests found F60 (a repair detaches healthy
copies), F61 (a switch drops a fixed-sizing size), F62 (the ref
chain never stops at its target) and F63 (latent); all pinned.
- Frontend library tests: the RPC double records on subscribe, the
dropped commits check that nothing syncs, and the link and share
tests check the events sent.
- Plugin suite: OpSwap and OpDetach throw when the API call did
nothing, and case AB checks that the reset head is an instance of
the original component.
- The composable suite memory records the new rules.
The component watcher opened its :sync-file wait only for commits saved
to the undo stack. Undo and redo commit without it, so a wait such as
the plugin waitForLayoutUpdate returned before the watcher had handled
them. Translation and derived commits were filtered out before the wait
opened.
Open the wait for every local commit of a file and close it once the
watcher has decided what to do: sync, only touch the component, or
drop the commit. Dropped commits close it right away.
Add wrf/pending, a snapshot of the pending work, for tests and
diagnostics.
The composable test interpreter wired its own copy of the undo stack
subscription and started only the component watcher, so it reacted to
edits differently from the app, and a missing subscription failed
silently.
Gather the subscriptions that react to edits while a file is open
(undo stack, layout updates, text reflow, WASM text measurement) in
initialize-edit-watchers, stopped by finalize-edit-watchers, and the
per-page component and token watchers in watch-library-changes. The
workspace and the interpreter both start them.
Starting the edit watchers again replaces the running ones. A file
reload starts the workspace again without finalizing it, which left two
undo stack watchers running, so an edit added an extra undo entry.
The variant switch event picked its target variant, and the component
swap event worked out where the new head goes, inside the frontend
events. Code that runs without the frontend store, such as the pure
composable runner, could not do the same switch or swap. The swap and
the switch also checked for nesting loops with two different
functions.
Move them to app.common.logic.variants:
- find-switch-target picks the nearest variant with the requested
value.
- generate-component-swap-in-place builds the swap changes keeping the
old head's index, grid cell and swap-keep-attrs, plus the
keep-touched step when asked.
- swap-nesting-loop? checks that a swap or switch does not nest a
component inside itself. The swap menu, the plugin swapComponent and
the variants-switch event all use it.
The frontend events behave as before, with two exceptions. Switching
to a value no other variant has does nothing, where it threw in
min-key. A swap also updates the layout of the shapes the keep-touched
step adds.
* 🐛 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
* ♻️ 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
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
