[DominikaPacholec-Synergy]

What

The Nodes Library and the Properties panel now follow the Design System in Figma (Left_Sidebar, Expanded). The prototype's smaller tiles were dropped: where the DS has a spec, it wins.

	Before	Now (= DS)
Nodes Library width	275 px	273 px
Panel padding (from the outer edge)	13 px top/bottom, 17 px sides	16 px
Header → separator → content → separator → footer	20 px	16 px
Palette tile / drag preview	241 × 64 px	241 × 60 px
Icon box in the palette	46 px	44 px

Canvas nodes are unchanged.

Why the numbers were off

Figma draws strokes inside the box, so its sizes already include the 1 px border. A CSS border adds to the box, and every bordered element came out 1 px larger on each side.

How

• Panel border (sidebar.module.css): outline: 1px solid with outline-offset: -1px instead of border. It is an inside stroke, as in Figma, so the paddings stay the DS values (1rem) with no compensation. The change applies to both panels.
• Panel spacing (sidebar/variables.css): vertical padding and content gap set to 1rem.
• Palette tile (node-preview.module.css, new): NodePreview wraps the template in a .preview scope that subtracts the border from --wb-public-node-padding and --wb-public-node-icon-padding. It covers every template, built-in and custom, and the drag preview, because the drag ghost renders the same NodePreviewContainer. The canvas keeps its own values. Wrapping in node-preview-container.tsx also avoids palette-item.tsx and palette-items.tsx, which the mobile drag-and-drop PR (fix(sdk) working drag and drop on mobile #119) touches.
• Palette width: the palette keeps width: auto and hugs its content, which gives 241 + 2 × 16 = 273 px. The --wb-sdk-sidebar-expanded-width override next to it has no effect while width: auto wins.

Known differences from Figma (follow-up)

• When the palette scrolls, the panel widens by the scrollbar width (6 px in Chromium and Safari, more in Firefox on Windows), because width: auto counts the scrollbar in. The tiles are not clipped.
• The tile title sits 2 px lower than in Figma: Figma puts the subtitle in a 14 px row and the code in a 10 px one. The fix belongs in NodeDescription (packages/ui) and moves the canvas too.
• Canvas nodes are the same DS component, so they probably should be 60 px as well. That changes canvas geometry and is out of scope here.
• The Properties width (320 px) was not checked against the DS page "Right Sidebar — Spacing & Gaps".

Verification

Demo in Chrome, measured in the DOM against the Figma metadata:

• Nodes Library: width, paddings, header, collapse button, separators, tiles (position, size, gap), icon box, glyph, typography and footer button all match the DS. The only exception is the title offset above.
• The custom template (demo multi-port) renders 60 px in the palette.
• Drag preview: 241 × 60 px.
• Properties panel: 16 px spacing.
• Canvas nodes unchanged: 64 px.
• AI Studio, including the human-decision template.
• Dark mode.
• node-preview-container.spec.tsx (new case included), SDK typecheck and lint pass.

Changeset

sdk patch (.changeset/sidebar-ds-spacing.md).

[librowski]

One change of direction on the tiles: in the DS file the palette tile is the same "Node" component as on the canvas, and it is 60 px tall. So the 64 px we render on the canvas is the same border miscalculation, not a separate spec. Let's fix it in packages/ui instead of the palette: subtract the border from the default node and icon padding, and drop the .preview wrapper, its CSS module and spec. Canvas and palette both land on 60 px, and consumer overrides of the node padding keep working everywhere.

Changesets: ui minor and sdk minor.