@ikas/component-cli 1.4.0-beta.5 → 1.4.0-beta.50

package/dist/commands/delete-theme-globals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete-theme-globals.js","sourceRoot":"","sources":["../../src/commands/delete-theme-globals.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAE1G,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;AAErF,SAAS,QAAQ,CAAC,IAAa;IAC7B,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,iCAAiC;IAC/C,MAAM,GAAG,GAAG,IAAI,OAAO,CAAC,wBAAwB,CAAC,CAAC;IAClD,GAAG;SACA,WAAW,CAAC,oDAAoD,CAAC;SACjE,cAAc,CAAC,cAAc,EAAE,wDAAwD,CAAC;SACxF,MAAM,CAAC,eAAe,EAAE,2BAA2B,EAAE,MAAM,CAAC;SAC5D,MAAM,CAAC,KAAK,EAAE,OAAyC,EAAE,EAAE;QAC1D,IAAI,CAAC,OAAO,CAAC,IAAI;YAAE,iBAAiB,CAAC,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC;YACH,kBAAkB,CAAC,MAAM,eAAe,CAAC,wBAAwB,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACtH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC,CAAC;IACL,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,8BAA8B;IAC5C,MAAM,GAAG,GAAG,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC/C,GAAG;SACA,WAAW,CAAC,4GAA4G,CAAC;SACzH,cAAc,CAAC,qBAAqB,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC9D,cAAc,CAAC,WAAW,EAAE,0CAA0C,CAAC;SACvE,MAAM,CAAC,eAAe,EAAE,2BAA2B,EAAE,MAAM,CAAC;SAC5D,MAAM,CAAC,KAAK,EAAE,OAA2D,EAAE,EAAE;QAC5E,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;YACnE,iBAAiB,CAAC,IAAI,KAAK,CAAC,gCAAgC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACzF,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,EAAE;YAAE,iBAAiB,CAAC,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAClE,IAAI,CAAC;YACH,kBAAkB,CAChB,MAAM,eAAe,CACnB,qBAAqB,EACrB,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EAAE,EAAE,OAAO,CAAC,EAAE,EAAE,EAChD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CACvB,CACF,CAAC;QACJ,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC,CAAC;IACL,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/commands/dev.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/commands/dev.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA03CpC,wBAAgB,gBAAgB,IAAI,OAAO,CAI1C"}
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/commands/dev.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAysDpC,wBAAgB,gBAAgB,IAAI,OAAO,CAI1C"}

package/dist/commands/dev.js

@@ -1,9 +1,10 @@
 import chalk from "chalk";
 import chokidar from "chokidar";
 import { Command } from "commander";
+import * as crypto from "crypto";
 import * as fs from "fs";
 import * as path from "path";
-import { toPascalCase, generateTypesFile, generateGlobalTypesFile, collectUsedEnumIds, collectUsedCustomTypeIds, generateComponentFile, generateStylesFile, updateBarrelExport, generateProjectId, generateComponentId, generateUniqueId, buildPropGroupHierarchy, findPropGroup, collectPropGroupIds, movePropGroupInTree, validateFilteredComponentIds, } from "../utils/component-helpers.js";
+import { toPascalCase, generateTypesFile, generateGlobalTypesFile, collectUsedEnumIds, collectUsedCustomTypeIds, generateComponentFile, generateStylesFile, updateBarrelExport, generateProjectId, generateComponentId, generateUniqueId, buildPropGroupHierarchy, findPropGroup, collectPropGroupIds, movePropGroupInTree, validateFilteredComponentIds, diffConfigTranslations, } from "../utils/component-helpers.js";
 import { compileAllComponents as compileAllComponentsMulti } from "../utils/compile.js";
 import { transformEsmToWindowGlobals, transformChunkForCanvas, buildChunkMapping, } from "../utils/esm-transform.js";
 import { DevServerWebSocket, } from "../utils/websocket-server.js";
@@ -12,6 +13,13 @@ const DEV_SERVER_PORT = 5201;
 const compiledComponents = new Map();
 const compiledSharedModules = new Map();
 let compiledGlobalStyles;
+// Hashes broadcast on the last cycle, used to compute deltas. Reset only on process
+// startup. Editors compare these hashes (sent on the wire as `contentHash`) against their
+// stored YJS value to decide whether to apply the update — so once we've seen a given hash
+// here, we can safely skip broadcasting it again.
+const lastBroadcastComponentHashes = new Map();
+const lastBroadcastSharedHashes = new Map();
+let lastBroadcastGlobalStyleHash;
 // Cached types list received from the editor via sync-types
 let cachedEditorTypes = null;
 // Cached custom type definitions received from the editor via sync-types (full IType objects)
@@ -128,12 +136,23 @@ async function compileAllComponentsForDev(config) {
     if (chunkIds.length > 0) {
         console.log(chalk.cyan(`  Extracted ${chunkIds.length} shared chunk(s)`));
     }
-    // Store global CSS (unscoped)
+    // Store global CSS (unscoped). Preserve `updatedAt` across rebuilds when the compiled
+    // global CSS is byte-identical so the editor only sees a fresh timestamp when the
+    // designer actually changed `global.css` — the publish UI watches this timestamp to
+    // decide whether globals need (re)publishing independently of any code component.
     if (result.globalCss && config.projectId) {
-        compiledGlobalStyles = {
+        const previousHash = computeGlobalStyleHash(compiledGlobalStyles);
+        const previousUpdatedAt = compiledGlobalStyles?.updatedAt;
+        const next = {
             projectId: config.projectId,
             compiledCss: result.globalCss,
         };
+        const nextHash = computeGlobalStyleHash(next);
+        next.updatedAt =
+            nextHash === previousHash && previousUpdatedAt !== undefined
+                ? previousUpdatedAt
+                : Date.now();
+        compiledGlobalStyles = next;
         console.log(chalk.cyan(`  Compiled global styles`));
     }
     else {
@@ -172,6 +191,7 @@ async function compileAllComponentsForDev(config) {
             ...(prop.filteredComponentIds
                 ? { filteredComponentIds: prop.filteredComponentIds }
                 : {}),
+            ...(prop.translations ? { translations: prop.translations } : {}),
         }));
         // Build prop group hierarchy if groups are defined
         const propGroups = component.propGroups && component.propGroups.length > 0
@@ -185,7 +205,9 @@ async function compileAllComponentsForDev(config) {
         const data = {
             id: component.id,
             name: component.name,
+            ...(component.displayName ? { displayName: component.displayName } : {}),
             projectId: config.projectId,
+            ...(component.translations ? { translations: component.translations } : {}),
             props: propsWithIds,
             compiledServerJs: entry.serverJs,
             compiledClientJs: entry.clientJs,
@@ -208,6 +230,7 @@ async function compileAllComponentsForDev(config) {
         compiledComponents.set(component.id, data);
         console.log(chalk.green(`  Compiled: ${component.name}`));
     }
+    populateContentHashes();
     return true;
 }
 /**
@@ -248,6 +271,7 @@ function rebuildCompiledComponentFromConfig(config, componentId) {
         ...(prop.filteredComponentIds
             ? { filteredComponentIds: prop.filteredComponentIds }
             : {}),
+        ...(prop.translations ? { translations: prop.translations } : {}),
     }));
     const propGroups = component.propGroups && component.propGroups.length > 0
         ? buildPropGroupHierarchy(component.id, component.propGroups, propsWithIds)
@@ -257,6 +281,8 @@ function rebuildCompiledComponentFromConfig(config, componentId) {
         : undefined;
     const updated = {
         ...existing,
+        displayName: component.displayName,
+        translations: component.translations,
         props: propsWithIds,
         propGroups,
         configPropGroups: component.propGroups && component.propGroups.length > 0
@@ -267,6 +293,7 @@ function rebuildCompiledComponentFromConfig(config, componentId) {
             : undefined,
     };
     compiledComponents.set(componentId, updated);
+    populateContentHashes();
     return updated;
 }
 /**
@@ -275,6 +302,156 @@ function rebuildCompiledComponentFromConfig(config, componentId) {
 function getAllSharedModules() {
     return Array.from(compiledSharedModules.values());
 }
+function sha256Hex(input) {
+    return crypto.createHash("sha256").update(input).digest("hex");
+}
+/**
+ * Compute `contentHash` for every entry in `compiledSharedModules` and `compiledComponents`,
+ * mutating each entry in place. A component's hash incorporates the hashes of its referenced
+ * shared modules (sorted), so any shared-util change cascades into consumers without
+ * requiring a separate "shared module changed" message — the consumer's own hash already
+ * differs. Global styles are tracked separately via `updatedAt` on the global style payload;
+ * they intentionally do NOT roll into component hashes (designers publish globals as a
+ * standalone unit).
+ */
+function populateContentHashes() {
+    for (const mod of compiledSharedModules.values()) {
+        mod.contentHash = sha256Hex([mod.id, mod.compiledServerJs, mod.compiledClientJs, mod.canvasClientJs, mod.compiledCss].join("\0"));
+    }
+    for (const comp of compiledComponents.values()) {
+        const referencedHashes = (comp.usedSharedModuleIds || [])
+            .slice()
+            .sort()
+            .map((id) => `${id}:${compiledSharedModules.get(id)?.contentHash || ""}`)
+            .join("|");
+        comp.contentHash = sha256Hex([
+            comp.id,
+            comp.name,
+            // displayName is code-owned (a display variant of name). Hash it so a
+            // displayName-only config edit bumps the hash, triggering a component
+            // broadcast and passing the editor's autoSyncToTheme contentHash gate.
+            comp.displayName || "",
+            comp.projectId || "",
+            comp.type || "component",
+            comp.isHeader ? "1" : "0",
+            comp.isFooter ? "1" : "0",
+            comp.compiledServerJs,
+            comp.compiledClientJs,
+            comp.compiledCss,
+            comp.canvasClientJs,
+            JSON.stringify(comp.props),
+            JSON.stringify(comp.propGroups || null),
+            JSON.stringify(comp.configPropGroups || null),
+            JSON.stringify(comp.customTypes || null),
+            (comp.usedSharedModuleIds || []).slice().sort().join(","),
+            referencedHashes,
+        ].join("\0"));
+    }
+}
+function computeGlobalStyleHash(g) {
+    if (!g)
+        return undefined;
+    return sha256Hex([g.projectId, g.compiledCss].join("\0"));
+}
+/**
+ * Build a `component-update` payload's `sharedModules` array for one component: the chunks
+ * the editor needs to resolve this component's imports. We always include the full
+ * transitive set (cheap) so the editor never sees a missing chunk during a partial update.
+ */
+function sharedModulesForComponent(comp) {
+    if (!comp.usedSharedModuleIds || comp.usedSharedModuleIds.length === 0)
+        return undefined;
+    const out = [];
+    for (const id of comp.usedSharedModuleIds) {
+        const mod = compiledSharedModules.get(id);
+        if (mod)
+            out.push(mod);
+    }
+    return out.length > 0 ? out : undefined;
+}
+/**
+ * Diff current compile state against `lastBroadcast*` maps and decide what to send:
+ *
+ * - Nothing changed → no broadcast at all (this is the whole point — quiet rebuilds).
+ * - Exactly one component changed, no deletes, no global change → single
+ *   `component-update` (cheap, no full-state replay on the editor).
+ * - Anything more (multi-component, deletes, global style change) → one bundled
+ *   `initial-state`. We deliberately collapse multi-component changes into ONE message so
+ *   the editor doesn't tick through N sequential `markUpdating` / refresh cycles. The
+ *   editor's `autoSyncToTheme` uses `contentHash` to skip YJS writes for components that
+ *   didn't actually change, so the full-state payload only mutates what really moved.
+ *
+ * Newly-connecting editors always receive a full `initial-state` via `onRequestState` in
+ * websocket-server.ts and are independent of this path.
+ */
+function broadcastCompileDelta(wsServer) {
+    const currentGlobalHash = computeGlobalStyleHash(compiledGlobalStyles);
+    const globalStylesChanged = currentGlobalHash !== lastBroadcastGlobalStyleHash;
+    const changedComponentIds = [];
+    for (const [id, comp] of compiledComponents) {
+        const prev = lastBroadcastComponentHashes.get(id);
+        if (prev !== comp.contentHash)
+            changedComponentIds.push(id);
+    }
+    const deletedComponentIds = [];
+    for (const id of lastBroadcastComponentHashes.keys()) {
+        if (!compiledComponents.has(id))
+            deletedComponentIds.push(id);
+    }
+    let changedSharedCount = 0;
+    for (const [id, mod] of compiledSharedModules) {
+        if (lastBroadcastSharedHashes.get(id) !== mod.contentHash)
+            changedSharedCount++;
+    }
+    const result = {
+        changedComponents: changedComponentIds.length,
+        deletedComponents: deletedComponentIds.length,
+        changedSharedModules: changedSharedCount,
+        globalStylesChanged,
+    };
+    const nothingChanged = changedComponentIds.length === 0 &&
+        deletedComponentIds.length === 0 &&
+        !globalStylesChanged;
+    if (nothingChanged)
+        return result;
+    // Single-component edit fast path: avoid making the editor clear+refill its devComponents
+    // map and run autoSyncToTheme for every component. One targeted update is enough.
+    const canUseSingleUpdate = changedComponentIds.length === 1 &&
+        deletedComponentIds.length === 0 &&
+        !globalStylesChanged;
+    if (canUseSingleUpdate) {
+        const comp = compiledComponents.get(changedComponentIds[0]);
+        wsServer.broadcastComponentUpdate(comp, sharedModulesForComponent(comp));
+        lastBroadcastComponentHashes.set(comp.id, comp.contentHash);
+    }
+    else {
+        for (const id of deletedComponentIds) {
+            wsServer.broadcastComponentDeleted(id);
+            lastBroadcastComponentHashes.delete(id);
+        }
+        wsServer.broadcast({
+            type: "initial-state",
+            payload: {
+                components: getAllComponents(),
+                sharedModules: getAllSharedModules(),
+                globalStyles: compiledGlobalStyles,
+                timestamp: Date.now(),
+            },
+        });
+        lastBroadcastComponentHashes.clear();
+        for (const [id, comp] of compiledComponents) {
+            if (comp.contentHash)
+                lastBroadcastComponentHashes.set(id, comp.contentHash);
+        }
+    }
+    lastBroadcastSharedHashes.clear();
+    for (const [id, mod] of compiledSharedModules) {
+        if (mod.contentHash)
+            lastBroadcastSharedHashes.set(id, mod.contentHash);
+    }
+    lastBroadcastGlobalStyleHash = currentGlobalHash;
+    return result;
+}
 /**
  * Read and return the current config from disk
  */
@@ -323,7 +500,10 @@ function createEditorHandlers(configPath, getConfig, setConfig, wsServer) {
     const broadcastConfigChange = (componentId) => {
         const updated = rebuildCompiledComponentFromConfig(getConfig(), componentId);
         if (updated) {
-            wsServer.broadcastComponentUpdate(updated);
+            wsServer.broadcastComponentUpdate(updated, sharedModulesForComponent(updated));
+            if (updated.contentHash) {
+                lastBroadcastComponentHashes.set(updated.id, updated.contentHash);
+            }
         }
     };
     return {
@@ -441,6 +621,37 @@ function createEditorHandlers(configPath, getConfig, setConfig, wsServer) {
             writeGlobalTypesFile(config);
             console.log(chalk.green(`  Updated prop "${propName}" on ${component.name}`));
         },
+        onUpdatePropLocalization: async (componentId, propName, updates) => {
+            const config = getConfig();
+            const component = config.components.find((c) => c.id === componentId);
+            if (!component) {
+                throw new Error(`Component not found: ${componentId}`);
+            }
+            const prop = component.props.find((p) => p.name === propName);
+            if (!prop) {
+                throw new Error(`Prop "${propName}" not found on ${component.name}`);
+            }
+            // Patch ONLY studio-owned label fields; structural fields stay untouched.
+            const previousDescription = prop.description;
+            if (updates.displayName !== undefined)
+                prop.displayName = updates.displayName;
+            if (updates.description !== undefined)
+                prop.description = updates.description || undefined;
+            if (updates.translations !== undefined) {
+                prop.translations = updates.translations.length > 0 ? updates.translations : undefined;
+            }
+            writeConfig(configPath, config);
+            setConfig(config);
+            // `description` is the only label field that reaches generated types.ts (as a
+            // JSDoc comment); displayName/translations never affect TS output. Regenerate
+            // only when it actually changed to avoid fs churn on every label edit.
+            if (prop.description !== previousDescription) {
+                const componentDir = path.resolve(process.cwd(), path.dirname(component.entry));
+                fs.writeFileSync(path.join(componentDir, "types.ts"), generateTypesFile(component.name, component.props, component.type, cachedEditorTypes, cachedCustomTypes));
+                writeGlobalTypesFile(config);
+            }
+            console.log(chalk.green(`  Updated prop localization "${propName}" on ${component.name}`));
+        },
         onDeleteProp: async (componentId, propName) => {
             const config = getConfig();
             const component = config.components.find((c) => c.id === componentId);
@@ -511,11 +722,25 @@ function createEditorHandlers(configPath, getConfig, setConfig, wsServer) {
                 found.group.name = updates.name;
             if (updates.description !== undefined)
                 found.group.description = updates.description || undefined;
+            if (updates.translations !== undefined)
+                found.group.translations = updates.translations.length > 0 ? updates.translations : undefined;
             writeConfig(configPath, config);
             setConfig(config);
             broadcastConfigChange(componentId);
             console.log(chalk.green(`  Updated prop group "${propGroupId}" on ${component.name}`));
         },
+        onUpdateComponentLocalization: async (componentId, updates) => {
+            const config = getConfig();
+            const component = config.components.find((c) => c.id === componentId);
+            if (!component)
+                throw new Error(`Component not found: ${componentId}`);
+            if (updates.translations !== undefined)
+                component.translations = updates.translations.length > 0 ? updates.translations : undefined;
+            writeConfig(configPath, config);
+            setConfig(config);
+            broadcastConfigChange(componentId);
+            console.log(chalk.green(`  Updated display-label translations on ${component.name}`));
+        },
         onDeletePropGroup: async (componentId, propGroupId) => {
             const config = getConfig();
             const component = config.components.find((c) => c.id === componentId);
@@ -808,6 +1033,18 @@ async function startDevServer(opts = {}) {
     // Initial compilation of all components (multi-entry with code splitting)
     console.log(chalk.cyan("  Compiling components..."));
     await compileAllComponentsForDev(config);
+    // Seed the broadcast-hash maps so the first delta-broadcast after startup doesn't replay
+    // the initial state — newly-connecting editors get a full `initial-state` directly via
+    // `onRequestState`, independent of the delta path.
+    for (const [id, comp] of compiledComponents) {
+        if (comp.contentHash)
+            lastBroadcastComponentHashes.set(id, comp.contentHash);
+    }
+    for (const [id, mod] of compiledSharedModules) {
+        if (mod.contentHash)
+            lastBroadcastSharedHashes.set(id, mod.contentHash);
+    }
+    lastBroadcastGlobalStyleHash = computeGlobalStyleHash(compiledGlobalStyles);
     console.log("");
     // Start WebSocket server
     const wsServer = new DevServerWebSocket(DEV_SERVER_PORT);
@@ -848,16 +1085,15 @@ async function startDevServer(opts = {}) {
             console.log(chalk.yellow(`  Recompiling all (triggered by: ${triggeredBy})...`));
             const success = await compileAllComponentsForDev(config);
             if (success) {
-                // Send full state to all connected editors
-                wsServer.broadcast({
-                    type: "initial-state",
-                    payload: {
-                        components: getAllComponents(),
-                        sharedModules: getAllSharedModules(),
-                        globalStyles: compiledGlobalStyles,
-                        timestamp: Date.now(),
-                    },
-                });
+                const delta = broadcastCompileDelta(wsServer);
+                if (delta.changedComponents === 0 &&
+                    delta.deletedComponents === 0 &&
+                    !delta.globalStylesChanged) {
+                    console.log(chalk.gray("  No editor-visible changes (skipped broadcast)"));
+                }
+                else {
+                    console.log(chalk.cyan(`  Broadcast delta: ${delta.changedComponents} changed, ${delta.deletedComponents} deleted, ${delta.changedSharedModules} shared chunks changed${delta.globalStylesChanged ? ", globals updated" : ""}`));
+                }
             }
             else {
                 // Broadcast error for the triggering component if identifiable
@@ -874,20 +1110,39 @@ async function startDevServer(opts = {}) {
         if (normalizedPath === configPath) {
             console.log(chalk.yellow("\n  Config changed, reloading..."));
             try {
-                config = JSON.parse(fs.readFileSync(configPath, "utf-8"));
+                const prevConfig = config;
+                const newConfig = JSON.parse(fs.readFileSync(configPath, "utf-8"));
+                // Authoritative live translation push: detect external translation edits
+                // (e.g. an agent running `config set-prop-translation`) and apply them in the
+                // editor, overriding studio for that (entity, locale) only. Diffing against
+                // the in-memory config naturally suppresses echoes from the editor's own
+                // reverse-sync writes (those already updated in-memory, so prev == new).
+                const translationChanges = diffConfigTranslations(prevConfig.components, newConfig.components);
+                for (const change of translationChanges) {
+                    if (change.kind === "prop") {
+                        wsServer.broadcastApplyPropTranslation(change.componentId, change.propName, change.locale, change.translation);
+                    }
+                    else if (change.kind === "group") {
+                        wsServer.broadcastApplyPropGroupTranslation(change.componentId, change.propGroupId, change.locale, change.translation);
+                    }
+                    else {
+                        wsServer.broadcastApplyComponentTranslation(change.componentId, change.locale, change.translation);
+                    }
+                }
+                // Point-of-need guidance: this fires whether the change came from the
+                // `config *-translation` commands or a manual edit. It confirms the change
+                // synced (so it won't be "overwritten" by the editor) and names the canonical
+                // commands — independent of whether CLAUDE.md / docs are up to date.
+                if (translationChanges.length > 0) {
+                    console.log(chalk.cyan(`  ${translationChanges.length} translation change(s) pushed to the connected editor (live, authoritative).`));
+                    console.log(chalk.gray("  Manage label translations via the CLI (run `config --help`): config set-prop-translation / set-group-translation / remove-*-translation."));
+                }
+                config = newConfig;
                 cachedCustomTypes = config.customTypes || [];
                 writeGlobalTypesFile(config);
                 await compileAllComponentsForDev(config);
-                // Send full state to all connected editors
-                wsServer.broadcast({
-                    type: "initial-state",
-                    payload: {
-                        components: getAllComponents(),
-                        sharedModules: getAllSharedModules(),
-                        globalStyles: compiledGlobalStyles,
-                        timestamp: Date.now(),
-                    },
-                });
+                const delta = broadcastCompileDelta(wsServer);
+                console.log(chalk.cyan(`  Config reload delta: ${delta.changedComponents} changed, ${delta.deletedComponents} deleted, ${delta.changedSharedModules} shared chunks changed${delta.globalStylesChanged ? ", globals updated" : ""}`));
             }
             catch (e) {
                 console.error(chalk.red("  Failed to reload config"));
@@ -914,6 +1169,23 @@ async function startDevServer(opts = {}) {
             const entryPath = path.resolve(process.cwd(), component.entry);
             if (!fs.existsSync(entryPath)) {
                 compiledComponents.delete(component.id);
+                // Sync ikas.config.json: remove the component entry and strip any orphaned
+                // filteredComponentIds references in remaining components' props. Write config
+                // before broadcasting so an editor requesting state sees the post-delete view.
+                const idx = config.components.findIndex((c) => c.id === component.id);
+                if (idx !== -1) {
+                    config.components.splice(idx, 1);
+                    for (const remaining of config.components) {
+                        for (const prop of remaining.props || []) {
+                            if (!prop.filteredComponentIds)
+                                continue;
+                            prop.filteredComponentIds = prop.filteredComponentIds.filter((id) => id !== component.id);
+                            if (prop.filteredComponentIds.length === 0)
+                                delete prop.filteredComponentIds;
+                        }
+                    }
+                    writeConfig(configPath, config);
+                }
                 wsServer.broadcastComponentDeleted(component.id);
                 console.log(chalk.red(`  Component removed: ${component.name}`));
             }