@webround/editor 0.0.0-stage → 0.3.0

package/dist/operations/ops/theme.js

@@ -0,0 +1,304 @@
+import fs from 'fs';
+import path from 'path';
+import postcss from 'postcss';
+import { WR_THEME_START_PROPERTY } from '@webround/core/theme';
+import { defineOperation, invalid, object, requiredText } from '../define.js';
+// The site's theme: custom properties (`--wr-*`), Google fonts and custom fonts, all in `src/theme.css`. Read and written with postcss, so
+// what the user wrote around them stays as it was.
+const themeFile = (ctx) => path.join(ctx.srcRoot, 'theme.css');
+function readTheme(ctx) {
+    const file = themeFile(ctx);
+    return postcss.parse(fs.existsSync(file) ? fs.readFileSync(file, 'utf-8') : '');
+}
+function writeTheme(ctx, root) {
+    fs.writeFileSync(themeFile(ctx), root.toString());
+}
+const COLOR_PREFIX = '--wr-color-';
+const isColor = (key) => key.startsWith(COLOR_PREFIX) && key.length > COLOR_PREFIX.length;
+const ruleOf = (root, selector) => root.nodes.find((n) => n.type === 'rule' && n.selector === selector);
+/** The site has a dark theme when its theme has a `.dark` block. */
+const darkRule = (root) => ruleOf(root, '.dark');
+// A color of the theme is a class (`bg-brand`) because the stylesheet maps it: `--color-brand: var(--wr-color-brand)` in an `@theme`. That mapping lives in `theme.css` (index.css only imports
+// it), and is written and taken away with the color, so a color named in the theme is a color of the classes and of the style panel. An older site has its mappings in index.css: they are
+// found there, and taken away from there.
+const indexFile = (ctx) => path.join(ctx.srcRoot, 'index.css');
+function mappingsOf(root, key) {
+    const found = [];
+    root.walkAtRules('theme', (rule) => rule.walkDecls(/^--color-/, (decl) => { if (decl.value.replace(/\s+/g, '') === `var(${key})`)
+        found.push(decl); }));
+    return found;
+}
+function ensureColorMapping(ctx, root, key) {
+    if (!isColor(key))
+        return;
+    const index = fs.existsSync(indexFile(ctx)) ? postcss.parse(fs.readFileSync(indexFile(ctx), 'utf-8')) : postcss.root();
+    if (mappingsOf(root, key).length > 0 || mappingsOf(index, key).length > 0)
+        return;
+    let block = root.nodes.find((n) => n.type === 'atrule' && n.name === 'theme' && n.params.trim() === 'inline');
+    if (!block) {
+        block = postcss.atRule({ name: 'theme', params: 'inline' });
+        root.append(block);
+    }
+    block.append({ prop: `--color-${key.slice(COLOR_PREFIX.length)}`, value: `var(${key})` });
+}
+function removeColorMapping(ctx, root, key) {
+    if (!isColor(key))
+        return;
+    mappingsOf(root, key).forEach(decl => decl.remove());
+    if (!fs.existsSync(indexFile(ctx)))
+        return;
+    const index = postcss.parse(fs.readFileSync(indexFile(ctx), 'utf-8'));
+    const old = mappingsOf(index, key);
+    if (old.length === 0)
+        return;
+    old.forEach(decl => decl.remove());
+    fs.writeFileSync(indexFile(ctx), index.toString());
+}
+function stripQuotes(value) {
+    return value.trim().replace(/^['"]|['"]$/g, '');
+}
+function findGoogleImport(root) {
+    let found;
+    root.walkAtRules('import', (rule) => {
+        if (rule.params.includes('fonts.googleapis.com'))
+            found = rule;
+    });
+    return found;
+}
+function parseGoogleImport(rule) {
+    if (!rule)
+        return [];
+    const urlMatch = rule.params.match(/url\(['"]?([^'")]+)['"]?\)/);
+    if (!urlMatch)
+        return [];
+    const url = new URL(urlMatch[1]);
+    const entries = [];
+    for (const family of url.searchParams.getAll('family')) {
+        const [name, rest] = family.split(':');
+        const weights = rest?.startsWith('wght@') ? rest.slice('wght@'.length) : rest;
+        entries.push({ family: name.replace(/\+/g, ' '), weights });
+    }
+    return entries;
+}
+function buildGoogleImportRule(entries) {
+    const params = entries
+        .map(({ family, weights }) => `family=${family.replace(/ /g, '+')}${weights ? `:wght@${weights}` : ''}`)
+        .join('&');
+    return `url('https://fonts.googleapis.com/css2?${params}&display=swap')`;
+}
+function getThemeItems(root) {
+    const items = [];
+    const dark = darkRule(root);
+    root.walkRules(':root', (rule) => {
+        rule.walkDecls(/^--wr-/, (decl) => {
+            const inDark = dark?.nodes.find((n) => n.type === 'decl' && n.prop === decl.prop);
+            items.push({ kind: 'property', key: decl.prop, value: stripQuotes(decl.value), ...(inDark && inDark.type === 'decl' ? { dark: stripQuotes(inDark.value) } : {}) });
+        });
+    });
+    for (const { family, weights } of parseGoogleImport(findGoogleImport(root))) {
+        items.push({ kind: 'google-font', key: family, weights });
+    }
+    const customByFamily = new Map();
+    root.walkAtRules('font-face', (rule) => {
+        let family = '';
+        const face = { src: '' };
+        rule.walkDecls((decl) => {
+            const value = stripQuotes(decl.value);
+            if (decl.prop === 'font-family')
+                family = value;
+            else if (decl.prop === 'src')
+                face.src = decl.value;
+            else if (decl.prop === 'font-weight')
+                face.weight = decl.value;
+            else if (decl.prop === 'font-style')
+                face.style = decl.value;
+            else if (decl.prop === 'font-stretch')
+                face.stretch = decl.value;
+        });
+        if (!family)
+            return;
+        const faces = customByFamily.get(family) ?? [];
+        faces.push(face);
+        customByFamily.set(family, faces);
+    });
+    for (const [family, faces] of customByFamily) {
+        items.push({ kind: 'custom-font', key: family, faces });
+    }
+    return items;
+}
+function setIn(rule, key, value) {
+    const existing = rule.nodes.find((n) => n.type === 'decl' && n.prop === key);
+    if (existing && existing.type === 'decl')
+        existing.value = value;
+    else
+        rule.append({ prop: key, value });
+}
+/** A property in the light theme (`:root`), and in the dark one when it is told (`dark`) or when the site has a dark theme and it is a new color (it starts as the light value). */
+function setProperty(root, key, value, dark) {
+    let rootRule = ruleOf(root, ':root');
+    if (!rootRule) {
+        rootRule = postcss.rule({ selector: ':root' });
+        root.append(rootRule);
+    }
+    const isNew = !rootRule.nodes.some((n) => n.type === 'decl' && n.prop === key);
+    setIn(rootRule, key, value);
+    const darkBlock = darkRule(root);
+    if (dark !== undefined) {
+        if (!darkBlock)
+            throw invalid('the site has no dark theme: turn it on first (theme-dark)');
+        setIn(darkBlock, key, dark);
+    }
+    else if (darkBlock && isNew && isColor(key))
+        setIn(darkBlock, key, value);
+}
+function setGoogleFont(root, family, weights) {
+    const importRule = findGoogleImport(root);
+    const entries = parseGoogleImport(importRule);
+    const idx = entries.findIndex((e) => e.family === family);
+    if (idx >= 0)
+        entries[idx] = { family, weights };
+    else
+        entries.push({ family, weights });
+    if (importRule) {
+        importRule.params = buildGoogleImportRule(entries);
+    }
+    else {
+        const newRule = postcss.atRule({ name: 'import', params: buildGoogleImportRule(entries) });
+        root.prepend(newRule); // @import deve stare in cima al file
+    }
+}
+function removeCustomFontBlocks(root, family) {
+    root.walkAtRules('font-face', (rule) => {
+        let ruleFamily = '';
+        rule.walkDecls('font-family', (decl) => { ruleFamily = stripQuotes(decl.value); });
+        if (ruleFamily === family)
+            rule.remove();
+    });
+}
+function setCustomFont(root, family, faces) {
+    removeCustomFontBlocks(root, family); // edit = replace, niente blocchi duplicati/stale
+    for (const face of faces) {
+        const rule = postcss.atRule({ name: 'font-face' });
+        rule.append({ prop: 'font-family', value: `'${family}'` });
+        rule.append({ prop: 'src', value: face.src });
+        if (face.weight)
+            rule.append({ prop: 'font-weight', value: face.weight });
+        if (face.style)
+            rule.append({ prop: 'font-style', value: face.style });
+        if (face.stretch)
+            rule.append({ prop: 'font-stretch', value: face.stretch });
+        root.append(rule);
+    }
+}
+function removeProperty(root, key) {
+    for (const selector of [':root', '.dark'])
+        ruleOf(root, selector)?.walkDecls(key, (decl) => { decl.remove(); });
+}
+function removeGoogleFont(root, family) {
+    const importRule = findGoogleImport(root);
+    if (!importRule)
+        return;
+    const entries = parseGoogleImport(importRule).filter((e) => e.family !== family);
+    if (entries.length === 0)
+        importRule.remove();
+    else
+        importRule.params = buildGoogleImportRule(entries);
+}
+const KINDS = ['property', 'google-font', 'custom-font'];
+export const themeGet = defineOperation({
+    name: 'theme-get',
+    readOnly: true,
+    summary: 'The theme of the site: its custom properties (--wr-*, colors, spacing…; a property has `dark` too when the site has a dark theme), Google fonts and custom fonts, and `dark`: whether the site has a dark theme (a `.dark` block).',
+    run: (_input, ctx) => { const root = readTheme(ctx); return { items: getThemeItems(root), dark: Boolean(darkRule(root)) }; },
+});
+export const themeSet = defineOperation({
+    name: 'theme-set',
+    summary: 'Sets one item of the theme: a custom property { kind: "property", key: "--wr-…", value, dark? } (a `--wr-color-<name>` is also a class, `bg-<name>`: it is mapped for you; `dark` is its value in the dark theme, when the site has one), a Google font { kind: "google-font", key: "Inter", weights? } or a custom font { kind: "custom-font", key, faces }. It replaces the item if it is there.',
+    params: [{ name: 'item', type: 'object', required: true, help: 'the item: { kind, key, … } as theme-get returns them' }],
+    run: (input, ctx) => {
+        const item = object(input, 'item', { required: true });
+        if (!KINDS.includes(item.kind) || typeof item.key !== 'string' || !item.key)
+            throw invalid('item needs a kind and a key');
+        const root = readTheme(ctx);
+        if (item.kind === 'property') {
+            if (typeof item.value !== 'string')
+                throw invalid('a property needs a value');
+            if (item.dark !== undefined && typeof item.dark !== 'string')
+                throw invalid('dark must be a text');
+            setProperty(root, item.key, item.value, item.dark);
+            ensureColorMapping(ctx, root, item.key);
+        }
+        else if (item.kind === 'google-font')
+            setGoogleFont(root, item.key, item.weights);
+        else {
+            if (!Array.isArray(item.faces))
+                throw invalid('a custom font needs its faces');
+            setCustomFont(root, item.key, item.faces);
+        }
+        writeTheme(ctx, root);
+        return { kind: item.kind, key: item.key };
+    },
+});
+export const themeRemove = defineOperation({
+    name: 'theme-remove',
+    destructive: true,
+    summary: 'Removes one item of the theme.',
+    params: [
+        { name: 'kind', type: 'string', required: true, choices: KINDS, help: 'what it is' },
+        { name: 'key', type: 'string', required: true, help: 'the property (--wr-…) or the font family' },
+    ],
+    run: (input, ctx) => {
+        const kind = requiredText(input, 'kind');
+        const key = requiredText(input, 'key');
+        if (!KINDS.includes(kind))
+            throw invalid(`kind must be one of: ${KINDS.join(', ')}`);
+        const root = readTheme(ctx);
+        if (kind === 'property') {
+            removeProperty(root, key);
+            removeColorMapping(ctx, root, key);
+        }
+        else if (kind === 'google-font')
+            removeGoogleFont(root, key);
+        else
+            removeCustomFontBlocks(root, key);
+        writeTheme(ctx, root);
+        return { kind, key };
+    },
+});
+/** What the dark theme starts from: every color of the light one (a copy, to be changed). */
+function enableDark(root) {
+    if (darkRule(root))
+        return;
+    const light = ruleOf(root, ':root');
+    const dark = postcss.rule({ selector: '.dark' });
+    light?.walkDecls(/^--wr-color-/, (decl) => { dark.append({ prop: decl.prop, value: decl.value }); });
+    if (light)
+        root.insertAfter(light, dark);
+    else
+        root.append(dark);
+    if (!ruleOf(root, 'html.dark'))
+        root.append(postcss.rule({ selector: 'html.dark' }).append({ prop: 'color-scheme', value: 'dark' }));
+}
+/** No dark theme: its block goes, with what only made sense with it (`color-scheme`, the choice to start from the system's theme). */
+function disableDark(root) {
+    darkRule(root)?.remove();
+    ruleOf(root, 'html.dark')?.remove();
+    root.walkRules(':root', (rule) => { rule.walkDecls(WR_THEME_START_PROPERTY, (decl) => { decl.remove(); }); });
+}
+export const themeDark = defineOperation({
+    name: 'theme-dark',
+    summary: 'Turns the dark theme of the site on (a `.dark` block in theme.css that starts as a copy of the light colors, to be changed with theme-set `dark`) or off (the block is taken away). A site has a dark theme only if it has that block.',
+    params: [{ name: 'enabled', type: 'boolean', required: true, help: 'true: a dark theme; false: only the light one' }],
+    run: (input, ctx) => {
+        const enabled = input.enabled === true || input.enabled === 'true';
+        const root = readTheme(ctx);
+        if (enabled)
+            enableDark(root);
+        else
+            disableDark(root);
+        writeTheme(ctx, root);
+        return { enabled };
+    },
+});
+export const THEME_OPERATIONS = [themeGet, themeSet, themeRemove, themeDark];
+//# sourceMappingURL=theme.js.map

package/dist/operations/registry.d.ts

@@ -0,0 +1,8 @@
+import { type OperationRegistry } from './define.js';
+/**
+ * Every operation there is. A new one is a file in ops/ and a line here: the dev server's `/wr/op/<name>`, `wr-op`, the container's tools
+ * (and the manifest, the reference and the schemas an MCP server offers) all follow, without being touched.
+ */
+export declare const OPERATIONS: import("./define.js").Operation[];
+export declare const createRegistry: () => OperationRegistry;
+//# sourceMappingURL=registry.d.ts.map

package/dist/operations/registry.js

@@ -0,0 +1,19 @@
+import { createOperationRegistry } from './define.js';
+import { CHECK_OPERATIONS } from './ops/check.js';
+import { COMMENT_OPERATIONS } from './ops/comments.js';
+import { CONTENT_OPERATIONS } from './ops/content.js';
+import { JSON_OPERATIONS } from './ops/json.js';
+import { LANG_OPERATIONS } from './ops/langs.js';
+import { NODE_OPERATIONS } from './ops/nodes.js';
+import { PAGE_OPERATIONS } from './ops/pages.js';
+import { SEO_OPERATIONS } from './ops/seo.js';
+import { STYLE_OPERATIONS } from './ops/style.js';
+import { STYLESET_OPERATIONS } from './ops/stylesets.js';
+import { THEME_OPERATIONS } from './ops/theme.js';
+/**
+ * Every operation there is. A new one is a file in ops/ and a line here: the dev server's `/wr/op/<name>`, `wr-op`, the container's tools
+ * (and the manifest, the reference and the schemas an MCP server offers) all follow, without being touched.
+ */
+export const OPERATIONS = [...PAGE_OPERATIONS, ...NODE_OPERATIONS, ...CHECK_OPERATIONS, ...CONTENT_OPERATIONS, ...LANG_OPERATIONS, ...SEO_OPERATIONS, ...THEME_OPERATIONS, ...COMMENT_OPERATIONS, ...STYLE_OPERATIONS, ...STYLESET_OPERATIONS, ...JSON_OPERATIONS];
+export const createRegistry = () => createOperationRegistry(OPERATIONS);
+//# sourceMappingURL=registry.js.map

package/dist/operations/stylesets-store.d.ts

@@ -0,0 +1,50 @@
+import { type StringLiteral, type NoSubstitutionTemplateLiteral } from 'ts-morph';
+import { type OperationContext } from './define.js';
+export declare const STYLESET_PREFIX = "s-";
+export declare const STYLESET_FILE = "theme.css";
+export declare const styleSetClass: (name: string) => string;
+export declare function checkStyleSetName(name: string): void;
+export interface StyleSet {
+    name: string;
+    /** The class an element uses (`s-card`). */
+    class: string;
+    /** The Tailwind classes it holds, as one text. */
+    classes: string;
+}
+/** Every shared style of the site, in the order they are written. A site without `theme.css`, or without any, has none. */
+export declare function readStyleSets(ctx: OperationContext): StyleSet[];
+export declare function readStyleSet(ctx: OperationContext, name: string): StyleSet;
+/** Creates the set, or replaces what it holds (its own hand-written CSS, if someone added any, stays). `classes` are whole Tailwind classes. */
+export declare function writeStyleSet(ctx: OperationContext, name: string, classes: readonly string[]): void;
+export declare function removeStyleSet(ctx: OperationContext, name: string): void;
+export interface StyleSetUsage {
+    /** Relative to `src/`. */
+    file: string;
+    line: number;
+    /** The element's `id`, when the code spells it out. */
+    id: string | null;
+}
+type ClassLiteral = StringLiteral | NoSubstitutionTemplateLiteral;
+/** Every place the code uses the class, one per literal that holds it. */
+export declare function findStyleSetUsages(ctx: OperationContext, className: string): {
+    usage: StyleSetUsage;
+    literal: ClassLiteral;
+}[];
+/**
+ * Rewrites every place that uses the class: `edit` gets the classes of that literal (the style's among them) and says what they become. The ONE step that taking a style off, and
+ * renaming it, both take. Returns how many places changed.
+ */
+export declare function editStyleSetUsages(ctx: OperationContext, className: string, edit: (classes: string[]) => string): number;
+/** Takes the class out of every place that uses it. `replacement` says what stands in its place given the other classes of that same literal (what the style held, under what the element has of its own). */
+export declare function replaceStyleSetUsages(ctx: OperationContext, className: string, replacement: (others: string) => string): number;
+/** Gives the style another name: its rule in theme.css, and the class in every place that uses it (where it stood among the others). Says how many places changed. */
+export declare function renameStyleSet(ctx: OperationContext, from: string, to: string): {
+    places: number;
+};
+/**
+ * The classes among `classes` that `@apply` could not take: Tailwind generates nothing for them (a class of the project's own, a typo, another shared style). `@apply` of one of those
+ * breaks the whole stylesheet, so nothing is written until they are out. null when Tailwind cannot be loaded from the project (no way to tell): the caller then trusts only what it knows.
+ */
+export declare function unknownUtilities(ctx: OperationContext, classes: readonly string[], colorTokens: readonly string[]): Promise<string[] | null>;
+export {};
+//# sourceMappingURL=stylesets-store.d.ts.map

package/dist/operations/stylesets-store.js

@@ -0,0 +1,216 @@
+import fs from 'fs';
+import path from 'path';
+import { createRequire } from 'module';
+import { pathToFileURL } from 'url';
+import postcss from 'postcss';
+import { SyntaxKind } from 'ts-morph';
+import { wrParseClassName } from '@webround/core/style';
+import { OperationError } from './define.js';
+import { sourceFiles } from '../check/orphans.js';
+import { loadSourceFile } from '../vite-plugins/jsx-tree.js';
+// Shared styles: a name for a group of Tailwind classes, kept in ONE place so changing it changes every element that uses it. In the code it is a class
+// (`className="s-card"`) and in `src/theme.css` it is a rule that says what it holds (`@apply`), in the components layer so a utility on an element still wins:
+//
+//     @layer components {
+//       .s-card { @apply px-4 md:px-8 text-lg hover:bg-accent; }
+//     }
+//
+// This file is the ONE reader and writer of those rules, and the one that says where a set is used. Nothing else parses or writes them.
+export const STYLESET_PREFIX = 's-';
+export const STYLESET_FILE = 'theme.css';
+/** What a set is called by the person: lowercase words and numbers joined by dashes (`card`, `hero-title`). The class is the name with the prefix. */
+const NAME = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
+const RULE = /^\.s-([a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/;
+const LAYERS = 'theme, base, components, utilities';
+const INTRO = 'Shared styles: a name for a group of Tailwind classes. Use it as className="s-name"; change it here (or in the editor\'s Styles) and every element that uses it changes. A utility on an element still wins over it.';
+export const styleSetClass = (name) => `${STYLESET_PREFIX}${name}`;
+export function checkStyleSetName(name) {
+    if (name.length > 40 || !NAME.test(name)) {
+        throw new OperationError(400, 'invalid-styleset-name', `"${name}" cannot be the name of a style: use lowercase words and numbers joined by dashes (card, hero-title), up to 40 characters`);
+    }
+}
+const themeFile = (ctx) => path.join(ctx.srcRoot, STYLESET_FILE);
+function readRoot(ctx) {
+    const file = themeFile(ctx);
+    if (!fs.existsSync(file))
+        throw new OperationError(409, 'no-theme-file', `this site has no src/${STYLESET_FILE}: shared styles are kept there`);
+    return postcss.parse(fs.readFileSync(file, 'utf-8'));
+}
+const componentsLayers = (root) => root.nodes.filter((n) => n.type === 'atrule' && n.name === 'layer' && n.params.trim() === 'components');
+const applyOf = (rule) => rule.nodes.filter((n) => n.type === 'atrule' && n.name === 'apply');
+const textOf = (rule) => applyOf(rule).map(a => a.params.trim()).filter(Boolean).join(' ');
+function setRules(root) {
+    return componentsLayers(root).flatMap(layer => (layer.nodes ?? []).flatMap((n) => {
+        const name = n.type === 'rule' ? RULE.exec(n.selector.trim())?.[1] : undefined;
+        return n.type === 'rule' && name ? [{ name, rule: n }] : [];
+    }));
+}
+/** Every shared style of the site, in the order they are written. A site without `theme.css`, or without any, has none. */
+export function readStyleSets(ctx) {
+    if (!fs.existsSync(themeFile(ctx)))
+        return [];
+    return setRules(readRoot(ctx)).map(({ name, rule }) => ({ name, class: styleSetClass(name), classes: textOf(rule) }));
+}
+export function readStyleSet(ctx, name) {
+    const found = readStyleSets(ctx).find(s => s.name === name);
+    if (!found)
+        throw new OperationError(404, 'styleset-not-found', `there is no style called "${name}" (there is: ${readStyleSets(ctx).map(s => s.name).join(', ') || 'none yet'})`);
+    return found;
+}
+/**
+ * The layers must be said in their order BEFORE the first `@layer components`: index.css imports theme.css ahead of Tailwind, and a layer is ranked where it is first named, so
+ * without this line the components would rank under Tailwind's resets and a set's padding would be wiped by them.
+ */
+function ensureLayerOrder(root) {
+    if (root.nodes.some(n => n.type === 'atrule' && n.name === 'layer' && !n.nodes && n.params.replace(/\s+/g, '') === LAYERS.replace(/\s+/g, '')))
+        return;
+    const statement = postcss.atRule({ name: 'layer', params: LAYERS });
+    const lastImport = [...root.nodes].reverse().find(n => n.type === 'atrule' && n.name === 'import');
+    if (lastImport)
+        root.insertAfter(lastImport, statement);
+    else
+        root.prepend(statement);
+    statement.raws.before = lastImport ? '\n\n' : '';
+}
+/** Creates the set, or replaces what it holds (its own hand-written CSS, if someone added any, stays). `classes` are whole Tailwind classes. */
+export function writeStyleSet(ctx, name, classes) {
+    checkStyleSetName(name);
+    const root = readRoot(ctx);
+    ensureLayerOrder(root);
+    let layer = componentsLayers(root)[0];
+    if (!layer) {
+        layer = postcss.atRule({ name: 'layer', params: 'components', nodes: [] });
+        layer.raws.before = '\n\n';
+        layer.raws.between = ' ';
+        layer.prepend(postcss.comment({ text: INTRO }));
+        root.append(layer);
+    }
+    let rule = setRules(root).find(s => s.name === name)?.rule;
+    if (!rule) {
+        rule = postcss.rule({ selector: `.${styleSetClass(name)}` });
+        rule.raws.between = ' ';
+        layer.append(rule);
+    }
+    applyOf(rule).forEach(a => a.remove());
+    const text = classes.join(' ').trim();
+    if (text)
+        rule.prepend(postcss.atRule({ name: 'apply', params: text }));
+    fs.writeFileSync(themeFile(ctx), root.toString());
+}
+export function removeStyleSet(ctx, name) {
+    const root = readRoot(ctx);
+    const found = setRules(root).find(s => s.name === name);
+    if (!found)
+        throw new OperationError(404, 'styleset-not-found', `there is no style called "${name}"`);
+    found.rule.remove();
+    fs.writeFileSync(themeFile(ctx), root.toString());
+}
+const hasClass = (text, className) => wrParseClassName(text).some(t => t.raw === className);
+/** The text literals inside the `className` of an element: where the class names are. (`cn("s-card", x && "p-2")`: both literals.) */
+function classLiterals(attribute) {
+    return [...attribute.getDescendantsOfKind(SyntaxKind.StringLiteral), ...attribute.getDescendantsOfKind(SyntaxKind.NoSubstitutionTemplateLiteral)];
+}
+/** Every place the code uses the class, one per literal that holds it. */
+export function findStyleSetUsages(ctx, className) {
+    const found = [];
+    const project = ctx.project();
+    for (const absolute of sourceFiles(ctx.srcRoot)) {
+        if (!fs.readFileSync(absolute, 'utf-8').includes(className))
+            continue;
+        const sourceFile = loadSourceFile(project, absolute);
+        if (!sourceFile)
+            continue;
+        for (const attribute of sourceFile.getDescendantsOfKind(SyntaxKind.JsxAttribute)) {
+            if (attribute.getNameNode().getText() !== 'className')
+                continue;
+            for (const literal of classLiterals(attribute)) {
+                if (!hasClass(literal.getLiteralText(), className))
+                    continue;
+                const element = attribute.getParent()?.getParent();
+                const id = element?.asKind(SyntaxKind.JsxOpeningElement)?.getAttribute('id') ?? element?.asKind(SyntaxKind.JsxSelfClosingElement)?.getAttribute('id');
+                const initializer = id?.asKind(SyntaxKind.JsxAttribute)?.getInitializer();
+                found.push({
+                    usage: { file: path.relative(ctx.srcRoot, absolute).split(path.sep).join('/'), line: literal.getStartLineNumber(), id: initializer?.asKind(SyntaxKind.StringLiteral)?.getLiteralValue() ?? null },
+                    literal,
+                });
+            }
+        }
+    }
+    return found;
+}
+/**
+ * Rewrites every place that uses the class: `edit` gets the classes of that literal (the style's among them) and says what they become. The ONE step that taking a style off, and
+ * renaming it, both take. Returns how many places changed.
+ */
+export function editStyleSetUsages(ctx, className, edit) {
+    const touched = new Set();
+    let places = 0;
+    // The last literal first: a replacement changes the text after it, never before
+    for (const { usage, literal } of findStyleSetUsages(ctx, className).reverse()) {
+        literal.replaceWithText(JSON.stringify(edit(wrParseClassName(literal.getLiteralText()).map(t => t.raw))));
+        touched.add(usage.file);
+        places++;
+    }
+    // (not loadSourceFile: it reads the file again, and the changes are in memory)
+    for (const file of touched)
+        ctx.project().getSourceFile(path.join(ctx.srcRoot, file))?.saveSync();
+    return places;
+}
+/** Takes the class out of every place that uses it. `replacement` says what stands in its place given the other classes of that same literal (what the style held, under what the element has of its own). */
+export function replaceStyleSetUsages(ctx, className, replacement) {
+    return editStyleSetUsages(ctx, className, classes => classes.flatMap(c => (c === className ? [replacement(classes.filter(other => other !== className).join(' '))] : [c])).join(' '));
+}
+/** Gives the style another name: its rule in theme.css, and the class in every place that uses it (where it stood among the others). Says how many places changed. */
+export function renameStyleSet(ctx, from, to) {
+    checkStyleSetName(to);
+    const root = readRoot(ctx);
+    const rules = setRules(root);
+    const found = rules.find(s => s.name === from);
+    if (!found)
+        throw new OperationError(404, 'styleset-not-found', `there is no style called "${from}" (there is: ${rules.map(s => s.name).join(', ') || 'none yet'})`);
+    if (from !== to && rules.some(s => s.name === to))
+        throw new OperationError(409, 'styleset-exists', `there is already a style called "${to}"`);
+    if (from === to)
+        return { places: 0 };
+    found.rule.selector = `.${styleSetClass(to)}`;
+    fs.writeFileSync(themeFile(ctx), root.toString());
+    return { places: editStyleSetUsages(ctx, styleSetClass(from), classes => classes.map(c => (c === styleSetClass(from) ? styleSetClass(to) : c)).join(' ')) };
+}
+// ── Is it a class Tailwind can apply ─────────────────────────────────────────
+/**
+ * The classes among `classes` that `@apply` could not take: Tailwind generates nothing for them (a class of the project's own, a typo, another shared style). `@apply` of one of those
+ * breaks the whole stylesheet, so nothing is written until they are out. null when Tailwind cannot be loaded from the project (no way to tell): the caller then trusts only what it knows.
+ */
+export async function unknownUtilities(ctx, classes, colorTokens) {
+    let compile;
+    let themePath;
+    try {
+        const require = createRequire(path.join(ctx.root, 'package.json'));
+        // The CommonJS build comes with its exports under `default`, the ES one with them at the top
+        const loaded = await import(pathToFileURL(require.resolve('tailwindcss')).href);
+        const found = loaded.compile ?? loaded.default?.compile;
+        if (typeof found !== 'function')
+            return null;
+        compile = found;
+        themePath = require.resolve('tailwindcss/theme.css');
+    }
+    catch {
+        return null;
+    }
+    // The colors are the project's own names: Tailwind only knows them from the stylesheet
+    const colors = colorTokens.map(token => `--color-${token}: #000;`).join(' ');
+    const compiler = await compile(`@import "tailwindcss/theme.css" layer(theme);\n@theme inline { ${colors} }\n@tailwind utilities;\n`, {
+        base: ctx.root,
+        loadStylesheet: async (id, base) => { const file = id.startsWith('tailwindcss') ? themePath : id; return { path: file, base, content: fs.readFileSync(file, 'utf-8') }; },
+    });
+    let css = compiler.build([]);
+    const unknown = [];
+    for (const candidate of new Set(classes)) {
+        const next = compiler.build([candidate]);
+        if (next === css)
+            unknown.push(candidate);
+        css = next;
+    }
+    return classes.filter(c => unknown.includes(c));
+}
+//# sourceMappingURL=stylesets-store.js.map

package/dist/registry.d.ts

@@ -0,0 +1,5 @@
+export declare function setWrValue(id: string, element: Record<string, unknown>, lang: string): void;
+export declare function getWrValue(id: string): unknown;
+export declare function registerWrSchema(id: string, multilangFields: readonly string[]): void;
+export declare function getWrSchema(id: string): readonly string[];
+//# sourceMappingURL=registry.d.ts.map

package/dist/registry.js

@@ -0,0 +1,24 @@
+// packages/editor/src/registry.ts
+import { wrLocalized } from '@webround/core/localized';
+// What the editor knows of each element, to give to the panel when it is selected. The values are kept as the JSON has them (a text in every language) and put in the language shown when they are READ: an element
+// says which of its fields are texts in every language (`registerWrSchema`) when it is drawn, and one that is drawn later than the values were set (a row that appears when the store has answered, a form that opens, a
+// tab) would otherwise be read before it said so, and the panel would show the whole object (`[object Object]`).
+const values = new Map();
+const schemas = new Map();
+export function setWrValue(id, element, lang) {
+    values.set(id, { element, lang });
+}
+export function getWrValue(id) {
+    const entry = values.get(id);
+    if (!entry)
+        return null;
+    const multilangFields = getWrSchema(id);
+    return Object.fromEntries(Object.entries(entry.element).map(([key, value]) => [key, multilangFields.includes(key) && value && typeof value === 'object' ? wrLocalized(value, entry.lang) : value]));
+}
+export function registerWrSchema(id, multilangFields) {
+    schemas.set(id, multilangFields);
+}
+export function getWrSchema(id) {
+    return schemas.get(id) ?? [];
+}
+//# sourceMappingURL=registry.js.map