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
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
* ✨ 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
Support currently fixes wrong profile emails and false bounce marks with
raw SQL. Add update-profile-email! (rejects collisions) and
clear-email-complaint-reports! (deletes global and profile reports and
unmutes the matching profile) so these ops run through the REPL.
Closes#12663
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
The Nextcloud link to the enterprise migration guide no longer works.
Point it to the new share.
The box also had a bold "Open the full guide (PDF)" line that looked
clickable but was not, with the real link below it. Keep a single
link and mark it as a PDF at the end of the text.
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
The full `git describe` output is not stable across checkouts: the
length of its -g<sha> suffix depends on the local object count, so
build-bundle and build-docker could compute different keys for the same
commit on different runner workspaces. The sha already pins the commit,
so the closest tag is enough to tell versions apart.
Signed-off-by: David Barragán Merino <david.barragan@kaleidos.net>
The full `git describe` output is not stable across checkouts: the
length of its -g<sha> suffix depends on the local object count, so
build-bundle and build-docker could compute different keys for the same
commit on different runner workspaces. The sha already pins the commit,
so the closest tag is enough to tell versions apart.
Signed-off-by: David Barragán Merino <david.barragan@kaleidos.net>
The bundle stamps the version into version.txt, so a commit that gets a
new tag (2.18.1-RC1 -> 2.18.1) needs a new bundle and image set. Keying
them by commit sha alone reused the RC artifacts for the final release.
Signed-off-by: David Barragán Merino <david.barragan@kaleidos.net>
The bundle stamps the version into version.txt, so a commit that gets a
new tag (2.18.1-RC1 -> 2.18.1) needs a new bundle and image set. Keying
them by commit sha alone reused the RC artifacts for the final release.
Signed-off-by: David Barragán Merino <david.barragan@kaleidos.net>
* 🐛 Remap library refs inside deleted components on absorb
Deleted components keep their shapes in :objects, to be restored and
to resolve their remaining copies. When a library was absorbed into a
file (export with libraries merged, unsharing or deleting the
library), absorb-assets only looked for usages in pages and in live
components. The shapes inside deleted components kept pointing to the
library, so they no longer matched their copies in the pages: the file
failed validation with :component-id-mismatch and could not be saved.
Also look for usages in deleted components, so their library
components, colors and typographies are remapped to the local file.
Relates to #10806
AI-assisted-by: claude-opus-5-5
* 🐛 Persist pointer-map fragments when absorbing a library
absorb-library-by-file saved the file without its :features. Without
"fdata/pointer-map" there, encode-file does not persist the changed
fragments, so in files with pointer maps the pages and components
that absorb-assets remapped were never written. After unpublishing or
deleting a library, its consumers failed to load with "fragment not
found".
Pass :features to update-file!. Exporting with shared libraries does
not go through this path, so it was not affected.
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
Setting a library as tokens source did not update shapes that use tokens,
because set-tokens-source never ran the token propagation that every other
token operation runs. Run it after the commit.
Going back to the local tokens, or unlinking the library that was the
source, left no local set active: the file has a single tokens status, and
switching to a library replaced it with the library's one. Keep the status
of the file's own tokens lib aside in a new optional :own-tokens-status
attribute while an external library is the source, and restore it when the
file is its own source again. Exporting without libraries and absorbing a
deleted source library restore it as well.
Closes#12430
AI-assisted-by: claude-opus-5-5
* ✨ Close search and shortcuts panels with Escape
The workspace search and shortcuts panels could only be dismissed with
the mouse, which interrupts keyboard-first workflows.
A new use-escape-to-close hook gives each panel an on-key-down handler
that closes it on Escape while the user is working in it: the latest
pointer press or focus change must have landed inside the panel, or the
panel must hold focus when it opens (a panel that autofocuses its search
box, such as Shortcuts, is closed by the first Escape). Focus left
behind in a panel after the user moved on to the canvas does not count,
so Escape keeps its usual meaning there.
The handler never stops the event. The global Escape shortcut still
runs and finishes in-progress operations such as path drawing; an
earlier version stopped propagation and left a half-drawn path that
failed shape validation on the next commit.
In the search panel an open filters menu takes the first Escape and
the panel closes on the second.
The history panel needs no handler: Escape already closes it through
the :interrupt it emits.
Closes#9540
AI-assisted-by: claude-opus-5-5
AI-assisted-by: claude-sonnet-5-5
Signed-off-by: Filip Sajdak <filip.sajdak@siili.com>
* 📎 Add e2e test for closing panels with Escape
Cover the Escape handling added for the layers search and shortcuts
panels with four Playwright cases on the mocked workspace:
- Escape closes the layers search panel.
- With the search filters menu open, the first Escape closes only the
menu and the second closes the panel.
- Escape closes the shortcuts panel right after it opens with `?`. The
panel autofocuses its search box, so the first Escape must close it
instead of only blurring the box.
- A path drawn while focus sits in the shortcuts panel is finished by
Escape, which proves the panel does not swallow the global shortcut.
The first three cases fail on develop. The shortcuts case also fails
when the hook does not seed its tracker from the focused element.
AI-assisted-by: claude-sonnet-5-5
Signed-off-by: Filip Sajdak <filip.sajdak@siili.com>
* 🐛 Close History with Escape when opened by shortcut or menu
Only the header button opened History through initialize-history, which
removes the :document-history flag on the next :interrupt. The
Ctrl/Cmd+Alt+H shortcut and the "Version history" menu item toggled the
flag directly, so the global Escape left the panel open. Both now emit
initialize-history, like the header, and keep their own event origin.
Two e2e cases cover the shortcut and the menu; both fail without this
change.
AI-assisted-by: claude-sonnet-5-5
Signed-off-by: Filip Sajdak <filip.sajdak@siili.com>
* ♻️ Apply review suggestions to Escape-to-close
Use dom/child? instead of .contains in the Escape hook and drop the
redundant nil checks. Drive the path test through clickAt so its clicks
wait for the path tool. Add a negative Search case: Escape reaches the
panel after the last click landed on the viewport, and the panel stays
open. That case fails when the containment check is removed.
AI-assisted-by: claude-sonnet-5-5
Signed-off-by: Filip Sajdak <filip.sajdak@siili.com>
---------
Signed-off-by: Filip Sajdak <filip.sajdak@siili.com>
* ♻️ Use DS buttons and icons in the viewer header
The section buttons, full screen and edit become ghost DS icon buttons
(the last two were spans), with aria-pressed where they toggle. Share
and "Log in or sign up" become DS buttons. The zoom widget becomes a
button that toggles its menu, like the workspace one, with DS zoom
buttons inside. The breadcrumb and the current board name become
buttons with aria-expanded, and the page menu moves next to its
button. The arrow and tick icons use DS icons. The logo stays: it is
brand art.
A visual test covers the header in two sections and both menus.
AI-assisted-by: claude-opus-5-5
* ♻️ Move viewer header styles off the deprecated styles
Spacing, sizes, borders, typographies and color aliases move to DS
tokens and logical properties, and the button placeholders go away.
The section buttons column goes from a fixed 92px to auto, since the
three 32px DS buttons no longer fit; the 1fr side columns keep it
centered. The zoom widget follows the workspace header one. The 11px
project name becomes the 12px DS headline-small. The global .selected
rule also highlighted the current page in the page menu: that row
keeps its highlight through its own rule. The refactor/ import stays
only for the shared menu placeholders; the options z-index (10) has no
DS token and keeps a TODO.
AI-assisted-by: claude-opus-5-5
* ♻️ Use DS icon buttons in the viewer board navigation
The previous, next and first board buttons of the viewer become
secondary DS icon buttons with the DS arrow and reload icons. They keep
their size and the viewer background at rest; on hover they take the DS
secondary look. The first board button had no accessible name; it is
now labelled. The position classes move to the tooltip wrappers, so the
fullscreen and comments sidebar offsets still apply.
New key: viewer.go-to-first-board (en, es). A visual test covers the
buttons at rest and on hover.
AI-assisted-by: claude-opus-5-5
* ♻️ Move viewer styles off the deprecated styles
Spacing, sizes, borders, typographies and color aliases move to DS
tokens and logical properties, and the file no longer imports
refactor/. The section scrollbar uses the DS custom-scrollbar mixin; the
text selection and placeholder styles that %new-scrollbar gave to the
comments layer stay, with DS tokens of the same value. An invalid
padding-right with four values, which the browser ignored, is gone.
The DS body-small typography differs from the old one only in a more
compact line-height, so the board counter sits 1px higher. The z-index
values (10, 2) have no DS token and keep a TODO. The .viewer-header,
.not-fixed, .fixed and .frame-children rules are not used by this module
and are commented out with a TODO.
AI-assisted-by: claude-opus-5-5
* 🔥 Remove unused styles from the viewer
The SCSS refactor of the viewer left rules commented out with a TODO
because the module does not use them, or because they target an svg
inside a DS icon that is the svg itself. CSS modules scope the classes
to this module and no other source uses them, so they go:
.viewer-header, .not-fixed, .fixed, .frame-children g. No visual change.
AI-assisted-by: claude-opus-5-5
The RPC layer emitted the event as soon as the handler returned the
SSE response, before the import ran, so the event could not say which
files the import created. Emit it from inside the SSE handler once the
import ends, with the ids and count of the created files and whether
the import completed or failed.
Closes#12485
AI-assisted-by: claude-opus-5-5
Text copied in Penpot carries its content in a data attribute of the
clipboard HTML, which plugins and other apps can rewrite. The v3 editor
and canvas paste used it as is, so bad data could reach WASM and the
file and break the shape.
The payload is now dropped, and the paste falls back to plain text in
the caret style, unless its content passes the text shape schema, its
span geometry holds only safe numbers and its file and team ids are
uuids. Payloads in HTML over the paste size limit are not decoded.
Copied text shapes pasted into the editor get the same checks, plus a
numeric position; when they fail, nothing is pasted.
Closes#12167
AI-assisted-by: claude-opus-5-5
LibraryComponent.restore() did not check that the component belongs to
the current file's library. Called on a deleted component of a connected
shared library, it restored that component and saved the change to the
library file, while remove(), annotation and duplicate() reject such
handles with a validation error.
restore() now rejects them the same way: "Can only restore components
from the current file's library".
Closes#12607
