@webround/editor 0.0.0-stage → 0.3.0

package/dist/operations/ops/style.js

@@ -0,0 +1,268 @@
+import fs from 'fs';
+import path from 'path';
+import { WR_BREAKPOINT_IDS, WR_DEFAULT_COLOR_TOKENS, WR_STATE_IDS, WrStyleError, wrParseClassName, wrStyleApply, wrStyleApplyEverywhere, wrStyleCatalog, wrStyleCopyTo, wrStyleDescribe, wrStyleProperties, wrStyleRead, wrStyleUnmanaged, } from '@webround/core/style';
+import { findNode, readJsxLiteral, writeJsxLiteral } from '../../vite-plugins/jsx-tree.js';
+import { findStyleSetUsages, readStyleSet, readStyleSets, writeStyleSet } from '../stylesets-store.js';
+import { ensureEntryAnimations } from '../animations-store.js';
+import { defineOperation, flag, invalid, OperationError, requiredText, text } from '../define.js';
+import { scopeOfInput } from './project.js';
+// How an element looks: its classes (Tailwind), said as a property (padding, text color, width…) at a breakpoint (base, md…) with a value that has a
+// name (4, accent, center). ONE table says all of it (@webround/core/style): this file only reads the element's `className`, asks the table, and writes the
+// className back, so the editor's panel, `wr`, an MCP client and the API all say the same and change the same text.
+const SCOPE_PARAMS = [
+    { name: 'page', type: 'string', help: 'the page (its name, e.g. home) or a shared component (_shared/header, _shared/footer, _shared/<name> as declared in config/shared.json)' },
+    { name: 'file', type: 'string', help: 'instead of page: the code file, relative to src/ (what the editor\'s own page sends)' },
+];
+/** Who is styled: an element (its id, in a page or a shared component) or, instead, a shared style by its name (`set`): the same ops, the same rules. */
+const TARGET_PARAMS = [
+    ...SCOPE_PARAMS,
+    { name: 'id', type: 'string', positional: true, help: 'the element id (its data-wr-id)' },
+    { name: 'set', type: 'string', help: 'instead of id: the name of a shared style (see styleset-list), to change what every element that uses it looks like' },
+];
+const PROPERTY_IDS = wrStyleProperties().map(p => p.id);
+const readSrcFile = (ctx, name) => {
+    try {
+        return fs.readFileSync(path.join(ctx.srcRoot, name), 'utf-8');
+    }
+    catch {
+        return '';
+    }
+};
+/**
+ * The colors the project's theme names, and how they look: the `--color-*` of its `@theme` (in theme.css, or in index.css for an older site: what makes `text-accent` a class), and
+ * the color each one comes to (`--color-accent: var(--wr-color-accent)` → the value of `--wr-color-accent` in theme.css, the light theme's).
+ * The starter site's names when the stylesheet says none.
+ */
+export function themeColorsOf(ctx) {
+    const css = readSrcFile(ctx, 'index.css');
+    const theme = readSrcFile(ctx, 'theme.css');
+    const tokens = [];
+    const swatches = {};
+    const wrValue = (name) => new RegExp(`${name.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')}\\s*:\\s*([^;}]+)`).exec(`${theme}\n${css}`)?.[1]?.trim();
+    for (const block of `${theme}\n${css}`.matchAll(/@theme[^{]*\{([^}]*)\}/g)) {
+        for (const match of block[1].matchAll(/--color-([a-z0-9-]+)\s*:\s*([^;]+);/gi)) {
+            if (!tokens.includes(match[1]))
+                tokens.push(match[1]);
+            const given = match[2].trim();
+            const viaVariable = /^var\((--[a-z0-9-]+)\)$/i.exec(given);
+            const value = viaVariable ? wrValue(viaVariable[1]) : given;
+            if (value && /^(#[0-9a-f]{3,8}|(rgb|hsl|oklch|oklab)a?\([^)]*\))$/i.test(value))
+                swatches[match[1]] = value;
+        }
+    }
+    return tokens.length > 0 ? { tokens, swatches } : { tokens: [...WR_DEFAULT_COLOR_TOKENS], swatches: {} };
+}
+export function element(ctx, input) {
+    const scope = scopeOfInput(ctx, input);
+    const id = requiredText(input, 'id');
+    const file = ctx.resolveInSrc(scope.file);
+    if (!fs.existsSync(file))
+        throw new OperationError(404, 'file-not-found', `${scope.file} does not exist`);
+    const found = findNode(ctx.project(), file, id);
+    if (!found)
+        throw new OperationError(404, 'node-not-found', `no element with id "${id}" in ${scope.file}`);
+    return { found, id, scope };
+}
+/** The element's classes when they are a plain text (or there are none); an expression (`cn(…)`, a template) is the code's, and is not rewritten. */
+export function classesOf(found) {
+    if (!found.node.getAttribute('className'))
+        return { className: '' };
+    const literal = readJsxLiteral(found.node, 'className');
+    if (literal.present && typeof literal.value === 'string')
+        return { className: literal.value };
+    return { className: null, reason: 'the classes of this element are decided by code (an expression, not a plain text), so they are not changed from here' };
+}
+export const optionsOf = (ctx) => {
+    const { tokens, swatches } = themeColorsOf(ctx);
+    return { colorTokens: tokens, colorSwatches: swatches };
+};
+/** What a className says for each state (hover, focus, pressed) that it says something for: the states of the properties that can have one. */
+export function statesOf(className, options) {
+    const found = {};
+    for (const id of WR_STATE_IDS) {
+        const entries = wrStyleRead(className, options, id);
+        if (entries.length > 0)
+            found[id] = wrStyleDescribe(entries, options);
+    }
+    return found;
+}
+function applyErrors(run) {
+    try {
+        return run();
+    }
+    catch (err) {
+        if (err instanceof WrStyleError)
+            throw invalid(err.message, err.code);
+        throw err;
+    }
+}
+export const styleCatalog = defineOperation({
+    name: 'style-catalog',
+    readOnly: true,
+    summary: 'Every style property an element can have (padding, text color, width…), with what each one means, its values (with their CSS meaning) and the breakpoints they can be set at. Read this to know what style-set accepts.',
+    run: (_input, ctx) => wrStyleCatalog(optionsOf(ctx)),
+});
+export const styleGet = defineOperation({
+    name: 'style-get',
+    readOnly: true,
+    summary: 'How an element is styled: for each property set on it, at which breakpoint and to what (in words, with its CSS meaning and the Tailwind class), plus the classes this does not manage (hover:, dark:, your own) and the shared styles it uses (`sets`). `editable: false` when the element\'s classes are written by code. With `set` instead of id: the same for a shared style.',
+    params: TARGET_PARAMS,
+    run: (input, ctx) => {
+        const options = optionsOf(ctx);
+        const setName = text(input, 'set');
+        if (setName !== undefined) {
+            const set = readStyleSet(ctx, setName);
+            return { set: set.name, class: set.class, editable: true, className: set.classes, styles: wrStyleDescribe(wrStyleRead(set.classes, options), options), unmanaged: wrStyleUnmanaged(set.classes, options), states: statesOf(set.classes, options), usedBy: findStyleSetUsages(ctx, set.class).length };
+        }
+        const { found, id } = element(ctx, input);
+        const classes = classesOf(found);
+        if (classes.className === null)
+            return { id, editable: false, reason: classes.reason, className: null, styles: [], unmanaged: [], states: {}, sets: [] };
+        return {
+            id, editable: true, className: classes.className,
+            styles: wrStyleDescribe(wrStyleRead(classes.className, options), options),
+            unmanaged: wrStyleUnmanaged(classes.className, options),
+            states: statesOf(classes.className, options),
+            sets: setsOf(ctx, classes.className),
+        };
+    },
+});
+/** The shared styles an element's classes use. */
+export function setsOf(ctx, className) {
+    const tokens = new Set(wrParseClassName(className).map(t => t.raw));
+    return readStyleSets(ctx).filter(set => tokens.has(set.class)).map(set => ({ name: set.name, class: set.class }));
+}
+function changesOf(input) {
+    const given = input.changes;
+    if (given !== undefined && given !== null) {
+        if (!Array.isArray(given) || given.length === 0)
+            throw invalid('changes must be a list of { property, breakpoint, value }');
+        return given.map((entry, index) => {
+            if (typeof entry !== 'object' || entry === null || Array.isArray(entry))
+                throw invalid(`changes[${index}] must be { property, breakpoint, value }`);
+            const { property, breakpoint, value, state } = entry;
+            if (typeof property !== 'string')
+                throw invalid(`changes[${index}].property must be text`);
+            if (typeof breakpoint !== 'string')
+                throw invalid(`changes[${index}].breakpoint must be text (${WR_BREAKPOINT_IDS.join(', ')})`);
+            if (value !== null && typeof value !== 'string')
+                throw invalid(`changes[${index}].value must be text, or null to take it away`);
+            if (state !== undefined && state !== null && typeof state !== 'string')
+                throw invalid(`changes[${index}].state must be text (${WR_STATE_IDS.join(', ')})`);
+            return { property, breakpoint: breakpoint, value, ...(state ? { state: state } : {}) };
+        });
+    }
+    const property = requiredText(input, 'property');
+    const value = input.value;
+    if (value === undefined)
+        throw invalid('value required (a value of the property, or null to take it away)');
+    if (value !== null && typeof value !== 'string' && typeof value !== 'number')
+        throw invalid('value must be text, or null to take it away');
+    const state = text(input, 'state');
+    return [{ property, breakpoint: (text(input, 'breakpoint') ?? 'base'), value: value === null ? null : String(value), ...(state ? { state: state } : {}) }];
+}
+export const styleSet = defineOperation({
+    name: 'style-set',
+    summary: 'Changes how an element looks: one property at one breakpoint ({ property: "padding-x", breakpoint: "md", value: "6" }), or several at once (changes). A value of null takes it away at that breakpoint. Only the classes of that property and breakpoint change; everything else in the element\'s classes stays. Read style-catalog for the properties and values.',
+    params: [
+        ...TARGET_PARAMS,
+        { name: 'property', type: 'string', choices: PROPERTY_IDS, help: 'what to change (see style-catalog)' },
+        { name: 'breakpoint', type: 'string', choices: [...WR_BREAKPOINT_IDS], default: 'base', help: 'from which screen width up it holds: base (every screen), sm, md (tablet), lg (desktop), xl' },
+        { name: 'value', type: 'any', help: 'the value (4, accent, center… see style-catalog), or null to take the property away at that breakpoint. Spacing and sizes take any number, not only the listed ones (27 is px-27), and a width or height a fraction (3/7)' },
+        { name: 'state', type: 'string', choices: [...WR_STATE_IDS], help: 'for a property that can change with one (see style-catalog, `states`): the state it is for: hover, focus or active (pressed). Without it, always' },
+        { name: 'changes', type: 'array', help: 'instead of property, breakpoint and value: a list of { property, breakpoint, value, state? }, all made as one change' },
+        { name: 'everywhere', type: 'boolean', default: false, help: 'make the change hold on every screen: it is made at the breakpoint named, and then what the element looks like there (for those properties only) is what all screens have, the overrides of the other screens taken away; a null value takes it away from every screen' },
+    ],
+    run: (input, ctx) => changeClasses(ctx, input, (className, options) => {
+        const next = (flag(input, 'everywhere') ? wrStyleApplyEverywhere : wrStyleApply)(className, changesOf(input), options);
+        ensureEntryAnimations(ctx, next);
+        return next;
+    }),
+});
+/**
+ * The step every change of classes takes: find who is styled (an element, or a shared style by `set`), refuse classes that are code, ask `next` for the text, write it if it changed, say what it is now.
+ * What a change IS (a value, a copy between screens) is the table's; this is only reading and writing the file.
+ */
+export function changeClasses(ctx, input, next) {
+    const options = optionsOf(ctx);
+    const setName = text(input, 'set');
+    if (setName !== undefined) {
+        const set = readStyleSet(ctx, setName);
+        const written = applyErrors(() => next(set.classes, options));
+        const changed = written !== set.classes;
+        if (changed)
+            writeStyleSet(ctx, set.name, wrParseClassName(written).map(t => t.raw));
+        return {
+            set: set.name, changed, previous: set.classes, className: written,
+            styles: wrStyleDescribe(wrStyleRead(written, options), options),
+            unmanaged: wrStyleUnmanaged(written, options),
+            states: statesOf(written, options),
+            usedBy: findStyleSetUsages(ctx, set.class).length,
+        };
+    }
+    const { found, id } = element(ctx, input);
+    const classes = classesOf(found);
+    if (classes.className === null)
+        throw new OperationError(409, 'class-not-editable', classes.reason);
+    const written = applyErrors(() => next(classes.className, options));
+    const changed = written !== classes.className;
+    if (changed) {
+        writeJsxLiteral(found.node, 'className', written === '' ? null : written);
+        found.node.getSourceFile().saveSync();
+    }
+    return {
+        id, changed, previous: classes.className, className: written,
+        styles: wrStyleDescribe(wrStyleRead(written, options), options),
+        unmanaged: wrStyleUnmanaged(written, options),
+        states: statesOf(written, options),
+        sets: setsOf(ctx, written),
+    };
+}
+export const styleCopy = defineOperation({
+    name: 'style-copy',
+    summary: 'Copies the style classes of one screen (and one state) to another, or to all of them. to: a breakpoint (the classes of `from` are written there: the same properties are replaced, nothing else changes) or "all" (one clean list: the look the element has at `from` becomes what every screen has, and every breakpoint class is taken away; from "base" that only removes the overrides). hover:, dark: and the project\'s own classes are never touched.',
+    params: [
+        ...TARGET_PARAMS,
+        { name: 'from', type: 'string', choices: [...WR_BREAKPOINT_IDS], required: true, help: 'the screen to copy from: base (every screen), mobile, sm, md (tablet), lg (desktop), xl' },
+        { name: 'to', type: 'string', choices: [...WR_BREAKPOINT_IDS, 'all'], required: true, help: 'the screen to copy to, or "all" for one clean list that every screen shares' },
+        { name: 'state', type: 'string', choices: [...WR_STATE_IDS], help: 'copy the classes of that state (hover, focus, active) instead of the ones that hold always' },
+    ],
+    run: (input, ctx) => {
+        const from = requiredText(input, 'from');
+        const to = requiredText(input, 'to');
+        const state = text(input, 'state');
+        return changeClasses(ctx, input, (className, options) => wrStyleCopyTo(className, from, to, options, undefined, state));
+    },
+});
+/**
+ * Puts an element's classes back exactly as they were: what the editor's undo and redo need, because what a change replaced (padding replaces padding-x,
+ * a custom width…) cannot be said as another change. Only for the editor's page: an agent has style-set, which says what it means.
+ */
+export const styleRestore = defineOperation({
+    name: 'style-restore',
+    expose: 'editor',
+    summary: 'Sets an element\'s classes to exactly this text (the editor\'s undo and redo).',
+    params: [
+        ...SCOPE_PARAMS,
+        { name: 'id', type: 'string', positional: true, required: true, help: 'the element id' },
+        { name: 'className', type: 'string', required: true, help: 'the classes, as they are to be; an empty text takes the attribute away' },
+    ],
+    run: (input, ctx) => {
+        const { found, id } = element(ctx, input);
+        const classes = classesOf(found);
+        if (classes.className === null)
+            throw new OperationError(409, 'class-not-editable', classes.reason);
+        const className = text(input, 'className', { required: false });
+        if (className === undefined)
+            throw invalid('className required');
+        const next = className.trim().split(/\s+/).filter(Boolean).join(' ');
+        const changed = next !== classes.className;
+        if (changed) {
+            writeJsxLiteral(found.node, 'className', next === '' ? null : next);
+            found.node.getSourceFile().saveSync();
+        }
+        return { id, changed, previous: classes.className, className: next };
+    },
+});
+export const STYLE_OPERATIONS = [styleCatalog, styleGet, styleSet, styleCopy, styleRestore];
+//# sourceMappingURL=style.js.map

package/dist/operations/ops/stylesets.d.ts

@@ -0,0 +1,9 @@
+export declare const stylesetList: import("../define.js").Operation;
+export declare const stylesetCreate: import("../define.js").Operation;
+export declare const stylesetApply: import("../define.js").Operation;
+export declare const stylesetDetach: import("../define.js").Operation;
+export declare const stylesetDetachAll: import("../define.js").Operation;
+export declare const stylesetRename: import("../define.js").Operation;
+export declare const stylesetDelete: import("../define.js").Operation;
+export declare const STYLESET_OPERATIONS: import("../define.js").Operation[];
+//# sourceMappingURL=stylesets.d.ts.map

package/dist/operations/ops/stylesets.js

@@ -0,0 +1,145 @@
+import { wrParseClassName, wrStyleDescribe, wrStyleLayer, wrStyleRead, wrStyleUnmanaged } from '@webround/core/style';
+import { defineOperation, flag, invalid, OperationError, requiredText, text } from '../define.js';
+import { checkStyleSetName, findStyleSetUsages, readStyleSet, readStyleSets, removeStyleSet, renameStyleSet, replaceStyleSetUsages, STYLESET_PREFIX, styleSetClass, unknownUtilities, writeStyleSet, } from '../stylesets-store.js';
+import { changeClasses, classesOf, element, optionsOf, setsOf, themeColorsOf } from './style.js';
+// Shared styles: a name for a group of Tailwind classes, kept in `src/theme.css` (see stylesets-store.ts). Here is what a person, an agent or the editor can do with them: list them, make one
+// from an element, put one on an element (it replaces what the element had), write one out again on an element or on every element that uses it, take one away once nothing uses it. What a set
+// LOOKS like is edited with style-get / style-set / style-copy and their `set` parameter: the same table, the same words.
+const ELEMENT_PARAMS = [
+    { name: 'page', type: 'string', help: 'the page (its name, e.g. home) or a shared component (_shared/header, _shared/footer, _shared/<name> as declared in config/shared.json)' },
+    { name: 'file', type: 'string', help: 'instead of page: the code file, relative to src/ (what the editor\'s own page sends)' },
+    { name: 'id', type: 'string', positional: true, help: 'the element id (its data-wr-id)' },
+];
+const describe = (ctx, set) => {
+    const options = optionsOf(ctx);
+    const usages = findStyleSetUsages(ctx, set.class).map(u => u.usage);
+    return {
+        name: set.name, class: set.class, classes: set.classes,
+        styles: wrStyleDescribe(wrStyleRead(set.classes, options), options).map(d => d.sentence),
+        usedBy: usages.length, places: usages,
+    };
+};
+/** Where a set is used, in words: `Home: hero, Footer: footer`. */
+const placesText = (usages) => usages.slice(0, 8).map(u => `${u.file}${u.id ? ` (${u.id})` : ` line ${u.line}`}`).join(', ') + (usages.length > 8 ? `, and ${usages.length - 8} more` : '');
+export const stylesetList = defineOperation({
+    name: 'styleset-list',
+    readOnly: true,
+    summary: `The shared styles of the site: each a name (the class is ${STYLESET_PREFIX}name), the Tailwind classes it holds, what that comes to in words, and where it is used. An element uses one by having its class: change the style and every element that uses it changes.`,
+    run: (_input, ctx) => ({ prefix: STYLESET_PREFIX, sets: readStyleSets(ctx).map(set => describe(ctx, set)) }),
+});
+export const stylesetCreate = defineOperation({
+    name: 'styleset-create',
+    summary: 'Makes a shared style. With id: from that element\'s classes, which move into the style and the element then uses it (apply: false leaves the element as it is); classes of the element that Tailwind cannot apply (its own, other shared styles) stay on it. Without id: from `classes` (a text of Tailwind classes), or empty. The name is lowercase words (card, hero-title); its class is s-<name>.',
+    params: [
+        ...ELEMENT_PARAMS,
+        { name: 'name', type: 'string', required: true, help: 'what the style is called: lowercase words and numbers joined by dashes (card, hero-title)' },
+        { name: 'classes', type: 'string', help: 'without id: the Tailwind classes it holds (all must be ones Tailwind knows)' },
+        { name: 'apply', type: 'boolean', default: true, help: 'with id: the element uses the new style (default), or keeps its classes as they are' },
+    ],
+    run: async (input, ctx) => {
+        const name = requiredText(input, 'name');
+        checkStyleSetName(name);
+        if (readStyleSets(ctx).some(s => s.name === name))
+            throw new OperationError(409, 'styleset-exists', `there is already a style called "${name}"`);
+        const { tokens: colorTokens } = themeColorsOf(ctx);
+        const sets = new Set(readStyleSets(ctx).map(s => s.class));
+        const fits = async (classes) => {
+            const candidates = classes.filter(c => !sets.has(c));
+            const unknown = await unknownUtilities(ctx, candidates, colorTokens);
+            // Without Tailwind to ask, only what the style table reads is trusted
+            const known = unknown === null
+                ? new Set(candidates.filter(c => !wrStyleUnmanaged(c, optionsOf(ctx)).includes(c)))
+                : new Set(candidates.filter(c => !unknown.includes(c)));
+            return { fit: classes.filter(c => known.has(c)), kept: classes.filter(c => !known.has(c)) };
+        };
+        if (text(input, 'id') === undefined) {
+            const classes = wrParseClassName(text(input, 'classes') ?? '').map(t => t.raw);
+            const { fit, kept } = await fits(classes);
+            if (kept.length > 0)
+                throw invalid(`Tailwind cannot apply: ${kept.join(', ')}. A style holds only classes Tailwind knows (not the project's own classes, not other shared styles)`, 'unknown-classes');
+            writeStyleSet(ctx, name, fit);
+            return { created: describe(ctx, readStyleSet(ctx, name)), changed: false };
+        }
+        const { found } = element(ctx, input);
+        const classes = classesOf(found);
+        if (classes.className === null)
+            throw new OperationError(409, 'class-not-editable', classes.reason);
+        const { fit, kept } = await fits(wrParseClassName(classes.className).map(t => t.raw));
+        writeStyleSet(ctx, name, fit);
+        const apply = flag(input, 'apply') ?? true;
+        const result = apply ? changeClasses(ctx, input, () => [styleSetClass(name), ...kept].join(' ')) : changeClasses(ctx, input, className => className);
+        return { ...result, created: describe(ctx, readStyleSet(ctx, name)), kept };
+    },
+});
+export const stylesetApply = defineOperation({
+    name: 'styleset-apply',
+    summary: 'Puts a shared style on an element: everything the element had in its classes is replaced by the style\'s class (the element then looks like the style and changes with it).',
+    params: [...ELEMENT_PARAMS, { name: 'name', type: 'string', required: true, help: 'the shared style (see styleset-list)' }],
+    run: (input, ctx) => {
+        const set = readStyleSet(ctx, requiredText(input, 'name'));
+        return { ...changeClasses(ctx, input, () => set.class), applied: set.name };
+    },
+});
+/** What a class text becomes when the shared styles it names are written out: each stands for what it holds, under the classes the element has of its own. */
+function writtenOut(className, sets, options) {
+    const names = new Set(sets.map(s => s.class));
+    const own = wrParseClassName(className).map(t => t.raw).filter(c => !names.has(c)).join(' ');
+    return sets.reduce((out, set) => wrStyleLayer(set.classes, out, options), own);
+}
+export const stylesetDetach = defineOperation({
+    name: 'styleset-detach',
+    summary: 'Takes a shared style off an element, keeping how it looks: the style\'s classes are written on the element (where the element has classes of its own for the same thing, its own win). name: only that style (default: every one the element uses).',
+    params: [...ELEMENT_PARAMS, { name: 'name', type: 'string', help: 'which shared style to take off (default: all the element uses)' }],
+    run: (input, ctx) => {
+        const { found } = element(ctx, input);
+        const classes = classesOf(found);
+        if (classes.className === null)
+            throw new OperationError(409, 'class-not-editable', classes.reason);
+        const wanted = text(input, 'name');
+        const used = setsOf(ctx, classes.className).map(s => readStyleSet(ctx, s.name)).filter(s => wanted === undefined || s.name === wanted);
+        const options = optionsOf(ctx);
+        return changeClasses(ctx, input, className => (used.length === 0 ? className : writtenOut(className, used, options)));
+    },
+});
+export const stylesetDetachAll = defineOperation({
+    name: 'styleset-detach-all',
+    summary: 'Takes a shared style off every element that uses it, keeping how each looks (the style\'s classes are written on each, under the classes the element has of its own). Afterwards the style can be deleted. Not undoable from the editor: it touches many files.',
+    params: [{ name: 'name', type: 'string', positional: true, required: true, help: 'the shared style (see styleset-list)' }],
+    run: (input, ctx) => {
+        const set = readStyleSet(ctx, requiredText(input, 'name'));
+        const options = optionsOf(ctx);
+        const detached = replaceStyleSetUsages(ctx, set.class, others => wrStyleLayer(set.classes, others, options));
+        return { name: set.name, detached };
+    },
+});
+export const stylesetRename = defineOperation({
+    name: 'styleset-rename',
+    summary: 'Gives a shared style another name: its rule in theme.css and the class in every element that uses it change together (each keeps its place among the element\'s other classes). The new name is lowercase words (hero-card); it cannot be one another style has.',
+    params: [
+        { name: 'name', type: 'string', positional: true, required: true, help: 'the shared style (see styleset-list)' },
+        { name: 'to', type: 'string', required: true, help: 'the new name' },
+    ],
+    run: (input, ctx) => {
+        const from = requiredText(input, 'name');
+        const to = requiredText(input, 'to');
+        const { places } = renameStyleSet(ctx, from, to);
+        return { renamed: from !== to, from, to, places, set: describe(ctx, readStyleSet(ctx, to)) };
+    },
+});
+export const stylesetDelete = defineOperation({
+    name: 'styleset-delete',
+    summary: 'Deletes a shared style. Refused while any element uses it: it says where, and what to do (styleset-detach-all, or detach it from those elements).',
+    destructive: true,
+    params: [{ name: 'name', type: 'string', positional: true, required: true, help: 'the shared style (see styleset-list)' }],
+    run: (input, ctx) => {
+        const set = readStyleSet(ctx, requiredText(input, 'name'));
+        const usages = findStyleSetUsages(ctx, set.class).map(u => u.usage);
+        if (usages.length > 0) {
+            throw new OperationError(409, 'styleset-in-use', `"${set.name}" is used in ${usages.length} ${usages.length === 1 ? 'place' : 'places'} (${placesText(usages)}). To delete it, detach it from all of them first (styleset-detach-all), and then delete it.`);
+        }
+        removeStyleSet(ctx, set.name);
+        return { deleted: set.name };
+    },
+});
+export const STYLESET_OPERATIONS = [stylesetList, stylesetCreate, stylesetApply, stylesetDetach, stylesetDetachAll, stylesetRename, stylesetDelete];
+//# sourceMappingURL=stylesets.js.map

package/dist/operations/ops/theme.d.ts

@@ -0,0 +1,6 @@
+export declare const themeGet: import("..").Operation;
+export declare const themeSet: import("..").Operation;
+export declare const themeRemove: import("..").Operation;
+export declare const themeDark: import("..").Operation;
+export declare const THEME_OPERATIONS: import("..").Operation[];
+//# sourceMappingURL=theme.d.ts.map