@webround/core 0.1.8 → 0.3.0

package/dist/style.js

@@ -0,0 +1,1081 @@
+// The style of an element, as a person, an AI and a tool outside all understand it: a PROPERTY (padding, text color, width…), at a BREAKPOINT
+// (base, md…), with a VALUE that has a name (4, accent, center). The code says it with Tailwind classes (`px-4 md:px-6 text-accent`); this file is the
+// ONE place that knows how one becomes the other, in both directions. Pure: no React, no Node, no I/O. The panel, the operations (style-get, style-set,
+// style-catalog: so `wr`, MCP and the API) and the tests read the same table, and nothing else lists a property, a value or a class.
+//
+// What it promises when it writes a className:
+//  - only whole classes that are in the table (Tailwind finds a class by reading the code: nothing is ever built from pieces);
+//  - what it does not know stays exactly where it was (hover:, dark:, !important, arbitrary values on other properties, the project's own classes);
+//  - only the classes of the property and the breakpoint it was asked about change (and the narrower ones a wider one replaces: p replaces px, pt…).
+/** Mobile first: a value at a breakpoint holds from that width up, until a wider breakpoint says otherwise. */
+export const WR_BREAKPOINTS = [
+    { id: 'base', variant: '', minWidth: 0, label: 'All screens', description: 'Every screen, phones included. Wider breakpoints can change it.' },
+    { id: 'mobile', variant: 'max-md', minWidth: 0, label: 'Mobile', description: 'Phones only: below 768 px wide. It overrides "All screens" there and on no other screen.' },
+    { id: 'sm', variant: 'sm', minWidth: 640, label: 'Large phones and up', description: 'From 640 px wide.' },
+    { id: 'md', variant: 'md', minWidth: 768, label: 'Tablet and up', description: 'From 768 px wide.' },
+    { id: 'lg', variant: 'lg', minWidth: 1024, label: 'Desktop and up', description: 'From 1024 px wide.' },
+    { id: 'xl', variant: 'xl', minWidth: 1280, label: 'Wide desktop and up', description: 'From 1280 px wide.' },
+];
+export const WR_BREAKPOINT_IDS = WR_BREAKPOINTS.map(b => b.id);
+/**
+ * What a breakpoint inherits from, own first: mobile first, so a width counts the narrower ones (md: base, sm, md). Mobile is the exception: it holds BELOW md (`max-md:`), so it only
+ * has the base to fall back on, and no other width counts it.
+ */
+export function wrStyleCascade(breakpoint) {
+    if (breakpoint === 'mobile')
+        return ['mobile', 'base'];
+    const at = WR_BREAKPOINTS.findIndex(b => b.id === breakpoint);
+    return WR_BREAKPOINTS.slice(0, at + 1).filter(b => b.id !== 'mobile').map(b => b.id).reverse();
+}
+export const WR_STYLE_GROUPS = {
+    spacing: 'Spacing', size: 'Size', text: 'Text', color: 'Color', border: 'Border', effects: 'Effects', motion: 'Motion', layout: 'Layout',
+};
+export const WR_STATES = [
+    { id: 'hover', variant: 'hover', label: 'Hover', description: 'While the pointer is over it (where there is a pointer: a phone does not hover).' },
+    { id: 'focus', variant: 'focus', label: 'Focus', description: 'While it has the focus (reached with the keyboard, or clicked into): what shows a person where they are.' },
+    { id: 'active', variant: 'active', label: 'Pressed', description: 'While it is being pressed.' },
+];
+export const WR_STATE_IDS = WR_STATES.map(s => s.id);
+// ── The table ────────────────────────────────────────────────────────────────
+/** The semantic colors of the starter site's theme (index.css `@theme`): the project's own list replaces it (see `WrStyleOptions`). */
+export const WR_DEFAULT_COLOR_TOKENS = [
+    'page', 'fg', 'muted', 'subtle', 'surface', 'surface-2', 'line', 'accent', 'accent-hover', 'accent-text', 'accent-soft', 'on-accent', 'inverse', 'on-inverse',
+];
+const SPACING_STEPS = ['0', 'px', '0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '5', '6', '7', '8', '9', '10', '11', '12', '14', '16', '20', '24', '28', '32', '36', '40', '44', '48', '52', '56', '60', '64', '72', '80', '96'];
+/** Tailwind's scale: a step is a quarter of a rem. */
+function stepCss(step) {
+    if (step === 'px')
+        return '1px';
+    const n = Number(step);
+    return n === 0 ? '0' : `${n / 4}rem (${n * 4}px)`;
+}
+const spacingValues = (prefix, extra = []) => [
+    ...SPACING_STEPS.map(step => ({ value: step, class: `${prefix}-${step}`, label: step, css: stepCss(step) })),
+    ...extra,
+];
+const FRACTIONS = ['1/2', '1/3', '2/3', '1/4', '3/4', '1/5', '2/5', '3/5', '4/5'];
+const sizeValues = (prefix) => [
+    { value: 'auto', class: `${prefix}-auto`, label: 'Auto', css: 'auto' },
+    { value: 'full', class: `${prefix}-full`, label: 'Full', css: '100% of the parent' },
+    { value: 'screen', class: `${prefix}-screen`, label: 'Screen', css: '100% of the screen' },
+    { value: 'fit', class: `${prefix}-fit`, label: 'Fit content', css: 'as wide as its content' },
+    { value: 'min', class: `${prefix}-min`, label: 'Min content', css: 'min-content' },
+    { value: 'max', class: `${prefix}-max`, label: 'Max content', css: 'max-content' },
+    ...FRACTIONS.map(f => ({ value: f, class: `${prefix}-${f}`, label: f, css: `${Math.round((Number(f.split('/')[0]) / Number(f.split('/')[1])) * 10000) / 100}% of the parent` })),
+    ...spacingValues(prefix),
+];
+const option = (value, className, label, css) => ({ value, class: className, label, ...(css ? { css } : {}) });
+const STEP_PATTERN = /^\d{1,4}(?:\.\d{1,2})?$/;
+const INTEGER_PATTERN = /^\d{1,3}$/;
+const FRACTION_PATTERN = /^(\d{1,3})\/(\d{1,3})$/;
+/** A number someone typed (or a class carries) as a value of a free property: its name, class and meaning; null when it is not one. */
+function freeValue(free, text) {
+    const negative = text.startsWith('-');
+    const body = negative ? text.slice(1) : text;
+    if (negative && !free.negative)
+        return null;
+    const classOf = (amount) => `${negative ? '-' : ''}${free.prefix}-${amount}`;
+    if (free.kind === 'step' && STEP_PATTERN.test(body) && Number(body) <= free.max) {
+        const n = Number(body);
+        const value = `${negative && n !== 0 ? '-' : ''}${n}`;
+        return { value, class: classOf(String(n)), label: value, css: `${negative && n !== 0 ? '-' : ''}${stepCss(String(n))}` };
+    }
+    if (free.kind === 'integer' && INTEGER_PATTERN.test(body) && Number(body) <= free.max) {
+        const n = Number(body);
+        return { value: String(n), class: classOf(String(n)), label: String(n), css: `${n}px` };
+    }
+    const fraction = free.fractions ? FRACTION_PATTERN.exec(body) : null;
+    if (fraction && !negative && Number(fraction[1]) > 0 && Number(fraction[2]) > 0) {
+        const value = `${Number(fraction[1])}/${Number(fraction[2])}`;
+        return { value, class: classOf(value), label: value, css: `${Math.round((Number(fraction[1]) / Number(fraction[2])) * 10000) / 100}% of the parent` };
+    }
+    return null;
+}
+/** What a value of a property is: one of its list, or (when the property is free) any number it accepts. null when it is neither. */
+export function wrStyleParseValue(property, text) {
+    const trimmed = text.trim();
+    return property.values.find(v => v.value === trimmed) ?? (property.free ? freeValue(property.free, trimmed) : null)
+        ?? (typeof property.hex === 'string' ? hexValue(property.hex, trimmed) ?? colorFunctionValue(property, property.hex, trimmed) : null);
+}
+const RGB_COLOR = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?)(?:\s*,\s*|\s+)(\d{1,3}(?:\.\d+)?)(?:\s*,\s*|\s+)(\d{1,3}(?:\.\d+)?)(?:\s*(?:,|\/)\s*(\d*\.?\d+%?))?\s*\)$/i;
+/**
+ * A color said the way the browser says it (`rgb(34, 197, 94)`, `rgba(50, 34, 18, 0.5)`: what `getComputedStyle` gives, what a person copies from the dev tools) as the hex color it is. Fully
+ * transparent is `transparent` when the property has it; a half-transparent color is a hex with its alpha. null when it is not one of these.
+ */
+function colorFunctionValue(property, prefix, text) {
+    const match = RGB_COLOR.exec(text);
+    if (!match)
+        return null;
+    const [r, g, b] = match.slice(1, 4).map(Number);
+    if ([r, g, b].some(n => n > 255))
+        return null;
+    const alpha = match[4] === undefined ? 1 : match[4].endsWith('%') ? parseFloat(match[4]) / 100 : parseFloat(match[4]);
+    if (!(alpha >= 0 && alpha <= 1))
+        return null;
+    if (alpha === 0)
+        return property.values.find(v => v.value === 'transparent') ?? null;
+    const hex = (n) => Math.round(n).toString(16).padStart(2, '0');
+    return hexValue(prefix, `#${hex(r)}${hex(g)}${hex(b)}${alpha < 1 ? hex(alpha * 255) : ''}`);
+}
+const HEX_COLOR = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+/** A color picked on the fly (`#22c55e`): written as an arbitrary value (`bg-[#22c55e]`), so it is outside the theme and does not follow it. null when it is not a hex color. */
+function hexValue(prefix, text) {
+    if (!HEX_COLOR.test(text))
+        return null;
+    const value = text.toLowerCase();
+    return { value, class: `${prefix}-[${value}]`, label: value, css: 'not the theme\'s: it does not follow it', swatch: value };
+}
+/** What a free property accepts, in words: for the field that takes it and for an error that refuses it. */
+export function wrStyleFreeHint(free) {
+    const what = free.kind === 'step' ? `any number from 0 to ${free.max} (each step is a quarter of a rem, 4px: 27 is 6.75rem, 108px)` : `a whole number of pixels, from 0 to ${free.max}`;
+    return `${what}${free.negative ? ', negative too (-4)' : ''}${free.fractions ? ', or a fraction of the parent (3/7)' : ''}`;
+}
+const SIDES = [
+    { suffix: '', label: 'all sides' }, { suffix: 'x', label: 'left and right' }, { suffix: 'y', label: 'top and bottom' },
+    { suffix: 't', label: 'top' }, { suffix: 'r', label: 'right' }, { suffix: 'b', label: 'bottom' }, { suffix: 'l', label: 'left' },
+];
+const SIDE_NAME = { '': '', x: '-x', y: '-y', t: '-top', r: '-right', b: '-bottom', l: '-left' };
+const INCLUDED = { '': ['x', 'y', 't', 'r', 'b', 'l'], x: ['l', 'r'], y: ['t', 'b'] };
+function boxProperties(kind, letter) {
+    const text = kind === 'padding' ? 'Space inside the element, between its edge and its content' : 'Space outside the element, between it and its neighbours';
+    return SIDES.map(({ suffix, label }) => ({
+        id: `${kind}${SIDE_NAME[suffix]}`,
+        label: `${kind === 'padding' ? 'Padding' : 'Margin'}${suffix ? ` (${label})` : ''}`,
+        description: `${text}: ${label}.`,
+        group: 'spacing',
+        control: 'scale',
+        values: spacingValues(`${letter}${suffix}`, kind === 'margin' ? [option('auto', `${letter}${suffix}-auto`, 'Auto', 'takes the free space')] : []),
+        ...(INCLUDED[suffix] ? { includes: INCLUDED[suffix].map(s => `${kind}${SIDE_NAME[s]}`) } : {}),
+        customPrefix: `${letter}${suffix}`,
+        free: { kind: 'step', prefix: `${letter}${suffix}`, max: 1000, ...(kind === 'margin' ? { negative: true } : {}) },
+        compound: kind,
+    }));
+}
+function gapProperties() {
+    return [
+        { id: 'gap', label: 'Gap', description: 'Space between the children of a flex or grid element, both ways.', prefix: 'gap', includes: ['gap-x', 'gap-y'] },
+        { id: 'gap-x', label: 'Gap (columns)', description: 'Space between the children of a flex or grid element, side by side.', prefix: 'gap-x' },
+        { id: 'gap-y', label: 'Gap (rows)', description: 'Space between the children of a flex or grid element, one above the other.', prefix: 'gap-y' },
+    ].map(({ prefix, ...rest }) => ({ ...rest, group: 'spacing', control: 'scale', values: spacingValues(prefix), customPrefix: prefix, free: { kind: 'step', prefix, max: 1000 }, compound: 'gap' }));
+}
+const BORDER_WIDTHS = [['0', '0'], ['1', '1px'], ['2', '2px'], ['4', '4px'], ['8', '8px']];
+/** The border's thickness, as a whole and side by side (`border`, `border-x`, `border-t-2`…): a model like padding's, the sides are the same table. */
+function borderWidthProperties() {
+    return SIDES.map(({ suffix, label }) => {
+        const prefix = suffix ? `border-${suffix}` : 'border';
+        return {
+            id: `border-width${SIDE_NAME[suffix]}`,
+            label: `Border width${suffix ? ` (${label})` : ''}`,
+            description: `How thick the border is (it needs a color to be seen): ${label}.`,
+            group: 'border',
+            control: 'options',
+            values: BORDER_WIDTHS.map(([value, css]) => option(value, value === '1' ? prefix : `${prefix}-${value}`, value === '0' ? 'None' : value, css)),
+            ...(INCLUDED[suffix] ? { includes: INCLUDED[suffix].map(s => `border-width${SIDE_NAME[s]}`) } : {}),
+            free: { kind: 'integer', prefix, max: 100 },
+            compound: 'border-width',
+        };
+    });
+}
+const RADII = [
+    ['none', 'None', '0'], ['sm', 'Small', '0.25rem (4px)'], ['default', 'Default', '0.25rem (4px)'], ['md', 'Medium', '0.375rem (6px)'], ['lg', 'Large', '0.5rem (8px)'],
+    ['xl', 'Extra large', '0.75rem (12px)'], ['2xl', '2xl', '1rem (16px)'], ['3xl', '3xl', '1.5rem (24px)'], ['full', 'Full', 'a pill or a circle'],
+];
+const CORNERS = [{ suffix: '', label: 'all corners' }, { suffix: 'tl', label: 'top left' }, { suffix: 'tr', label: 'top right' }, { suffix: 'bl', label: 'bottom left' }, { suffix: 'br', label: 'bottom right' }];
+/** How round the corners are, as a whole and corner by corner (`rounded-xl`, `rounded-tl-lg`). */
+function borderRadiusProperties() {
+    return CORNERS.map(({ suffix, label }) => {
+        const prefix = suffix ? `rounded-${suffix}` : 'rounded';
+        return {
+            id: suffix ? `border-radius-${suffix}` : 'border-radius',
+            label: suffix ? `Corners (${label})` : 'Corners',
+            description: `How round the corners are: ${label}.`,
+            group: 'border',
+            control: 'options',
+            values: RADII.map(([value, name, css]) => option(value, value === 'default' ? prefix : `${prefix}-${value}`, name, css)),
+            ...(suffix ? {} : { includes: CORNERS.filter(c => c.suffix).map(c => `border-radius-${c.suffix}`) }),
+            compound: 'border-radius',
+        };
+    });
+}
+const FONT_SIZES = [
+    ['xs', '0.75rem (12px)'], ['sm', '0.875rem (14px)'], ['base', '1rem (16px)'], ['lg', '1.125rem (18px)'], ['xl', '1.25rem (20px)'], ['2xl', '1.5rem (24px)'],
+    ['3xl', '1.875rem (30px)'], ['4xl', '2.25rem (36px)'], ['5xl', '3rem (48px)'], ['6xl', '3.75rem (60px)'], ['7xl', '4.5rem (72px)'], ['8xl', '6rem (96px)'], ['9xl', '8rem (128px)'],
+];
+const FONT_WEIGHTS = [
+    ['thin', 'Thin', '100'], ['extralight', 'Extra light', '200'], ['light', 'Light', '300'], ['normal', 'Normal', '400'], ['medium', 'Medium', '500'],
+    ['semibold', 'Semibold', '600'], ['bold', 'Bold', '700'], ['extrabold', 'Extra bold', '800'], ['black', 'Black', '900'],
+];
+const colorValues = (prefix, tokens, withTransparent, swatches = {}) => [
+    ...tokens.map(token => ({ value: token, class: `${prefix}-${token}`, label: token, css: `the theme's ${token} color`, ...(swatches[token] ? { swatch: swatches[token] } : {}) })),
+    ...(withTransparent ? [option('transparent', `${prefix}-transparent`, 'Transparent', 'no color')] : []),
+];
+/**
+ * The entry animations (fade in, slide up, zoom in) are not Tailwind's own: they need their keyframes in the theme (`--animate-*` in an `@theme`, which Tailwind 4 turns into the class
+ * `animate-fade-in`). This is the ONE text of them: the operations write it into `theme.css` the first time one is used, and the tests compile it. The three built in (pulse, bounce, spin,
+ * ping) need nothing.
+ */
+export const WR_ENTRY_ANIMATIONS = ['fade-in', 'slide-up', 'zoom-in'];
+export const WR_ENTRY_ANIMATIONS_CSS = {
+    'fade-in': { value: 'wr-fade-in 0.6s ease-out both', keyframes: 'from { opacity: 0; } to { opacity: 1; }' },
+    'slide-up': { value: 'wr-slide-up 0.6s ease-out both', keyframes: 'from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); }' },
+    'zoom-in': { value: 'wr-zoom-in 0.5s ease-out both', keyframes: 'from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); }' },
+};
+/** Every property the panel, the operations and the API speak of, in the order they are shown. */
+export function wrStyleProperties(options = {}) {
+    const tokens = options.colorTokens ?? WR_DEFAULT_COLOR_TOKENS;
+    const swatches = options.colorSwatches;
+    return [
+        ...boxProperties('padding', 'p'),
+        ...boxProperties('margin', 'm'),
+        ...gapProperties(),
+        { id: 'width', label: 'Width', description: 'How wide the element is.', group: 'size', control: 'scale', values: sizeValues('w'), customPrefix: 'w', free: { kind: 'step', prefix: 'w', max: 1000, fractions: true }, shortcuts: ['auto', 'fit', 'full', '1/2', '1/3', '1/4'] },
+        { id: 'height', label: 'Height', description: 'How tall the element is.', group: 'size', control: 'scale', values: sizeValues('h'), customPrefix: 'h', free: { kind: 'step', prefix: 'h', max: 1000, fractions: true }, shortcuts: ['auto', 'fit', 'full', 'screen'] },
+        {
+            id: 'max-width', label: 'Max width', description: 'The width the element never goes past.', group: 'size', control: 'options', customPrefix: 'max-w',
+            values: [
+                option('none', 'max-w-none', 'None', 'no limit'),
+                ...['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'].map((s, i) => option(s, `max-w-${s}`, s, `${[20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80][i]}rem`)),
+                option('full', 'max-w-full', 'Full', '100% of the parent'),
+                option('prose', 'max-w-prose', 'Prose', '65 characters: a line of text that is comfortable to read'),
+            ],
+        },
+        {
+            id: 'font-size', label: 'Text size', description: 'How big the text is.', group: 'text', control: 'options',
+            values: FONT_SIZES.map(([size, css]) => option(size, `text-${size}`, size, css)),
+        },
+        {
+            id: 'font-weight', label: 'Text weight', description: 'How bold the text is.', group: 'text', control: 'options',
+            values: FONT_WEIGHTS.map(([weight, label, css]) => option(weight, `font-${weight}`, label, css)),
+        },
+        {
+            id: 'text-align', label: 'Text alignment', description: 'Where the text lines up.', group: 'text', control: 'options',
+            values: [option('left', 'text-left', 'Left'), option('center', 'text-center', 'Center'), option('right', 'text-right', 'Right'), option('justify', 'text-justify', 'Justify')],
+        },
+        {
+            id: 'text-decoration', label: 'Underline', description: 'Whether the text is underlined (or struck through).', group: 'text', control: 'options', states: true,
+            values: [option('underline', 'underline', 'Underline'), option('line-through', 'line-through', 'Strike through'), option('none', 'no-underline', 'No underline')],
+        },
+        { id: 'text-color', label: 'Text color', description: 'The color of the text, from the site\'s theme.', group: 'color', control: 'color', states: true, hex: 'text', values: colorValues('text', tokens, false, swatches) },
+        { id: 'background-color', label: 'Background color', description: 'The color behind the element, from the site\'s theme.', group: 'color', control: 'color', states: true, hex: 'bg', values: colorValues('bg', tokens, true, swatches) },
+        {
+            id: 'gradient-direction', label: 'Gradient', description: 'Makes the background a gradient that runs in this direction. Then choose the colors it goes through.', group: 'color', control: 'options',
+            values: [['to-t', 'Up'], ['to-tr', 'Up right'], ['to-r', 'Right'], ['to-br', 'Down right'], ['to-b', 'Down'], ['to-bl', 'Down left'], ['to-l', 'Left'], ['to-tl', 'Up left']].map(([v, label]) => option(v, `bg-linear-${v}`, label)),
+        },
+        { id: 'gradient-from', label: 'Gradient start', description: 'The color the gradient starts with.', group: 'color', control: 'color', hex: 'from', values: colorValues('from', tokens, true, swatches) },
+        { id: 'gradient-via', label: 'Gradient middle', description: 'A color the gradient goes through on the way (optional).', group: 'color', control: 'color', hex: 'via', values: colorValues('via', tokens, true, swatches) },
+        { id: 'gradient-to', label: 'Gradient end', description: 'The color the gradient ends with.', group: 'color', control: 'color', hex: 'to', values: colorValues('to', tokens, true, swatches) },
+        { id: 'border-color', label: 'Border color', description: 'The color of the border, from the site\'s theme.', group: 'color', control: 'color', states: true, hex: 'border', values: colorValues('border', tokens, true, swatches) },
+        ...borderWidthProperties(),
+        ...borderRadiusProperties(),
+        {
+            id: 'shadow', label: 'Shadow', description: 'The shadow the element casts.', group: 'effects', control: 'options', states: true,
+            values: [
+                option('none', 'shadow-none', 'None'), option('2xs', 'shadow-2xs', '2xs'), option('xs', 'shadow-xs', 'xs'), option('sm', 'shadow-sm', 'Small'), option('default', 'shadow', 'Default'),
+                option('md', 'shadow-md', 'Medium'), option('lg', 'shadow-lg', 'Large'), option('xl', 'shadow-xl', 'Extra large'), option('2xl', 'shadow-2xl', '2xl'),
+            ],
+        },
+        {
+            id: 'opacity', label: 'Opacity', description: 'How see-through the element is: 100% is solid, 0% is invisible.', group: 'effects', control: 'options', states: true,
+            values: [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100].map(n => option(String(n), `opacity-${n}`, `${n}%`, n === 0 ? 'invisible' : n === 100 ? 'solid' : `${n}% solid`)),
+        },
+        {
+            id: 'scale', label: 'Size change', description: 'Makes the element look bigger or smaller without moving the others (100% is as it is).', group: 'effects', control: 'options', states: true,
+            values: [50, 75, 90, 95, 100, 105, 110, 125, 150].map(n => option(String(n), `scale-${n}`, `${n}%`, n === 100 ? 'as it is' : `${n}% of its size`)),
+        },
+        {
+            id: 'translate-y', label: 'Move up or down', description: 'Moves the element up or down without moving the others (a "lift" on hover).', group: 'effects', control: 'options', states: true,
+            values: [['-4', 'Up a lot', '-1rem (-16px)'], ['-2', 'Up', '-0.5rem (-8px)'], ['-1', 'Up a little', '-0.25rem (-4px)'], ['0', 'Not moved', 'as it is'], ['1', 'Down a little', '0.25rem (4px)'], ['2', 'Down', '0.5rem (8px)'], ['4', 'Down a lot', '1rem (16px)']]
+                .map(([value, label, css]) => option(value, value.startsWith('-') ? `-translate-y-${value.slice(1)}` : `translate-y-${value}`, label, css)),
+        },
+        {
+            id: 'transition', label: 'Smooth change', description: 'What changes gradually instead of at once when the element goes from one state to another (hover, focus, pressed).', group: 'motion', control: 'options',
+            values: [
+                option('none', 'transition-none', 'Nothing: at once'), option('colors', 'transition-colors', 'Colors', 'text, background and border colors'), option('opacity', 'transition-opacity', 'Opacity'),
+                option('shadow', 'transition-shadow', 'Shadow'), option('transform', 'transition-transform', 'Movement and size', 'move, resize'), option('all', 'transition-all', 'Everything'),
+            ],
+        },
+        {
+            id: 'duration', label: 'Speed of the change', description: 'How long the gradual change takes.', group: 'motion', control: 'options',
+            values: [75, 100, 150, 200, 300, 500, 700, 1000].map(n => option(String(n), `duration-${n}`, `${n} ms`, n <= 150 ? 'quick' : n <= 300 ? 'comfortable' : 'slow')),
+        },
+        {
+            id: 'ease', label: 'Easing', description: 'How the change speeds up and slows down.', group: 'motion', control: 'options',
+            values: [option('linear', 'ease-linear', 'Steady'), option('in', 'ease-in', 'Starts slow'), option('out', 'ease-out', 'Ends slow'), option('in-out', 'ease-in-out', 'Slow at both ends')],
+        },
+        {
+            id: 'animation', label: 'Animation', description: 'A ready-made animation. It does not run for people who asked their system for less motion.', group: 'motion', control: 'options', variants: ['motion-safe'],
+            values: [
+                option('pulse', 'animate-pulse', 'Pulse', 'fades in and out, to say something is loading'), option('bounce', 'animate-bounce', 'Bounce', 'jumps up and down, to call for attention'),
+                option('spin', 'animate-spin', 'Spin', 'turns around, as a loader'), option('ping', 'animate-ping', 'Ping', 'a ring that grows and fades, as a notification'),
+                option('fade-in', 'animate-fade-in', 'Fade in', 'appears gradually when the page opens'), option('slide-up', 'animate-slide-up', 'Slide up', 'rises into place when the page opens'),
+                option('zoom-in', 'animate-zoom-in', 'Zoom in', 'grows into place when the page opens'),
+            ],
+        },
+        {
+            id: 'display', label: 'Display', description: 'How the element takes part in the layout; `none` hides it at that breakpoint.', group: 'layout', control: 'options',
+            values: [
+                option('block', 'block', 'Block', 'on its own line'), option('inline-block', 'inline-block', 'Inline block', 'in the line, with a size'), option('inline', 'inline', 'Inline', 'in the line of text'),
+                option('flex', 'flex', 'Flex', 'children in a row or column'), option('inline-flex', 'inline-flex', 'Inline flex'), option('grid', 'grid', 'Grid', 'children in a grid'),
+                option('none', 'hidden', 'None', 'hidden'),
+            ],
+        },
+        {
+            id: 'flex-direction', label: 'Direction', description: 'For a flex element: whether the children go in a row or a column.', group: 'layout', control: 'options',
+            values: [option('row', 'flex-row', 'Row'), option('col', 'flex-col', 'Column'), option('row-reverse', 'flex-row-reverse', 'Row, reversed'), option('col-reverse', 'flex-col-reverse', 'Column, reversed')],
+        },
+        {
+            id: 'align-items', label: 'Align items', description: 'For a flex or grid element: where the children sit across the direction.', group: 'layout', control: 'options',
+            values: [option('start', 'items-start', 'Start'), option('center', 'items-center', 'Center'), option('end', 'items-end', 'End'), option('stretch', 'items-stretch', 'Stretch'), option('baseline', 'items-baseline', 'Baseline')],
+        },
+        {
+            id: 'justify-content', label: 'Justify content', description: 'For a flex or grid element: how the children are spread along the direction.', group: 'layout', control: 'options',
+            values: [
+                option('start', 'justify-start', 'Start'), option('center', 'justify-center', 'Center'), option('end', 'justify-end', 'End'),
+                option('between', 'justify-between', 'Space between'), option('around', 'justify-around', 'Space around'), option('evenly', 'justify-evenly', 'Space evenly'),
+            ],
+        },
+        {
+            id: 'grid-columns', label: 'Columns', description: 'For a grid element: how many columns it has.', group: 'layout', control: 'options',
+            values: [1, 2, 3, 4, 5, 6].map(n => option(String(n), `grid-cols-${n}`, String(n))),
+        },
+        {
+            id: 'flex-wrap', label: 'Wrap', description: 'For a flex element: whether the children go to a new line when they do not fit.', group: 'layout', control: 'options',
+            values: [option('nowrap', 'flex-nowrap', 'No wrap'), option('wrap', 'flex-wrap', 'Wrap'), option('wrap-reverse', 'flex-wrap-reverse', 'Wrap, reversed')],
+        },
+    ];
+}
+/** Splits a className into its classes; a `:` inside `[…]` is part of a value (`bg-[url(http://x)]`), not a variant. */
+export function wrParseClassName(className) {
+    return className.split(/\s+/).filter(Boolean).map((raw) => {
+        const parts = [];
+        let depth = 0;
+        let start = 0;
+        for (let i = 0; i < raw.length; i++) {
+            const c = raw[i];
+            if (c === '[' || c === '(')
+                depth++;
+            else if (c === ']' || c === ')')
+                depth = Math.max(0, depth - 1);
+            else if (c === ':' && depth === 0) {
+                parts.push(raw.slice(start, i));
+                start = i + 1;
+            }
+        }
+        return { raw, variants: parts, utility: raw.slice(start) };
+    });
+}
+const BASE_BREAKPOINT = WR_BREAKPOINTS[0];
+const variantOf = (breakpoint) => (breakpoint.variant ? [breakpoint.variant] : []);
+const stateById = (id) => (id ? (WR_STATES.find(s => s.id === id) ?? null) : null);
+/** The variants a class of this property carries at a breakpoint and in a state: the screen first, then the state, then the property's own (`md:hover:bg-accent`, `motion-safe:animate-pulse`). */
+const variantsOf = (breakpoint, state, property) => [...variantOf(breakpoint), ...(state ? [state.variant] : []), ...(property.variants ?? [])];
+/**
+ * Where a class of a property holds, when it says it the way the table does: the breakpoint and the state, and the variants of the property itself last. Anything else (`dark:`, an order the
+ * table does not write) is not a class of the table: null.
+ */
+function contextOf(variants, property) {
+    const fixed = property.variants ?? [];
+    let rest = variants;
+    if (fixed.length > 0) {
+        if (rest.length < fixed.length || !fixed.every((v, i) => rest[rest.length - fixed.length + i] === v))
+            return null;
+        rest = rest.slice(0, rest.length - fixed.length);
+    }
+    let state = null;
+    if (property.states && rest.length > 0) {
+        const found = WR_STATES.find(st => st.variant === rest[rest.length - 1]);
+        if (found) {
+            state = found;
+            rest = rest.slice(0, -1);
+        }
+    }
+    const breakpoint = WR_BREAKPOINTS.find(b => sameVariants(rest, variantOf(b)));
+    return breakpoint ? { breakpoint, state } : null;
+}
+const sameVariants = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+/** The arbitrary value of a property (`w-[320px]`): outside the table, so it is read and replaced but never offered. */
+function isCustom(property, utility) {
+    return property.customPrefix !== undefined && new RegExp(`^-?${escapeRegExp(property.customPrefix)}-\\[.+\\]$`).test(utility);
+}
+/** A free number (`px-27`, `-mt-4`, `w-3/7`) as the class says it: its value; null when the class is not one of the property's. */
+function freeOf(property, utility) {
+    const free = property.free;
+    if (!free || !utility.startsWith(`${utility.startsWith('-') ? '-' : ''}${free.prefix}-`))
+        return null;
+    const negative = utility.startsWith('-');
+    return freeValue(free, `${negative ? '-' : ''}${utility.slice(free.prefix.length + (negative ? 2 : 1))}`);
+}
+const byId = (properties) => new Map(properties.map(p => [p.id, p]));
+const breakpointOf = (id) => WR_BREAKPOINTS.find(b => b.id === id);
+/** What a class says about one property: the value of the table, or `custom` for what is outside it. */
+function matchOf(property, utility) {
+    const known = property.values.find(v => v.class === utility);
+    if (known)
+        return { value: known.value, custom: false };
+    const free = freeOf(property, utility);
+    if (free)
+        return { value: free.value, custom: false };
+    if (property.hex && utility.startsWith(`${property.hex}-[`) && utility.endsWith(']') && HEX_COLOR.test(utility.slice(property.hex.length + 2, -1)))
+        return { value: utility.slice(property.hex.length + 2, -1).toLowerCase(), custom: false };
+    if (isCustom(property, utility))
+        return { value: null, custom: true };
+    return null;
+}
+/**
+ * Everything a className says about the properties of the table, at the breakpoints it names. Several classes for one property: the last one is what is read. `state`: what it says for that
+ * state (`hover:bg-accent`); without it, only what holds always (the classes of a state are not mixed in).
+ */
+export function wrStyleRead(className, options = {}, state) {
+    const properties = wrStyleProperties(options);
+    const entries = new Map();
+    for (const token of wrParseClassName(className)) {
+        for (const property of properties) {
+            const match = matchOf(property, token.utility);
+            if (!match)
+                continue;
+            const context = contextOf(token.variants, property);
+            if (context && (context.state?.id ?? undefined) === state) {
+                entries.set(`${property.id}@${context.breakpoint.id}`, {
+                    property: property.id, breakpoint: context.breakpoint.id, value: match.value, class: token.raw, ...(match.custom ? { custom: true } : {}), ...(context.state ? { state: context.state.id } : {}),
+                });
+            }
+            break;
+        }
+    }
+    return [...entries.values()];
+}
+/** The classes the table does not read: `dark:` and other variants (what the table reads of `hover:`, `focus:` and `active:` is the state of a property that can have one), `!important`, what is not about a property of the table, the project's own classes. They are never touched. */
+export function wrStyleUnmanaged(className, options = {}) {
+    const properties = wrStyleProperties(options);
+    return wrParseClassName(className)
+        .filter(token => !properties.some(p => matchOf(p, token.utility) !== null && contextOf(token.variants, p) !== null))
+        .map(token => token.raw);
+}
+/** What a property is at a breakpoint once the narrower screens are counted: its own value, or the nearest smaller breakpoint's. */
+export function wrStyleEffective(entries, property, breakpoint) {
+    for (const id of wrStyleCascade(breakpoint)) {
+        const entry = entries.find(e => e.property === property && e.breakpoint === id);
+        if (entry)
+            return { value: entry.value, from: entry.breakpoint, ...(entry.custom ? { custom: true } : {}) };
+    }
+    return null;
+}
+export class WrStyleError extends Error {
+    constructor(code, message) {
+        super(message);
+        this.code = code;
+    }
+}
+/** The state a change is for: none (always), or a state the property can have. */
+function checkedState(id, property, properties) {
+    if (id === undefined || id === null)
+        return null;
+    const state = stateById(id);
+    if (!state)
+        throw new WrStyleError('unknown-state', `no state "${id}" (there is: ${WR_STATE_IDS.join(', ')})`);
+    if (!property.states)
+        throw new WrStyleError('invalid-state', `${property.id} cannot change on ${state.label.toLowerCase()} (the ones that can: ${list(properties.filter(p => p.states).map(p => p.id))})`);
+    return state;
+}
+const list = (items, max = 40) => (items.length > max ? `${items.slice(0, max).join(', ')}…` : items.join(', '));
+/** The className once every change is made, in order. A value that is not the property's, a property or a breakpoint that does not exist: a `WrStyleError` that says what there is. */
+export function wrStyleApply(className, changes, options = {}) {
+    const properties = wrStyleProperties(options);
+    const lookup = byId(properties);
+    let tokens = wrParseClassName(className);
+    for (const change of changes) {
+        const property = lookup.get(change.property);
+        if (!property)
+            throw new WrStyleError('unknown-property', `no style property "${change.property}" (there is: ${list(properties.map(p => p.id), 60)})`);
+        const breakpoint = breakpointOf(change.breakpoint);
+        if (!breakpoint)
+            throw new WrStyleError('unknown-breakpoint', `no breakpoint "${change.breakpoint}" (there is: ${WR_BREAKPOINT_IDS.join(', ')})`);
+        const state = checkedState(change.state, property, properties);
+        const wanted = change.value === null ? null : wrStyleParseValue(property, change.value);
+        if (change.value !== null && !wanted) {
+            throw new WrStyleError('invalid-value', `${property.id} cannot be "${change.value}" (it can be: ${list(property.values.map(v => v.value))}${property.free ? `, or ${wrStyleFreeHint(property.free)}` : ''}${property.hex ? ', or a color like #22c55e' : ''})`);
+        }
+        const variants = variantsOf(breakpoint, state, property);
+        // What this replaces: the property's own classes at this breakpoint (the table's, and the values outside it), and the narrower properties it includes
+        const replaced = [property, ...(change.value === null ? [] : includedOf(property, lookup))];
+        const written = wanted ? { raw: [...variants, wanted.class].join(':'), variants, utility: wanted.class } : null;
+        tokens = place(tokens, property, replaced, variants, written);
+    }
+    return tokens.map(t => t.raw).join(' ');
+}
+/** The properties a property replaces when it is set (padding: padding-x, padding-top…), all the way down. */
+function includedOf(property, lookup) {
+    const found = new Set();
+    const visit = (p) => (p.includes ?? []).forEach((id) => {
+        const inner = lookup.get(id);
+        if (inner && !found.has(inner)) {
+            found.add(inner);
+            visit(inner);
+        }
+    });
+    visit(property);
+    return [...found];
+}
+/**
+ * Puts `written` (or nothing) where the property's class was at these variants, taking out what it replaces. Where it goes: where the property's own class was, or else where the first
+ * class it replaces was, or else last. The ONE step that writing a value and copying a class both take.
+ */
+function place(tokens, property, replaced, variants, written) {
+    const isReplaced = (token) => sameVariants(token.variants, variants) && replaced.some(p => matchOf(p, token.utility) !== null);
+    const own = tokens.findIndex(token => sameVariants(token.variants, variants) && matchOf(property, token.utility) !== null);
+    const spot = own !== -1 ? own : tokens.findIndex(isReplaced);
+    return spot === -1
+        ? [...tokens, ...(written ? [written] : [])]
+        : tokens.flatMap((token, index) => (index === spot ? (written ? [written] : []) : isReplaced(token) ? [] : [token]));
+}
+function managedClasses(tokens, properties) {
+    const managed = new Map();
+    for (const token of tokens) {
+        for (const property of properties) {
+            if (matchOf(property, token.utility) === null)
+                continue;
+            const context = contextOf(token.variants, property);
+            if (context)
+                managed.set(token, { token, property, breakpoint: context.breakpoint, state: context.state });
+            break;
+        }
+    }
+    return managed;
+}
+/**
+ * The classes of one screen put on another (`to` a breakpoint), or on every screen at once (`to: 'all'`). The classes are copied as they are written, so what the table does not offer
+ * (`w-[320px]`) goes too; only the style classes move: hover:, dark: and the project's own stay where they are.
+ *  - to a breakpoint: for each property `from` says, `to` says the same; the same properties are replaced (a wider one takes out the narrower it includes: p replaces px), the rest of
+ *    `to` stays. What `from` inherits from narrower screens is not copied: it is not written there.
+ *  - to 'all': one clean list. The look `from` has once the narrower screens are counted becomes what every screen has; every class of another breakpoint is taken away. From "All screens"
+ *    that is only taking the overrides away.
+ * `only`: just these properties (and the ones they include or are included by: padding and padding-x say the same thing); every other class stays as it is. `state`: the classes of that state
+ * (hover…) and no others; without it, the ones that hold always. Pure; an unknown breakpoint or state is a `WrStyleError`.
+ */
+export function wrStyleCopyTo(className, from, to, options = {}, only, state) {
+    const source = breakpointOf(from);
+    const target = to === 'all' ? undefined : breakpointOf(to);
+    if (!source)
+        throw new WrStyleError('unknown-breakpoint', `no breakpoint "${from}" (there is: ${WR_BREAKPOINT_IDS.join(', ')})`);
+    if (to !== 'all' && !target)
+        throw new WrStyleError('unknown-breakpoint', `no breakpoint "${to}" (there is: all, ${WR_BREAKPOINT_IDS.join(', ')})`);
+    const properties = wrStyleProperties(options);
+    const lookup = byId(properties);
+    let tokens = wrParseClassName(className);
+    const managed = managedClasses(tokens, properties);
+    if (state !== undefined && !stateById(state))
+        throw new WrStyleError('unknown-state', `no state "${state}" (there is: ${WR_STATE_IDS.join(', ')})`);
+    const scope = only ? relatedProperties(only, properties, lookup) : null;
+    const inScope = (m) => (m.state?.id ?? undefined) === state && (!scope || scope.has(m.property.id));
+    if (target) {
+        if (target.id === source.id)
+            return className;
+        // The last class of a property at the source is what it says (as when reading)
+        const says = new Map();
+        for (const m of managed.values())
+            if (m.breakpoint.id === source.id && inScope(m))
+                says.set(m.property.id, m);
+        for (const { token, property, state: held } of says.values()) {
+            const variants = variantsOf(target, held, property);
+            tokens = place(tokens, property, [property, ...includedOf(property, lookup)], variants, { raw: [...variants, token.utility].join(':'), variants, utility: token.utility });
+        }
+        return tokens.map(t => t.raw).join(' ');
+    }
+    // To every screen: what each property is where `from` stands (the nearest breakpoint that says it, narrower first)…
+    const cascade = wrStyleCascade(source.id);
+    const effective = new Map();
+    for (const m of managed.values()) {
+        const rank = cascade.indexOf(m.breakpoint.id);
+        if (rank === -1 || !inScope(m))
+            continue;
+        const have = effective.get(m.property.id);
+        // Smaller rank = closer to `from`; at the same breakpoint the last class is what is read
+        if (!have || rank < have.rank || (rank === have.rank && tokens.indexOf(m.token) > tokens.indexOf(have.m.token)))
+            effective.set(m.property.id, { m, rank });
+    }
+    // …except a narrower property a wider one, said closer to `from`, has taken over (md:p-8 over px-4: at md the padding is 8 all round)
+    for (const [id, mine] of effective) {
+        const covered = [...effective].some(([otherId, other]) => otherId !== id && other.rank < mine.rank && includedOf(other.m.property, lookup).some(p => p.id === id));
+        if (covered)
+            effective.delete(id);
+    }
+    const kept = new Set([...effective.values()].map(e => e.m.token));
+    return tokens.flatMap((token) => {
+        const m = managed.get(token);
+        if (!m || !inScope(m))
+            return [token.raw];
+        // What is kept goes to the base: no screen, the state and the property's own variants stay
+        return kept.has(token) ? [[...variantsOf(BASE_BREAKPOINT, m.state, m.property), token.utility].join(':')] : [];
+    }).join(' ');
+}
+/** The properties that say the same thing as these: themselves, what they include (padding: padding-x, padding-top…), and what includes them. */
+function relatedProperties(ids, properties, lookup) {
+    const related = new Set();
+    for (const id of ids) {
+        const property = lookup.get(id);
+        if (!property)
+            continue;
+        related.add(id);
+        includedOf(property, lookup).forEach(p => related.add(p.id));
+        for (const other of properties)
+            if (includedOf(other, lookup).some(p => p.id === id))
+                related.add(other.id);
+    }
+    return related;
+}
+/**
+ * Makes changes hold on every screen: each is made at the breakpoint it names, and then what the element looks like there, for those properties only, becomes what every screen has (the
+ * overrides of the other screens for them are taken away). A change that takes a value away (`null`) takes it away from every screen. What the changes do not touch keeps its overrides.
+ * This is what "All screens" does in the editor: you set it where you are looking, and it holds everywhere. Pure.
+ */
+export function wrStyleApplyEverywhere(className, changes, options = {}) {
+    let next = wrStyleApply(className, changes, options);
+    const removed = changes.filter(c => c.value === null);
+    if (removed.length > 0) {
+        next = wrStyleApply(next, removed.flatMap(c => WR_BREAKPOINT_IDS.map(breakpoint => ({ property: c.property, breakpoint, value: null, ...(c.state ? { state: c.state } : {}) }))), options);
+    }
+    // What was made is held for each screen and state it was made at
+    const held = new Map();
+    for (const c of changes) {
+        if (c.value === null)
+            continue;
+        const key = `${c.breakpoint}|${c.state ?? ''}`;
+        const entry = held.get(key) ?? { breakpoint: c.breakpoint, ...(c.state ? { state: c.state } : {}), ids: [] };
+        entry.ids.push(c.property);
+        held.set(key, entry);
+    }
+    for (const { breakpoint, state, ids } of held.values())
+        next = wrStyleCopyTo(next, breakpoint, 'all', options, ids, state);
+    return next;
+}
+// ── Layering classes ─────────────────────────────────────────────────────────
+/**
+ * Two groups of classes put together, `over` winning where both say something: what an element looks like when a shared style (`under`) is written out on it and the element has classes
+ * of its own (`over`). A class of `under` is left out when `over` says the same property at the same breakpoint, or a wider property that includes it there (p over px); everything else
+ * of `under` stays, then all of `over`. Pure.
+ */
+export function wrStyleLayer(under, over, options = {}) {
+    const properties = wrStyleProperties(options);
+    const lookup = byId(properties);
+    const overTokens = wrParseClassName(over);
+    const overSays = new Set();
+    for (const m of managedClasses(overTokens, properties).values()) {
+        for (const property of [m.property, ...includedOf(m.property, lookup)])
+            overSays.add(`${property.id}@${m.breakpoint.id}@${m.state?.id ?? ''}`);
+    }
+    const raws = new Set(overTokens.map(t => t.raw));
+    const underTokens = wrParseClassName(under);
+    const underManaged = managedClasses(underTokens, properties);
+    const kept = underTokens.filter((token) => {
+        const m = underManaged.get(token);
+        return !raws.has(token.raw) && !(m && overSays.has(`${m.property.id}@${m.breakpoint.id}@${m.state?.id ?? ''}`));
+    });
+    return [...kept, ...overTokens].map(t => t.raw).join(' ');
+}
+export function wrStyleDescribe(entries, options = {}) {
+    const lookup = byId(wrStyleProperties(options));
+    return entries.flatMap((entry) => {
+        const property = lookup.get(entry.property);
+        const breakpoint = breakpointOf(entry.breakpoint);
+        if (!property || !breakpoint)
+            return [];
+        const known = entry.value === null ? undefined : wrStyleParseValue(property, entry.value);
+        const valueLabel = known?.label ?? `custom (${entry.class.split(':').pop()})`;
+        const css = known?.css;
+        const state = stateById(entry.state);
+        return [{
+                property: property.id, propertyLabel: property.label, breakpoint: breakpoint.id, breakpointLabel: breakpoint.label, value: entry.value, valueLabel, ...(css ? { css } : {}),
+                class: entry.class, ...(entry.custom ? { custom: true } : {}), ...(state ? { state: state.id, stateLabel: state.label } : {}),
+                sentence: `${property.label} is ${valueLabel}${css && css !== valueLabel ? ` (${css})` : ''}${state ? `, on ${state.label.toLowerCase()}` : ''}${breakpoint.id === 'base' ? '' : `, ${breakpoint.label.toLowerCase()}`}.`,
+            }];
+    });
+}
+const sidesCompound = (kind, label, description, group) => {
+    const top = `${kind}-top`, right = `${kind}-right`, bottom = `${kind}-bottom`, left = `${kind}-left`;
+    return {
+        id: kind, label, description, group,
+        modes: [
+            { id: 'all', label: 'All', description: 'One value for the four sides.', parts: [{ property: kind, label: 'All sides', covers: [top, right, bottom, left] }] },
+            {
+                id: 'axis', label: 'Pairs', description: 'One value for top and bottom, one for left and right.',
+                parts: [{ property: `${kind}-y`, label: 'Top and bottom', covers: [top, bottom] }, { property: `${kind}-x`, label: 'Left and right', covers: [left, right] }],
+            },
+            {
+                id: 'sides', label: 'Each', description: 'A value for each side.',
+                parts: [{ property: top, label: 'Top', covers: [top] }, { property: right, label: 'Right', covers: [right] }, { property: bottom, label: 'Bottom', covers: [bottom] }, { property: left, label: 'Left', covers: [left] }],
+            },
+        ],
+    };
+};
+export const WR_STYLE_COMPOUNDS = [
+    sidesCompound('padding', 'Padding', 'Space inside the element, between its edge and its content.', 'spacing'),
+    sidesCompound('margin', 'Margin', 'Space outside the element, between it and its neighbours.', 'spacing'),
+    {
+        id: 'gap', label: 'Gap', description: 'Space between the children of a flex or grid element.', group: 'spacing',
+        modes: [
+            { id: 'all', label: 'All', description: 'One value both ways.', parts: [{ property: 'gap', label: 'Both ways', covers: ['gap-x', 'gap-y'] }] },
+            { id: 'axis', label: 'Each', description: 'A value for the columns and one for the rows.', parts: [{ property: 'gap-x', label: 'Columns', covers: ['gap-x'] }, { property: 'gap-y', label: 'Rows', covers: ['gap-y'] }] },
+        ],
+    },
+    sidesCompound('border-width', 'Border width', 'How thick the border is, all round, top and bottom against left and right, or on each side. It needs a color to be seen.', 'border'),
+    {
+        id: 'border-radius', label: 'Corners', description: 'How round the corners are: all together, or each corner by itself.', group: 'border',
+        modes: [
+            { id: 'all', label: 'All', description: 'One value for the four corners.', parts: [{ property: 'border-radius', label: 'All corners', covers: ['border-radius-tl', 'border-radius-tr', 'border-radius-bl', 'border-radius-br'] }] },
+            {
+                id: 'sides', label: 'Each', description: 'A value for each corner.',
+                parts: [
+                    { property: 'border-radius-tl', label: 'Top left', covers: ['border-radius-tl'] }, { property: 'border-radius-tr', label: 'Top right', covers: ['border-radius-tr'] },
+                    { property: 'border-radius-bl', label: 'Bottom left', covers: ['border-radius-bl'] }, { property: 'border-radius-br', label: 'Bottom right', covers: ['border-radius-br'] },
+                ],
+            },
+        ],
+    },
+];
+const ownAt = (entries, property, breakpoint) => entries.find(e => e.property === property && e.breakpoint === breakpoint);
+/** The mode that shows what an element has at a breakpoint: the finest one with something set in it (the panel opens there). */
+export function wrStyleCompoundMode(compound, entries, breakpoint) {
+    for (const mode of [...compound.modes].reverse()) {
+        if (mode.parts.some(part => ownAt(entries, part.property, breakpoint)))
+            return mode.id;
+    }
+    return compound.modes[0].id;
+}
+/**
+ * What a part of a multi-side model comes to at a breakpoint once everything that says something about it is counted: its own value, the coarser part that covers it (`padding`
+ * for `padding-top`), and the narrower screens (mobile first). So in "each side" mode a side that has no class of its own shows what the whole says.
+ */
+export function wrStyleCompoundValue(compound, entries, breakpoint, part) {
+    const parts = compound.modes.flatMap(m => m.parts);
+    const own = ownAt(entries, part.property, breakpoint);
+    for (const bp of wrStyleCascade(breakpoint)) {
+        const values = new Set();
+        let said = false;
+        for (const slot of part.covers) {
+            const says = parts.filter(p => p.covers.includes(slot) && ownAt(entries, p.property, bp)).sort((a, b) => a.covers.length - b.covers.length)[0];
+            if (says)
+                said = true;
+            values.add(says ? ownAt(entries, says.property, bp).value : null);
+        }
+        if (said)
+            return { value: values.size === 1 ? [...values][0] : null, own: bp === breakpoint && own !== undefined, from: bp, mixed: values.size > 1 };
+    }
+    return { value: null, own: false, from: breakpoint, mixed: false };
+}
+/**
+ * What changing the mode of a multi-side property asks for, so that the element looks the same: going to a finer mode copies the value to the parts (and takes the
+ * coarser ones away); going to a coarser one needs the parts it joins to agree (to be the same value, or all none), and says why when they do not. A value outside the table
+ * (`px-[3px]`) cannot be copied: it is said, not lost.
+ */
+export function wrStyleCompoundSwitch(compound, entries, breakpoint, to) {
+    const target = compound.modes.find(m => m.id === to);
+    if (!target)
+        return { ok: false, reason: `no mode "${to}"` };
+    // Already there: nothing to move
+    if (wrStyleCompoundMode(compound, entries, breakpoint) === to)
+        return { ok: true, changes: [] };
+    const slots = compound.modes[compound.modes.length - 1].parts.map(p => p.property);
+    const parts = compound.modes.flatMap(m => m.parts);
+    const used = parts.filter(p => ownAt(entries, p.property, breakpoint));
+    if (used.some(p => ownAt(entries, p.property, breakpoint)?.value === null))
+        return { ok: false, reason: 'a value outside the options (written by hand in the code) cannot be moved to another mode' };
+    // What each finest slot comes to: the most specific part that says something about it (as the CSS cascade has it)
+    const slotValue = new Map();
+    for (const slot of slots) {
+        const says = used.filter(p => p.covers.includes(slot)).sort((a, b) => a.covers.length - b.covers.length)[0];
+        slotValue.set(slot, says ? ownAt(entries, says.property, breakpoint).value : null);
+    }
+    const changes = [];
+    for (const part of used)
+        if (!target.parts.some(t => t.property === part.property))
+            changes.push({ property: part.property, breakpoint, value: null });
+    for (const part of target.parts) {
+        const values = new Set(part.covers.map(slot => slotValue.get(slot) ?? null));
+        if (values.size > 1)
+            return { ok: false, reason: `${part.label.toLowerCase()} are not the same value` };
+        const value = [...values][0] ?? null;
+        const now = ownAt(entries, part.property, breakpoint)?.value ?? null;
+        if (value !== now)
+            changes.push({ property: part.property, breakpoint, value });
+    }
+    return { ok: true, changes };
+}
+export function wrStyleCatalog(options = {}) {
+    const colorTokens = [...(options.colorTokens ?? WR_DEFAULT_COLOR_TOKENS)];
+    const colorSwatches = options.colorSwatches;
+    return {
+        breakpoints: WR_BREAKPOINTS.map(b => ({ id: b.id, label: b.label, description: b.description, minWidth: b.minWidth })),
+        note: 'Mobile first: a value set at a breakpoint holds from that width up, until a wider breakpoint sets another. "base" is every screen. A property marked `states` can also be set for hover, focus or pressed.',
+        groups: WR_STYLE_GROUPS,
+        states: WR_STATES.map(({ id, label, description }) => ({ id, label, description })),
+        colorTokens,
+        properties: wrStyleProperties({ colorTokens, colorSwatches }).map(p => ({
+            id: p.id, label: p.label, description: p.description, group: p.group, control: p.control,
+            ...(p.includes ? { includes: [...p.includes], includesNote: 'Setting it replaces these at the same breakpoint.' } : {}),
+            ...(p.free ? { free: { ...p.free, hint: wrStyleFreeHint(p.free) } } : {}),
+            ...(p.compound ? { compound: p.compound } : {}),
+            ...(p.states ? { states: true } : {}),
+            ...(p.hex ? { hex: true } : {}),
+            ...(p.shortcuts ? { shortcuts: [...p.shortcuts] } : {}),
+            values: p.values.map(v => ({ value: v.value, label: v.label, ...(v.css ? { css: v.css } : {}), class: v.class, ...(v.swatch ? { swatch: v.swatch } : {}) })),
+        })),
+        compounds: [...WR_STYLE_COMPOUNDS],
+    };
+}
+// ── What a panel offers ──────────────────────────────────────────────────────
+/**
+ * What the panel offers: the minimum that is needed, and nothing else. Space inside and outside, the width and the height, the border and the shadow, the text (its size and weight, and the
+ * color), the background. Layout and alignment (flex, justify…) are not offered here (alignment has its own grid): they are the controls that confuse (flex and alignments often do not do what is expected) and the ones that make a site fragile. This is
+ * ONLY the panel's choice: the catalog, the operations, the API and the MCP take every property, so an AI or a tool can still set any of them, and adding one back to the
+ * panel is a word in this list.
+ */
+const OFFERED_ITEMS = new Set([
+    'padding', 'margin', 'gap', 'width', 'height', 'max-width', 'border-width', 'border-color', 'border-radius', 'shadow', 'font-size', 'font-weight', 'text-align', 'text-color', 'background-color',
+    'display', 'flex-direction', 'flex-wrap', 'align-items', 'justify-content',
+    'opacity', 'scale', 'translate-y', 'text-decoration', 'transition', 'duration', 'ease', 'animation',
+    'gradient-direction', 'gradient-from', 'gradient-via', 'gradient-to',
+]);
+/** The text properties: a text written in the editor (WrText) has its own toolbar (and its content is HTML in the JSON, which wins over a class on the element; but the alignment, see `wrStyleOffered`), and an image or a video has no text. */
+const TEXT_ITEMS = new Set(['font-size', 'font-weight', 'text-align', 'text-color', 'text-decoration']);
+/** The properties of a box that lays out what it holds: only a box (a section) has them. */
+const LAYOUT_ITEMS = new Set(['gap', 'display', 'flex-direction', 'flex-wrap', 'align-items', 'justify-content']);
+const NO_TEXT_KINDS = new Set(['text', 'image', 'video', 'iframe']);
+/** Whether the panel offers a control for this kind of element (`text`, `section`, `image`…). `item` is a property id, or a model's (`padding`). */
+export function wrStyleOffered(item, kind) {
+    if (!OFFERED_ITEMS.has(item))
+        return false;
+    if (LAYOUT_ITEMS.has(item) && kind !== undefined && kind !== 'section')
+        return false;
+    // The alignment of a text is the one thing of its own the panel offers: the paragraphs hold none, so they follow the element's, at the breakpoint the panel is on
+    if (kind === 'text' && item === 'text-align')
+        return true;
+    return !(kind && NO_TEXT_KINDS.has(kind) && TEXT_ITEMS.has(item));
+}
+const WIDTH_HANDLE = { property: 'width', edge: 'right', label: 'Width' };
+const HEIGHT_HANDLE = { property: 'height', edge: 'bottom', label: 'Height' };
+/** Which handles each kind of element has: one table, so what can be dragged is said for each component and nowhere else. */
+const HANDLES = {
+    section: [WIDTH_HANDLE, HEIGHT_HANDLE],
+    image: [WIDTH_HANDLE, HEIGHT_HANDLE],
+    video: [WIDTH_HANDLE, HEIGHT_HANDLE],
+    iframe: [WIDTH_HANDLE, HEIGHT_HANDLE],
+    text: [WIDTH_HANDLE],
+    link: [WIDTH_HANDLE],
+    button: [WIDTH_HANDLE],
+};
+export const wrStyleHandles = (kind) => (kind ? HANDLES[kind] ?? [] : []);
+const QUICK = {
+    section: ['width', 'height', 'padding', 'margin', 'gap', 'background-color', 'align', 'duplicate', 'delete'],
+    image: ['width', 'height', 'margin', 'duplicate', 'delete'],
+    video: ['width', 'height', 'margin', 'duplicate', 'delete'],
+    iframe: ['width', 'height', 'margin', 'duplicate', 'delete'],
+    text: ['width', 'margin', 'duplicate', 'delete'],
+    link: ['width', 'padding', 'background-color', 'duplicate', 'delete'],
+    button: ['width', 'padding', 'background-color', 'duplicate', 'delete'],
+};
+export const wrStyleQuick = (kind) => (kind ? QUICK[kind] ?? ['duplicate', 'delete'] : []);
+const SIDE_LABEL = { top: 'top', right: 'right', bottom: 'bottom', left: 'left' };
+const spaceHandles = (kind) => ['top', 'right', 'bottom', 'left'].map(side => ({
+    property: `${kind}-${side}`, kind, side, all: kind, label: `${kind === 'padding' ? 'Padding' : 'Margin'} (${SIDE_LABEL[side]})`,
+}));
+/** Which sides each kind of element can have dragged on the page: a box has room inside and outside, what is not a box (an image) only outside. */
+const SPACE_HANDLES = {
+    section: [...spaceHandles('padding'), ...spaceHandles('margin')],
+    link: [...spaceHandles('padding'), ...spaceHandles('margin')],
+    button: [...spaceHandles('padding'), ...spaceHandles('margin')],
+    image: spaceHandles('margin'), video: spaceHandles('margin'), iframe: spaceHandles('margin'), text: spaceHandles('margin'),
+};
+export const wrStyleSpaceHandles = (kind) => (kind ? SPACE_HANDLES[kind] ?? [] : []);
+/**
+ * What a padding or a margin dragged to `px` comes to: a whole step of the spacing scale (a quarter of a rem, 4px: nothing finer is asked of a hand), never negative (a drag does not make a
+ * negative margin). `property` is the side (`padding-top`) or all of them (`padding`). null for a property that is not one of these. Pure, like `wrStyleDrag`.
+ */
+export function wrStyleSpaceDrag(property, px, rem = 16) {
+    const spec = wrStyleProperties().find(p => p.id === property);
+    if (!spec || !/^(padding|margin)(-(top|right|bottom|left))?$/.test(property) || !spec.free)
+        return null;
+    const step = Math.max(0, Math.round(px / (rem / 4)));
+    const parsed = wrStyleParseValue(spec, String(step));
+    const css = wrStylePreviewCss(property, String(step));
+    if (!parsed || !css)
+        return null;
+    return { value: parsed.value, class: parsed.class, label: `${parsed.class} · ${Math.round(step * (rem / 4))}px`, css: Object.values(css)[0], px: step * (rem / 4) };
+}
+/** The smallest step number (`w-N`) that is not under `floor` px: the number a field takes as its minimum. 0 when there is no floor. */
+export const wrStyleFloorStep = (floor, rem = 16) => floor && floor > 0 ? Math.ceil(floor / (rem / 4)) : 0;
+/** How near to a fraction of the parent (as a part of the parent) a width has to be to snap to it. */
+const SNAP_TO_FRACTION = 0.02;
+const FRACTION_VALUES = [...FRACTIONS.map(f => ({ value: f, ratio: Number(f.split('/')[0]) / Number(f.split('/')[1]) })), { value: 'full', ratio: 1 }];
+/**
+ * What a size dragged to `px` comes to: a whole step of the spacing scale (a quarter of a rem, 4px: nothing finer is asked of a hand), or, for a width, a fraction of the parent when
+ * it comes close to one. null for a property that is not a size. Pure, so the same answer is given for the person dragging and for a test.
+ */
+export function wrStyleDrag(property, px, context = {}) {
+    const spec = wrStyleProperties().find(p => p.id === property);
+    if (!spec?.free || !Number.isFinite(px))
+        return null;
+    const unit = (context.rem ?? 16) / 4;
+    const parent = context.parent ?? 0;
+    const floor = context.floor ?? 0;
+    const near = property === 'width' && parent > 0 && context.fractions !== false
+        ? FRACTION_VALUES.map(f => ({ ...f, distance: Math.abs(px / parent - f.ratio) })).filter(f => f.distance <= SNAP_TO_FRACTION && f.ratio * parent >= floor).sort((a, b) => a.distance - b.distance)[0]
+        : undefined;
+    const step = Math.min(spec.free.max, Math.max(1, wrStyleFloorStep(floor, context.rem), Math.round(px / unit)));
+    const value = near ? near.value : String(step);
+    const known = wrStyleParseValue(spec, value);
+    if (!known)
+        return null;
+    const shown = near ? Math.round(near.ratio * parent) : step * unit;
+    return { value, class: known.class, label: `${known.class} · ${near ? `${Math.round(near.ratio * 10000) / 100}% · ` : ''}${shown}px`, css: near ? `${Math.round(near.ratio * 10000) / 100}%` : `${step / 4}rem`, px: shown };
+}
+export const WR_STYLE_ALIGN_SIDES = ['start', 'center', 'end'];
+/** The kinds of element whose children can be aligned like this: the boxes (a text, a button, an image have no children to place). */
+export const wrStyleCanAlign = (kind) => kind === 'section';
+const effectiveOf = (entries, property, breakpoint) => {
+    for (const id of wrStyleCascade(breakpoint)) {
+        const entry = ownAt(entries, property, id);
+        if (entry)
+            return entry.value;
+    }
+    return null;
+};
+/**
+ * How the box lays out its children at a breakpoint, for aligning them: a plain box (it becomes a column of flex when it is aligned: its children stack as they did), a flex row, a
+ * flex column; or why it cannot be aligned this way (a grid places by cells, a reversed direction swaps the sides, a hidden box has nothing to align).
+ */
+function layoutOf(entries, breakpoint) {
+    const display = effectiveOf(entries, 'display', breakpoint);
+    const direction = effectiveOf(entries, 'flex-direction', breakpoint);
+    if (display === 'grid')
+        return { reason: 'a grid places its children by cells, not by alignment' };
+    if (display === 'none')
+        return { reason: 'it is hidden at this width' };
+    if (display === 'flex' || display === 'inline-flex') {
+        if (direction === 'row-reverse' || direction === 'col-reverse')
+            return { reason: 'its direction is reversed, which swaps the sides' };
+        return { kind: direction === 'col' ? 'col' : 'row' };
+    }
+    return { kind: 'block' };
+}
+const sideOf = (value) => (value === 'start' || value === 'center' || value === 'end' ? value : null);
+/** Where the children sit now (the cell of the grid that is on), or why this box cannot be aligned. */
+export function wrStyleAlignRead(entries, breakpoint) {
+    const layout = layoutOf(entries, breakpoint);
+    if ('reason' in layout)
+        return { ok: false, reason: layout.reason };
+    const items = sideOf(effectiveOf(entries, 'align-items', breakpoint));
+    const justify = sideOf(effectiveOf(entries, 'justify-content', breakpoint));
+    const height = effectiveOf(entries, 'height', breakpoint);
+    const needsHeight = height === null || ['auto', 'fit', 'min', 'max'].includes(height);
+    if (layout.kind === 'block')
+        return { ok: true, horizontal: null, vertical: null, needsHeight };
+    return layout.kind === 'row' ? { ok: true, horizontal: justify, vertical: items, needsHeight } : { ok: true, horizontal: items, vertical: justify, needsHeight };
+}
+/**
+ * What to write to put the children at a place of the grid (horizontal × vertical), ALL at once: the layout that makes it work (a plain box becomes a flex column: its
+ * children stack as before) and both alignments, whichever axis each is on. Written separately these pieces do nothing (`items-center` on a block box does not move anything), which
+ * is why they are one change.
+ */
+export function wrStyleAlignSet(entries, breakpoint, horizontal, vertical) {
+    const layout = layoutOf(entries, breakpoint);
+    if ('reason' in layout)
+        return { ok: false, reason: layout.reason };
+    const change = (property, value) => ({ property, breakpoint, value });
+    const [items, justify] = layout.kind === 'row' ? [vertical, horizontal] : [horizontal, vertical];
+    return {
+        ok: true,
+        changes: [...(layout.kind === 'block' ? [change('display', 'flex'), change('flex-direction', 'col')] : []), change('align-items', items), change('justify-content', justify)],
+    };
+}
+/** What to write to take the alignment away at a breakpoint (the box stays as it is laid out). */
+export const wrStyleAlignClear = (breakpoint) => [{ property: 'align-items', breakpoint, value: null }, { property: 'justify-content', breakpoint, value: null }];
+const layoutRecipe = (...entries) => entries.map(([property, breakpoint, value]) => ({ property, breakpoint, value }));
+/** The layouts, in the order they are offered: the one table that the panel, the quick menu, the API and the tools read. */
+export const WR_STYLE_LAYOUTS = [
+    { id: 'block', label: 'Plain', description: 'Children one under the other, as they come.', recipe: [], gap: null },
+    { id: 'stack', label: 'Stack', description: 'Children in a column, with a gap.', recipe: layoutRecipe(['display', 'base', 'flex'], ['flex-direction', 'base', 'col']), gap: '4' },
+    { id: 'row', label: 'Row', description: 'Children side by side from tablet up, one under the other on a phone.', recipe: layoutRecipe(['display', 'base', 'flex'], ['flex-direction', 'base', 'col'], ['flex-direction', 'md', 'row']), gap: '4' },
+    { id: 'columns-2', label: '2 columns', description: 'Two columns from tablet up, one on a phone.', recipe: layoutRecipe(['display', 'base', 'grid'], ['grid-columns', 'base', '1'], ['grid-columns', 'md', '2']), gap: '6' },
+    { id: 'columns-3', label: '3 columns', description: 'Three columns on desktop, two on a tablet, one on a phone.', recipe: layoutRecipe(['display', 'base', 'grid'], ['grid-columns', 'base', '1'], ['grid-columns', 'md', '2'], ['grid-columns', 'lg', '3']), gap: '6' },
+    { id: 'grid', label: 'Grid', description: 'Four columns on desktop, two on a tablet and a phone.', recipe: layoutRecipe(['display', 'base', 'grid'], ['grid-columns', 'base', '2'], ['grid-columns', 'lg', '4']), gap: '6' },
+];
+/** The properties a layout is made of (what a new layout takes away before it writes its own). */
+const LAYOUT_PROPERTIES = ['display', 'flex-direction', 'flex-wrap', 'grid-columns'];
+/** The kinds of element that can change layout: the boxes (they hold other elements). */
+export const wrStyleCanLayout = (kind) => kind === 'section';
+/**
+ * Which layout a box has: the id of the one it matches exactly (only its layout properties count, not the gap or the alignment), `null` when it has none of those set, `'custom'`
+ * when it has something that is none of the layouts.
+ */
+export function wrStyleLayoutRead(entries) {
+    const own = entries.filter(e => LAYOUT_PROPERTIES.includes(e.property) && e.value !== null && e.value !== undefined);
+    if (own.length === 0)
+        return 'block';
+    const key = (list) => list.map(e => `${e.property}@${e.breakpoint}=${e.value}`).sort().join(' ');
+    const mine = key(own);
+    return WR_STYLE_LAYOUTS.find(l => key(l.recipe) === mine)?.id ?? 'custom';
+}
+/**
+ * What to write to turn a box into a layout, ALL at once and at every screen width: what the old layout set is taken away (a row's `md:flex-row` must not survive into columns), the
+ * new one is written, and a gap is given if the box had none (columns glued together are not columns). One change list: one undo.
+ */
+export function wrStyleLayoutSet(entries, layoutId) {
+    const layout = WR_STYLE_LAYOUTS.find(l => l.id === layoutId);
+    if (!layout)
+        return { ok: false, reason: `no layout "${layoutId}" (there is: ${WR_STYLE_LAYOUTS.map(l => l.id).join(', ')})` };
+    const taken = entries.filter(e => LAYOUT_PROPERTIES.includes(e.property) && e.value !== null && e.value !== undefined
+        && !layout.recipe.some(r => r.property === e.property && r.breakpoint === e.breakpoint));
+    const hasGap = entries.some(e => (e.property === 'gap' || e.property === 'gap-x' || e.property === 'gap-y') && e.value !== null && e.value !== undefined);
+    return {
+        ok: true,
+        changes: [
+            ...taken.map(e => ({ property: e.property, breakpoint: e.breakpoint, value: null })),
+            ...layout.recipe.map(r => ({ property: r.property, breakpoint: r.breakpoint, value: r.value })),
+            ...(layout.gap && !hasGap ? [{ property: 'gap', breakpoint: 'base', value: layout.gap }] : []),
+        ],
+    };
+}
+// ── Showing a value before it is written ─────────────────────────────────────
+/** The CSS properties a number can be shown on while it is dragged, for each property of the table (a padding of both sides is two). */
+const PREVIEW_PROPERTIES = {
+    padding: ['padding'], 'padding-x': ['padding-left', 'padding-right'], 'padding-y': ['padding-top', 'padding-bottom'],
+    'padding-top': ['padding-top'], 'padding-right': ['padding-right'], 'padding-bottom': ['padding-bottom'], 'padding-left': ['padding-left'],
+    margin: ['margin'], 'margin-x': ['margin-left', 'margin-right'], 'margin-y': ['margin-top', 'margin-bottom'],
+    'margin-top': ['margin-top'], 'margin-right': ['margin-right'], 'margin-bottom': ['margin-bottom'], 'margin-left': ['margin-left'],
+    gap: ['gap'], 'gap-x': ['column-gap'], 'gap-y': ['row-gap'],
+    width: ['width'], height: ['height'],
+    'border-width': ['border-width'], 'border-width-x': ['border-left-width', 'border-right-width'], 'border-width-y': ['border-top-width', 'border-bottom-width'],
+    'border-width-top': ['border-top-width'], 'border-width-right': ['border-right-width'], 'border-width-bottom': ['border-bottom-width'], 'border-width-left': ['border-left-width'],
+};
+/** Every CSS property a preview may touch: what a page is asked to show is limited to these, whatever is asked. */
+export const WR_STYLE_PREVIEW_CSS = new Set(Object.values(PREVIEW_PROPERTIES).flat());
+const KEYWORD_CSS = {
+    width: { auto: 'auto', full: '100%', screen: '100vw', fit: 'fit-content', min: 'min-content', max: 'max-content' },
+    height: { auto: 'auto', full: '100%', screen: '100vh', fit: 'fit-content', min: 'min-content', max: 'max-content' },
+};
+/**
+ * The CSS that shows a value of a number property now (`padding-top` at 6 is `padding-top: 1.5rem`), for a page to wear while the value is dragged: nothing is written, and the
+ * page gives it back. null when it cannot be shown that way (the value is written without a preview). The same table as the classes: a step is a quarter of a rem.
+ */
+export function wrStylePreviewCss(property, value) {
+    const properties = PREVIEW_PROPERTIES[property];
+    const spec = wrStyleProperties().find(p => p.id === property);
+    if (!properties || !spec)
+        return null;
+    const parsed = wrStyleParseValue(spec, value);
+    if (!parsed)
+        return null;
+    const v = parsed.value;
+    let css;
+    if (v === 'px')
+        css = '1px';
+    else if (/^-?\d+(\.\d+)?$/.test(v))
+        css = spec.free?.kind === 'integer' ? `${v}px` : `${Number(v) / 4}rem`;
+    else if (/^\d+\/\d+$/.test(v))
+        css = `${Math.round((Number(v.split('/')[0]) / Number(v.split('/')[1])) * 10000) / 100}%`;
+    else
+        css = KEYWORD_CSS[property]?.[v] ?? (v === 'auto' ? 'auto' : undefined);
+    return css === undefined ? null : Object.fromEntries(properties.map(p => [p, css]));
+}
+//# sourceMappingURL=style.js.map