@motion-proto/live-tokens 0.5.0 → 0.6.1

package/README.md

@@ -127,13 +127,56 @@ The components carry their own design-token aliases (declared inside each `.svel
 
 ### Styles
 
+Editor chrome (`ui-editor.css`, `ui-form-controls.css`) and the icon font are
+**auto-loaded by the editor pages themselves**; you don't import them. The
+only stylesheet a consumer needs is a `tokens.css` declaring the design-token
+CSS variables on `:root`.
+
+You can use the package's default as a starting point:
+
+```ts
+import '@motion-proto/live-tokens/starter/tokens.css';
+import '@motion-proto/live-tokens/starter/site.css';   // optional: themed h1/p/a styles
+import '@motion-proto/live-tokens/starter/fonts.css';  // optional: Fraunces + Manrope @font-face
+```
+
+…or copy `node_modules/@motion-proto/live-tokens/src/styles/tokens.css` into
+your project and edit. The editor will seed `themes/default.json` on first
+run and you can promote your edits back into the file.
+
+## Consuming live-tokens from scratch
+
+The minimum a consumer needs after `npm install @motion-proto/live-tokens`:
+
+```ts
+// src/main.ts
+import '@motion-proto/live-tokens/starter/tokens.css';
+import { mount } from 'svelte';
+import App from './App.svelte';
+
+mount(App, { target: document.getElementById('app')! });
+```
+
+```svelte
+<!-- src/App.svelte -->
+<script lang="ts">
+  import Editor from '@motion-proto/live-tokens/editor';
+</script>
+
+<Editor />
+```
+
 ```ts
-import '@motion-proto/live-tokens/styles/ui-editor.css';
-import '@motion-proto/live-tokens/styles/form-controls.css';
-import '@motion-proto/live-tokens/styles/fonts.css';
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  plugins: [svelte()],
+});
 ```
 
-You'll also need your own `src/styles/tokens.css` declaring your design tokens as CSS variables on `:root`. Start from the package's default (`node_modules/@motion-proto/live-tokens/src/styles/tokens.css`) and overlay your overrides — or let the editor seed `themes/default.json` on first run and promote it.
+No `css: 'injected'` workaround, no `optimizeDeps` excludes — `vite build` works as-is. (You'll want the full `themeFileApi` plugin from the Quick install section above when you're ready to persist edits to disk.)
 
 ## Greenfield? Use the starter
 

package/dist-plugin/index.cjs

@@ -168,7 +168,7 @@ function themeFileApi(opts) {
     themesResource.ensureDir();
     if (!import_fs2.default.existsSync(import_path2.default.join(THEMES_DIR, "default.json"))) {
       const defaultTheme = {
-        name: "Default",
+        name: "Default Theme",
         createdAt: (/* @__PURE__ */ new Date()).toISOString(),
         updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
         editorConfigs: {},
@@ -369,7 +369,7 @@ ${newVars}
       }
       const now = (/* @__PURE__ */ new Date()).toISOString();
       const defaultPreset = {
-        name: "Default",
+        name: "Default Preset",
         createdAt: now,
         updatedAt: now,
         theme: themesResource.getActiveName(),
@@ -444,6 +444,7 @@ ${COMPONENT_OVERRIDES_END}
   const COMPONENT_CONFIGS_ROUTE = `${API_BASE}/component-configs`;
   const PRESETS_ROUTE = `${API_BASE}/presets`;
   const PRESETS_ACTIVE_ROUTE = `${API_BASE}/presets/active`;
+  const PRESETS_PRODUCTION_ROUTE = `${API_BASE}/presets/production`;
   const THEME_BY_NAME_REGEX = new RegExp(`^${escapedBase}/themes/([a-z0-9\\-_]+)$`);
   const COMP_LIST_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)$`);
   const COMP_ACTIVE_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)/active$`);
@@ -754,6 +755,73 @@ ${COMPONENT_OVERRIDES_END}
     presetsResource.setActiveName(fileName);
     jsonResponse(res, 200, { ok: true, activeFile: fileName });
   }
+  async function handleGetProductionPreset({ res }) {
+    const prodFile = presetsResource.getProductionName();
+    const filePath = presetsResource.filePath(prodFile);
+    if (!import_fs2.default.existsSync(filePath)) {
+      jsonResponse(res, 200, {
+        fileName: prodFile,
+        name: prodFile,
+        theme: "default",
+        componentConfigs: {},
+        updatedAt: ""
+      });
+      return;
+    }
+    const data = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+    jsonResponse(res, 200, {
+      fileName: prodFile,
+      name: data.name || prodFile,
+      theme: data.theme || "default",
+      componentConfigs: data.componentConfigs || {},
+      updatedAt: data.updatedAt || ""
+    });
+  }
+  async function handleSetProductionPreset({ req, res }) {
+    const body = JSON.parse(await readBody(req));
+    const fileName = sanitizeFileName(body.name || "default");
+    const presetPath = presetsResource.filePath(fileName);
+    if (!import_fs2.default.existsSync(presetPath)) {
+      jsonResponse(res, 404, { error: "Preset not found" });
+      return;
+    }
+    const preset = JSON.parse(import_fs2.default.readFileSync(presetPath, "utf-8"));
+    const themeName = sanitizeFileName(preset.theme || "default");
+    if (!import_fs2.default.existsSync(themesResource.filePath(themeName))) {
+      jsonResponse(res, 422, { error: `Preset references missing theme: ${themeName}` });
+      return;
+    }
+    const knownComponents = new Set(listComponentNames());
+    const componentConfigs = preset.componentConfigs ?? {};
+    const apply = [];
+    for (const [comp, configFile] of Object.entries(componentConfigs)) {
+      if (!knownComponents.has(comp)) continue;
+      const sanitized = sanitizeFileName(String(configFile) || "default");
+      if (!import_fs2.default.existsSync(componentResource(comp).filePath(sanitized))) {
+        jsonResponse(res, 422, {
+          error: `Preset references missing config: ${comp}/${sanitized}`
+        });
+        return;
+      }
+      apply.push([comp, sanitized]);
+    }
+    themesResource.setProductionName(themeName);
+    for (const [comp, configFile] of apply) {
+      componentResource(comp).setProductionName(configFile);
+    }
+    presetsResource.setProductionName(fileName);
+    syncTokensToCss(themeName);
+    syncFontsToCss(themeName);
+    syncComponentsToCss();
+    jsonResponse(res, 200, {
+      ok: true,
+      fileName,
+      name: preset.name || fileName,
+      theme: themeName,
+      componentConfigs: Object.fromEntries(apply),
+      updatedAt: preset.updatedAt || ""
+    });
+  }
   async function handlePresetByName({ params, req, res }) {
     const [fileName] = params;
     const filePath = presetsResource.filePath(fileName);
@@ -768,6 +836,10 @@ ${COMPONENT_OVERRIDES_END}
       return;
     }
     if (req.method === "PUT") {
+      if (fileName === "default") {
+        jsonResponse(res, 403, { error: "Cannot overwrite the default preset" });
+        return;
+      }
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
       if (import_fs2.default.existsSync(filePath)) {
@@ -884,10 +956,12 @@ ${COMPONENT_OVERRIDES_END}
     { method: "GET", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "PUT", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "DELETE", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
-    // Presets — list / active are exact strings, must run before regexes
+    // Presets — list / active / production are exact strings, must run before regexes
     { method: "GET", pattern: PRESETS_ROUTE, handler: handleListPresets },
     { method: "GET", pattern: PRESETS_ACTIVE_ROUTE, handler: handleGetActivePreset },
     { method: "PUT", pattern: PRESETS_ACTIVE_ROUTE, handler: handleSetActivePreset },
+    { method: "GET", pattern: PRESETS_PRODUCTION_ROUTE, handler: handleGetProductionPreset },
+    { method: "PUT", pattern: PRESETS_PRODUCTION_ROUTE, handler: handleSetProductionPreset },
     // Presets — :name/apply (more specific than :name)
     { method: "PUT", pattern: PRESET_APPLY_REGEX, handler: handleApplyPreset },
     { method: "POST", pattern: PRESET_APPLY_REGEX, handler: methodNotAllowed },

package/dist-plugin/index.js

@@ -132,7 +132,7 @@ function themeFileApi(opts) {
     themesResource.ensureDir();
     if (!fs2.existsSync(path2.join(THEMES_DIR, "default.json"))) {
       const defaultTheme = {
-        name: "Default",
+        name: "Default Theme",
         createdAt: (/* @__PURE__ */ new Date()).toISOString(),
         updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
         editorConfigs: {},
@@ -333,7 +333,7 @@ ${newVars}
       }
       const now = (/* @__PURE__ */ new Date()).toISOString();
       const defaultPreset = {
-        name: "Default",
+        name: "Default Preset",
         createdAt: now,
         updatedAt: now,
         theme: themesResource.getActiveName(),
@@ -408,6 +408,7 @@ ${COMPONENT_OVERRIDES_END}
   const COMPONENT_CONFIGS_ROUTE = `${API_BASE}/component-configs`;
   const PRESETS_ROUTE = `${API_BASE}/presets`;
   const PRESETS_ACTIVE_ROUTE = `${API_BASE}/presets/active`;
+  const PRESETS_PRODUCTION_ROUTE = `${API_BASE}/presets/production`;
   const THEME_BY_NAME_REGEX = new RegExp(`^${escapedBase}/themes/([a-z0-9\\-_]+)$`);
   const COMP_LIST_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)$`);
   const COMP_ACTIVE_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)/active$`);
@@ -718,6 +719,73 @@ ${COMPONENT_OVERRIDES_END}
     presetsResource.setActiveName(fileName);
     jsonResponse(res, 200, { ok: true, activeFile: fileName });
   }
+  async function handleGetProductionPreset({ res }) {
+    const prodFile = presetsResource.getProductionName();
+    const filePath = presetsResource.filePath(prodFile);
+    if (!fs2.existsSync(filePath)) {
+      jsonResponse(res, 200, {
+        fileName: prodFile,
+        name: prodFile,
+        theme: "default",
+        componentConfigs: {},
+        updatedAt: ""
+      });
+      return;
+    }
+    const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+    jsonResponse(res, 200, {
+      fileName: prodFile,
+      name: data.name || prodFile,
+      theme: data.theme || "default",
+      componentConfigs: data.componentConfigs || {},
+      updatedAt: data.updatedAt || ""
+    });
+  }
+  async function handleSetProductionPreset({ req, res }) {
+    const body = JSON.parse(await readBody(req));
+    const fileName = sanitizeFileName(body.name || "default");
+    const presetPath = presetsResource.filePath(fileName);
+    if (!fs2.existsSync(presetPath)) {
+      jsonResponse(res, 404, { error: "Preset not found" });
+      return;
+    }
+    const preset = JSON.parse(fs2.readFileSync(presetPath, "utf-8"));
+    const themeName = sanitizeFileName(preset.theme || "default");
+    if (!fs2.existsSync(themesResource.filePath(themeName))) {
+      jsonResponse(res, 422, { error: `Preset references missing theme: ${themeName}` });
+      return;
+    }
+    const knownComponents = new Set(listComponentNames());
+    const componentConfigs = preset.componentConfigs ?? {};
+    const apply = [];
+    for (const [comp, configFile] of Object.entries(componentConfigs)) {
+      if (!knownComponents.has(comp)) continue;
+      const sanitized = sanitizeFileName(String(configFile) || "default");
+      if (!fs2.existsSync(componentResource(comp).filePath(sanitized))) {
+        jsonResponse(res, 422, {
+          error: `Preset references missing config: ${comp}/${sanitized}`
+        });
+        return;
+      }
+      apply.push([comp, sanitized]);
+    }
+    themesResource.setProductionName(themeName);
+    for (const [comp, configFile] of apply) {
+      componentResource(comp).setProductionName(configFile);
+    }
+    presetsResource.setProductionName(fileName);
+    syncTokensToCss(themeName);
+    syncFontsToCss(themeName);
+    syncComponentsToCss();
+    jsonResponse(res, 200, {
+      ok: true,
+      fileName,
+      name: preset.name || fileName,
+      theme: themeName,
+      componentConfigs: Object.fromEntries(apply),
+      updatedAt: preset.updatedAt || ""
+    });
+  }
   async function handlePresetByName({ params, req, res }) {
     const [fileName] = params;
     const filePath = presetsResource.filePath(fileName);
@@ -732,6 +800,10 @@ ${COMPONENT_OVERRIDES_END}
       return;
     }
     if (req.method === "PUT") {
+      if (fileName === "default") {
+        jsonResponse(res, 403, { error: "Cannot overwrite the default preset" });
+        return;
+      }
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
       if (fs2.existsSync(filePath)) {
@@ -848,10 +920,12 @@ ${COMPONENT_OVERRIDES_END}
     { method: "GET", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "PUT", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "DELETE", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
-    // Presets — list / active are exact strings, must run before regexes
+    // Presets — list / active / production are exact strings, must run before regexes
     { method: "GET", pattern: PRESETS_ROUTE, handler: handleListPresets },
     { method: "GET", pattern: PRESETS_ACTIVE_ROUTE, handler: handleGetActivePreset },
     { method: "PUT", pattern: PRESETS_ACTIVE_ROUTE, handler: handleSetActivePreset },
+    { method: "GET", pattern: PRESETS_PRODUCTION_ROUTE, handler: handleGetProductionPreset },
+    { method: "PUT", pattern: PRESETS_PRODUCTION_ROUTE, handler: handleSetProductionPreset },
     // Presets — :name/apply (more specific than :name)
     { method: "PUT", pattern: PRESET_APPLY_REGEX, handler: handleApplyPreset },
     { method: "POST", pattern: PRESET_APPLY_REGEX, handler: methodNotAllowed },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 6/7.",
   "keywords": [
@@ -29,11 +29,12 @@
     "src/pages/ComponentEditorPage.svelte",
     "src/pages/ComponentEditorPage.svelte.d.ts",
     "src/styles/ui-editor.css",
-    "src/styles/form-controls.css",
+    "src/styles/ui-form-controls.css",
     "src/styles/fonts.css",
     "src/styles/fonts",
     "src/styles/_padding.scss",
     "src/styles/tokens.css",
+    "src/styles/site.css",
     "src/data",
     "src/assets",
     "dist-plugin",
@@ -77,8 +78,9 @@
       "require": "./dist-plugin/index.cjs"
     },
     "./styles/ui-editor.css": "./src/styles/ui-editor.css",
-    "./styles/form-controls.css": "./src/styles/form-controls.css",
-    "./styles/fonts.css": "./src/styles/fonts.css"
+    "./starter/tokens.css": "./src/styles/tokens.css",
+    "./starter/site.css": "./src/styles/site.css",
+    "./starter/fonts.css": "./src/styles/fonts.css"
   },
   "scripts": {
     "dev": "vite",
@@ -90,7 +92,10 @@
     "build:plugin": "tsup src/vite-plugin/index.ts --out-dir dist-plugin --format esm,cjs --dts --external vite --platform node --clean",
     "build:lib": "npm run build:plugin",
     "deploy:local": "bash scripts/deploy-local.sh",
-    "prepublishOnly": "npm run build:lib"
+    "check:no-style-imports": "node scripts/check-no-style-imports.mjs",
+    "check:editor-font-isolation": "node scripts/check-editor-font-isolation.mjs",
+    "check:smoke-install": "bash scripts/smoke-install.sh",
+    "prepublishOnly": "npm run check:no-style-imports && npm run check:editor-font-isolation && npm run build:lib && npm run check:smoke-install"
   },
   "peerDependencies": {
     "sass": "^1.0",

package/src/component-editor/DialogEditor.svelte

@@ -117,7 +117,7 @@
   
       <label>
         <span>Cancel button (left)</span>
-        <select class="form-select" value={cancelVariant} onchange={setCancelVariant}>
+        <select class="ui-form-select" value={cancelVariant} onchange={setCancelVariant}>
           {#each BUTTON_VARIANTS as v}
             <option value={v}>{variantLabel(v)}</option>
           {/each}
@@ -125,7 +125,7 @@
       </label>
       <label>
         <span>Confirm button (right)</span>
-        <select class="form-select" value={confirmVariant} onchange={setConfirmVariant}>
+        <select class="ui-form-select" value={confirmVariant} onchange={setConfirmVariant}>
           {#each BUTTON_VARIANTS as v}
             <option value={v}>{variantLabel(v)}</option>
           {/each}

package/src/component-editor/NotificationEditor.svelte

@@ -122,7 +122,7 @@
       </label>
       <label>
         <span>Right button</span>
-        <select class="form-select" bind:value={rightOption}>
+        <select class="ui-form-select" bind:value={rightOption}>
           {#each BUTTON_VARIANT_OPTIONS as v}
             <option value={v}>{variantLabel(v)}</option>
           {/each}
@@ -130,7 +130,7 @@
       </label>
       <label>
         <span>Left button</span>
-        <select class="form-select" bind:value={leftOption}>
+        <select class="ui-form-select" bind:value={leftOption}>
           {#each BUTTON_VARIANT_OPTIONS as v}
             <option value={v}>{variantLabel(v)}</option>
           {/each}

package/src/component-editor/scaffolding/ComponentFileManager.svelte

@@ -21,6 +21,7 @@
     loadComponentActive,
     markComponentSaved,
   } from '../../lib/editorStore';
+  import { bumpProductionRevision } from '../../lib/productionPulse';
   import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../../lib/migrations';
   import type { CssVarRef } from '../../lib/editorTypes';
   import { safeFetch } from '../../lib/storage';
@@ -295,6 +296,7 @@
       }
       await setComponentProductionFile(component, activeFileName);
       await refreshProduction();
+      bumpProductionRevision();
       adoptFeedback = wasDirty
         ? `Saved "${adoptingName}" and adopted`
         : `Adopted "${adoptingName}"`;
@@ -499,7 +501,7 @@
 
   .cfm-title-row {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     gap: var(--ui-space-12);
     flex-wrap: wrap;
   }
@@ -518,6 +520,7 @@
     display: inline-flex;
     align-items: center;
     gap: var(--ui-space-6);
+    margin-left: 2.5rem;
     height: 26px;
     padding: 0 14px;
     font-size: var(--ui-font-size-xs);

package/src/component-editor/scaffolding/SaveAsDialog.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { run } from 'svelte/legacy';
 
-  import type { ComponentConfigMeta } from '../../lib/themeTypes';
   import { sanitizeFileName } from '../../lib/themeService';
   import UIDialog from '../../ui/UIDialog.svelte';
 
@@ -10,12 +9,30 @@
     show?: boolean;
     /** Display name to seed the input with when the dialog opens. */
     currentDisplayName?: string;
-    /** Existing files used by the increment helper to find the next available `_NN` suffix. */
-    files?: ComponentConfigMeta[];
+    /** Existing files used by the increment helper to find the next available `_NN` suffix.
+     *  Only `fileName` is read, so this accepts any shape with that field
+     *  (ComponentConfigMeta, PresetMeta, …). */
+    files?: { fileName: string }[];
+    /** Dialog title — defaults to "Save As". Overridable so callers can use
+     *  context-specific framing (e.g. "Save Preset As"). */
+    title?: string;
+    /** Placeholder shown in the empty input. */
+    placeholder?: string;
+    /** Error message shown when the user types the reserved "default" name.
+     *  Default copy references components; presets should override. */
+    reservedNameMessage?: string;
     onsave?: (payload: { displayName: string; fileName: string }) => void;
   }
 
-  let { show = $bindable(false), currentDisplayName = '', files = [], onsave }: Props = $props();
+  let {
+    show = $bindable(false),
+    currentDisplayName = '',
+    files = [],
+    title = 'Save As',
+    placeholder = 'Config name…',
+    reservedNameMessage = 'The name "default" is reserved for the core component definition.',
+    onsave,
+  }: Props = $props();
 
   let saveAsName = $state('');
   let saveAsInput: HTMLInputElement | undefined = $state();
@@ -73,7 +90,7 @@
     const trimmed = saveAsName.trim();
     if (!trimmed) return '';
     if (sanitizeFileName(trimmed) === 'default') {
-      return 'The name "default" is reserved for the core component definition.';
+      return reservedNameMessage;
     }
     return '';
   })());
@@ -81,7 +98,7 @@
 
 <UIDialog
   bind:show
-  title="Save As"
+  {title}
   cancelLabel="Cancel"
   confirmLabel="Save"
   confirmDisabled={!saveAsName.trim() || !!saveAsError}
@@ -97,7 +114,7 @@
         bind:value={saveAsName}
         bind:this={saveAsInput}
         onkeydown={handleKeydown}
-        placeholder="Config name…"
+        {placeholder}
       />
       <button
         type="button"

package/src/lib/ColumnsOverlay.svelte

@@ -104,7 +104,7 @@
 
   .columns-overlay__info {
     position: fixed;
-    left: 12px;
+    right: 12px;
     bottom: 12px;
     display: inline-flex;
     align-items: center;

package/src/lib/componentPersist.ts

@@ -0,0 +1,65 @@
+import { get } from 'svelte/store';
+import type { ComponentConfig } from './themeTypes';
+import { editorState, markComponentSaved } from './editorStore';
+import type { CssVarRef } from './editorTypes';
+import { CURRENT_COMPONENT_SCHEMA_VERSION } from './migrations';
+import {
+  listComponentConfigs,
+  saveComponentConfig,
+  setActiveComponentFile,
+} from './componentConfigService';
+
+/**
+ * Save the current in-memory state of a component to its active file. Mirrors
+ * the `persist` flow inside `ComponentFileManager.svelte` so callers without a
+ * file-manager instance (e.g. the unsaved-components dialog in PresetFileManager)
+ * can save a dirty component without duplicating the schema-version + aliases
+ * stringification logic.
+ *
+ * Refuses to overwrite `default` — that's the protected source-derived snapshot.
+ * Callers that hit `{ ok: false, reason: 'default' }` should prompt for a new
+ * name and re-route to a Save-As flow.
+ */
+export type SaveActiveComponentResult =
+  | { ok: true; fileName: string; displayName: string }
+  | { ok: false; reason: 'default' | 'no-state' | 'error'; error?: unknown };
+
+function refToString(ref: CssVarRef): string {
+  return ref.kind === 'token' ? ref.name : ref.value;
+}
+
+export async function saveActiveComponentConfig(
+  component: string,
+): Promise<SaveActiveComponentResult> {
+  const slice = get(editorState).components[component];
+  if (!slice) return { ok: false, reason: 'no-state' };
+
+  try {
+    const list = await listComponentConfigs(component);
+    const fileName = list.activeFile;
+    if (fileName === 'default') return { ok: false, reason: 'default' };
+
+    const active = list.files.find((f) => f.fileName === fileName);
+    const displayName = active?.name ?? fileName;
+
+    const now = new Date().toISOString();
+    const aliases: Record<string, string> = {};
+    for (const [k, ref] of Object.entries(slice.aliases)) aliases[k] = refToString(ref);
+
+    const data: ComponentConfig = {
+      name: displayName,
+      component,
+      createdAt: now,
+      updatedAt: now,
+      aliases,
+      config: { ...slice.config },
+      schemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION,
+    };
+    await saveComponentConfig(component, fileName, data);
+    await setActiveComponentFile(component, fileName);
+    markComponentSaved(component);
+    return { ok: true, fileName, displayName };
+  } catch (error) {
+    return { ok: false, reason: 'error', error };
+  }
+}