twiddle-panel 0.8.2 → 0.9.0

package/README.md

@@ -43,7 +43,7 @@ if (import.meta.env.DEV) import('twiddle-panel');
 **Plain HTML prototypes** (no install needed)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/twiddle-panel@0.8.2/dist/twiddle.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/twiddle-panel@0.9.0/dist/twiddle.js" defer></script>
 ```
 
 The prototype's CSS must use the `--twd-*` token variables
@@ -63,13 +63,13 @@ that use them can be re-pointed in **Spacing › Layout roles**.
 
 Open it with the Panel button in the bottom-right corner, or Alt+T (Option+T on a Mac). The panel opens to the left of the button.
 
-- **Tabs** along the bottom: **Overview** (the **Character** pad: up/down for spacing, Subtle ↔ Bold for weights, borders, corners and shadows; plus a summary of the current look), **Colour** (four themes, then fine-tune with the Tailwind palette: a colour family and shade for the primary, a grey family for the neutrals, or any custom hex; Light/Dark), **Type** (font pairings as tiles, base size, scale), **Spacing** (density, layout roles), **Shape** (button style, corners and size; card style, corners and borders) and **Shadows**. Each tab ends with its tokens as rows you can set to a fixed value; an edited token shows **Custom** and its own reset. The header holds the global actions; **Copy link** shares the exact version (`?twd=…`).
-- **Pick** (crosshair) selects one element. The panel then shows only the sections that element uses. Choose **This element** or **All `.class` (n)** to set where the tweaks go. Add `data-twd="name"` to an element to control what counts as "all like this".
+- **Tabs** along the top: **Overview** (the **Character** pad: up/down for spacing, Subtle ↔ Bold for weights, borders, corners and shadows; plus a summary of the current look), **Colour** (four themes, then fine-tune with the Tailwind palette: a colour family and shade for the primary, a grey family for the neutrals, or any custom hex; Light/Dark), **Type** (font pairings as tiles, base size, scale), **Spacing** (density, layout roles), **Shape** (button style, corners and size; card style, corners, fill and borders) and **Shadows**. Tabs stay in step: when the Character pad changes something another tab owns (corners, borders, shadows, weights), that tab shows the real value and says "from Character". Each tab ends with its tokens as rows you can set to a fixed value; an edited token shows **Custom** and its own reset. One row along the bottom holds every action (Undo, Redo, Pick, Compare, Copy link, Reset, Changes, Copy prompt); the Panel button opens and closes the panel. **Copy link** shares the exact version (`?twd=…`).
+- **Pick** (arrow) starts selection mode: click an element and every tab now changes just that element (Character pad included), until you press **Pick** again. Choose **This element** or **All `.class` (n)** to set where the tweaks go. Add `data-twd="name"` to an element to control what counts as "all like this".
 - **Compare** (half circle): hold it, or press Alt+C, to see the original page.
-- **Minimise** (line) shrinks the panel to just its tabs, beside the Panel button; click a tab to open it again.
+- **Minimise** (the chevron at the end of the tabs) shrinks the panel to just its tabs, beside the Panel button; click a tab or the chevron to open it again.
 - **Move it**: drag the Panel button to any spot; it attaches to the nearest corner, keeps its distance from the edges, and the panel opens on the side away from the edge. With the button focused, arrow keys nudge it 1px (Shift: 10px). Double-click it to put it back bottom-right. Remembered for the site in this browser.
-- **Undo / Redo** in the header, or ⌘Z / ⇧⌘Z while the panel has focus. Reset can be undone too.
-- **Changes** lists every tweak with the token values before and after. Use × to remove one.
+- **Undo / Redo** in the bottom row, or ⌘Z / ⇧⌘Z while the panel has focus. Reset can be undone too.
+- **Changes** (the number in a circle, bottom row) opens a side panel next to the main one, listing every tweak with the token values before and after. Use × on a row to remove it.
 - **Copy prompt** turns the tweaks into a Markdown prompt for a coding agent, so they become permanent in the source. Use the arrow next to it to choose between *Preview before copying* and *Copy without preview*.
 - Colour pairs that fall below WCAG AA show a warning in Colour, in Changes and in the prompt.