component: Component,

drafts: Record<string, Layer[]> | undefined,

): ComponentVariant[] {

const variants = component.variants && component.variants.length > 0

? component.variants

: [{ id: generateId('cmpvar'), name: 'Default', layers: component.layers ?? [] }];

return variants.map(v => ({ ...v, layers: drafts?.[v.id] ?? v.layers }));

if (!component) return null;

const variants = component.variants;

if (variants && variants.length > 0) return variants[0].id;

return null;

const links = layer.componentOverrides?.variableLinks;

if (!links) return layer;

const filtered = { ...links };

let changed = false;

for (const [childId, parentId] of Object.entries(filtered)) {

if (parentId === targetVariableId) {

delete filtered[childId];

changed = true;

}

}

if (!changed) return layer;

return {

...layer,

componentOverrides: {

...layer.componentOverrides,

variableLinks: Object.keys(filtered).length > 0 ? filtered : undefined,

},

};

componentId: string,

layers: Layer[],

allComponents: Component[]

): void {

if (typeof window === 'undefined') return;

import('@/lib/client/thumbnail-capture').then(({ generateComponentThumbnail }) => {

generateComponentThumbnail(componentId, layers, allComponents).then((thumbnailUrl) => {

if (thumbnailUrl) {

const state = useComponentsStore.getState();

state.setComponents(

state.components.map((c) =>

c.id === componentId

? { ...c, thumbnail_url: thumbnailUrl, updated_at: new Date().toISOString() }

: c

)

);

}

});

}).catch((err) => console.error('Failed to generate thumbnail:', err));

components: Component[];

isLoading: boolean;

error: string | null;

/**

componentDrafts: ComponentDraftMap;

/**

componentDraftDirty: Record<string, boolean>;

isSaving: boolean;

saveTimeouts: Record<string, NodeJS.Timeout>;

affectedCount: number;

affectedEntities: Array<{

type: 'page' | 'component';

id: string;

name: string;

pageId?: string;

}>;

success: boolean;

affectedEntities?: Array<{

type: 'page' | 'component';

id: string;

name: string;

pageId?: string;

previousLayers: Layer[];

newLayers: Layer[];

}>;

// Data loading

setComponents: (components: Component[]) => void;

loadComponents: () => Promise<void>;

/**

applyServerComponent: (component: Component) => void;

// CRUD operations

createComponent: (name: string, layers: Layer[]) => Promise<Component | null>;

updateComponent: (id: string, updates: Partial<Pick<Component, 'name' | 'layers'>>) => Promise<void>;

deleteComponent: (id: string) => Promise<DeleteComponentResult>;

getDeletePreview: (id: string) => Promise<DeletePreviewInfo | null>;

// Draft management (for editing mode)

loadComponentDraft: (componentId: string) => Promise<void>;

updateComponentDraft: (componentId: string, variantId: string, layers: Layer[]) => void;

saveComponentDraft: (componentId: string) => Promise<void>;

clearComponentDraft: (componentId: string) => void;

/**

getComponentDraftLayers: (componentId: string, variantId?: string | null) => Layer[];

// Variant management

addVariant: (componentId: string, fromVariantId?: string | null) => Promise<string | null>;

renameVariant: (componentId: string, variantId: string, name: string) => Promise<void>;

duplicateVariant: (componentId: string, variantId: string) => Promise<string | null>;

deleteVariant: (componentId: string, variantId: string) => Promise<void>;

/** Persist a new ordering of a component's variants. Order matters because

reorderVariants: (componentId: string, orderedVariantIds: string[]) => Promise<void>;

// Convenience actions

renameComponent: (id: string, newName: string) => Promise<void>;

getComponentById: (id: string) => Component | undefined;

createComponentFromLayer: (componentId: string, layerId: string, componentName: string) => Promise<string | null>;

restoreComponents: (componentIds: string[]) => Promise<string[]>;

// Component variables

addTextVariable: (componentId: string, name: string) => Promise<string | null>;

addRichTextVariable: (componentId: string, name: string) => Promise<string | null>;

addImageVariable: (componentId: string, name: string) => Promise<string | null>;

addLinkVariable: (componentId: string, name: string) => Promise<string | null>;

addAudioVariable: (componentId: string, name: string) => Promise<string | null>;

addVideoVariable: (componentId: string, name: string) => Promise<string | null>;

addIconVariable: (componentId: string, name: string) => Promise<string | null>;

/** Add a `'variant'` typed variable. Variant variables expose a parent

addVariantVariable: (componentId: string, name: string) => Promise<string | null>;

updateTextVariable: (componentId: string, variableId: string, updates: { name?: string; placeholder?: string; default_value?: any }) => Promise<void>;

reorderVariables: (componentId: string, orderedIds: string[]) => Promise<void>;

deleteTextVariable: (componentId: string, variableId: string) => Promise<void>;

// Layer style operations

updateStyleOnLayers: (styleId: string, stylesById: Map<string, LayerStyle>) => void;

detachStyleFromAllLayers: (styleId: string, stylesById?: Map<string, LayerStyle>) => void;

// State management

setError: (error: string | null) => void;

clearError: () => void;

setSaving: (value: boolean) => void;

const { components, componentDrafts } = get();

const updatedComponents = components.map(component => {

const transformedVariants = (component.variants && component.variants.length > 0)

? component.variants.map(v => ({ ...v, layers: updateLayers(v.layers) }))

: undefined;

return {

...component,

layers: updateLayers(component.layers),

...(transformedVariants ? { variants: transformedVariants } : {}),

};

});

const updatedDrafts: ComponentDraftMap = {};

Object.entries(componentDrafts).forEach(([componentId, variantDrafts]) => {

updatedDrafts[componentId] = {};

Object.entries(variantDrafts).forEach(([variantId, layers]) => {

updatedDrafts[componentId][variantId] = updateLayers(layers);

});

});

set({ components: updatedComponents, componentDrafts: updatedDrafts });

const variants = component.variants && component.variants.length > 0

? component.variants

: [{ id: generateId('cmpvar'), name: 'Default', layers: component.layers ?? [] }];

// Rebuild the per-variant drafts so the open component canvas re-renders

// with the AI's changes. Deep-clone so later local edits don't mutate the

// stored component record.

const variantDrafts: Record<string, Layer[]> = {};

for (const variant of variants) {

variantDrafts[variant.id] = JSON.parse(JSON.stringify(variant.layers ?? []));

}

set((state) => ({

components: state.components.some((c) => c.id === component.id)

? state.components.map((c) => (c.id === component.id ? component : c))

: [component, ...state.components],

componentDrafts: {

...state.componentDrafts,

[component.id]: variantDrafts,

},

componentDraftDirty: {

...state.componentDraftDirty,

[component.id]: false,

},

}));

set({ isLoading: true, error: null });

try {

const response = await fetch('/ycode/api/components');

const result = await response.json();

if (result.error) {

set({ error: result.error, isLoading: false });

return;

}

set({ components: result.data || [], isLoading: false });

} catch (error) {

console.error('Failed to load components:', error);

set({ error: 'Failed to load components', isLoading: false });

}

set({ isLoading: true, error: null });

try {

const response = await fetch('/ycode/api/components', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({

name,

layers,

}),

});

const result = await response.json();

if (result.error) {

set({ error: result.error, isLoading: false });

return null;

}

const newComponent = result.data;

set((state) => ({

components: [newComponent, ...state.components],

isLoading: false,

}));

// Generate thumbnail in the background (fire-and-forget)

triggerThumbnailGeneration(newComponent.id, newComponent.layers, get().components);

return newComponent;

} catch (error) {

console.error('Failed to create component:', error);

set({ error: 'Failed to create component', isLoading: false });

return null;

}

set({ isLoading: true, error: null });

try {

const response = await fetch(`/ycode/api/components/${id}`, {

method: 'PUT',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify(updates),

});

const result = await response.json();

if (result.error) {

set({ error: result.error, isLoading: false });

return;

}

const updatedComponent = result.data;

set((state) => ({

components: state.components.map((c) => (c.id === id ? updatedComponent : c)),

isLoading: false,

}));

} catch (error) {

console.error('Failed to update component:', error);

set({ error: 'Failed to update component', isLoading: false });

}

try {

const response = await fetch(`/ycode/api/components/${id}`, {

method: 'PATCH',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ action: 'preview-delete' }),

});

const result = await response.json();

if (result.error) {

console.error('Failed to get delete preview:', result.error);

return null;

}

return result.data as DeletePreviewInfo;

} catch (error) {

console.error('Failed to get delete preview:', error);

return null;

}

set({ isLoading: true, error: null });

try {

const response = await fetch(`/ycode/api/components/${id}`, {

method: 'DELETE',

});

const result = await response.json();

if (result.error) {

set({ error: result.error, isLoading: false });

return { success: false };

}

const { component, affectedEntities } = result.data;

// Update pages store for affected pages

if (affectedEntities && affectedEntities.length > 0) {

const { usePagesStore } = await import('./usePagesStore');

const pagesStore = usePagesStore.getState();

for (const entity of affectedEntities) {

if (entity.type === 'page' && entity.pageId) {

// Update the page draft with new layers (component detached)

const currentDraft = pagesStore.draftsByPageId[entity.pageId];

if (currentDraft) {

pagesStore.setDraftLayers(entity.pageId, entity.newLayers);

}

} else if (entity.type === 'component') {

// Update component in local store

set((state) => ({

components: state.components.map((c) =>

c.id === entity.id ? { ...c, layers: entity.newLayers } : c

),

}));

// Also update component draft if it's currently being edited.

// The legacy `layers` field mirrors the primary variant, so the

// detached layers replace that variant's draft.

const currentDraft = get().componentDrafts[entity.id];

const primaryVariantId = getPrimaryVariantId(get().getComponentById(entity.id));

if (currentDraft && primaryVariantId) {

get().updateComponentDraft(entity.id, primaryVariantId, entity.newLayers);

}

}

}

// Record undo/redo versions for affected entities

const { recordVersionViaApi, initializeVersionTracking } = await import('@/lib/version-tracking');

const { useEditorStore } = await import('./useEditorStore');

// Get current editor state to check if any affected entity is currently being edited

const editorState = useEditorStore.getState();

const currentPageId = editorState.currentPageId;

const editingComponentId = editorState.editingComponentId;

const selectedLayerId = editorState.selectedLayerId;

const lastSelectedLayerId = editorState.lastSelectedLayerId;

// Helper: Find all layer IDs of component instances in a layer tree

const findComponentInstanceLayerIds = (layers: Layer[], componentId: string): string[] => {

const instanceIds: string[] = [];

const traverse = (layerList: Layer[]) => {

for (const layer of layerList) {

if (layer.componentId === componentId) {

instanceIds.push(layer.id);

}

if (layer.children && layer.children.length > 0) {

traverse(layer.children);

}

}

};

traverse(layers);

return instanceIds;

};

// Record versions with component requirement metadata

for (const entity of affectedEntities) {

// Note: Component requirements are now auto-detected from layers

// We still explicitly add the deleted component ID for clarity and as a safety measure

const metadata: any = {

requirements: {

component_ids: [id], // The deleted component must be restored before undoing

},

};

// Build prioritized selection list

const layerIds: string[] = [];

// If this entity is currently being edited, capture current selection first

const isCurrentlyEditing =

(entity.type === 'page' && entity.pageId === currentPageId) ||

(entity.type === 'component' && entity.id === editingComponentId);

if (isCurrentlyEditing) {

if (selectedLayerId) layerIds.push(selectedLayerId);

if (lastSelectedLayerId && lastSelectedLayerId !== selectedLayerId) {

layerIds.push(lastSelectedLayerId);

}

}

// Always add the component instance layer IDs that are being detached

// These will be restored when undoing, so they're good selection candidates

const componentInstanceIds = findComponentInstanceLayerIds(entity.previousLayers, id);

for (const instanceId of componentInstanceIds) {

if (!layerIds.includes(instanceId)) {

layerIds.push(instanceId);

}

}

// Store selection metadata if we have any layer IDs

if (layerIds.length > 0) {

metadata.selection = {

layer_ids: layerIds,

};

}

if (entity.type === 'page' && entity.pageId) {

// Initialize cache with previous state (before detachment) if not already cached

initializeVersionTracking('page_layers', entity.pageId, entity.previousLayers);

// Record version with new state (after detachment)

await recordVersionViaApi('page_layers', entity.pageId, entity.newLayers, metadata);

} else if (entity.type === 'component') {

// Initialize cache with previous state (before detachment) if not already cached

initializeVersionTracking('component', entity.id, entity.previousLayers);

// Record version with new state (after detachment)

await recordVersionViaApi('component', entity.id, entity.newLayers, metadata);

}

}

}

// Remove the component from local store

set((state) => ({

components: state.components.filter((c) => c.id !== id),

isLoading: false,

}));

return { success: true, affectedEntities };

} catch (error) {

console.error('Failed to delete component:', error);

set({ error: 'Failed to delete component', isLoading: false });

return { success: false };

}

const component = get().components.find((c) => c.id === componentId);

if (component) {

// Backfill a "Default" variant for components that pre-date the

// variants migration so the editor always has at least one entry.

const variants = component.variants && component.variants.length > 0

? component.variants

: [{ id: generateId('cmpvar'), name: 'Default', layers: component.layers ?? [] }];

const variantDrafts: Record<string, Layer[]> = {};

for (const variant of variants) {

variantDrafts[variant.id] = JSON.parse(JSON.stringify(variant.layers ?? []));

}

// Mark each variant as initializing BEFORE updating store to prevent

// false change detection. Undo/redo is scoped per variant.

try {

const { markEntityInitializing, updatePreviousState } = await import('@/hooks/use-undo-redo');

const { componentVersionEntityId } = await import('@/lib/version-tracking');

for (const variant of variants) {

const versionId = componentVersionEntityId(componentId, variant.id);

markEntityInitializing('component', versionId);

updatePreviousState('component', versionId, variantDrafts[variant.id]);

}

} catch (err) {

console.error('Failed to mark component as initializing:', err);

}

set((state) => ({

componentDrafts: {

...state.componentDrafts,

[componentId]: variantDrafts,

},

componentDraftDirty: {

...state.componentDraftDirty,

[componentId]: false,

},

}));

// Initialize version tracking with loaded state (per variant)

import('@/lib/version-tracking').then(({ initializeVersionTracking, componentVersionEntityId }) => {

for (const variant of variants) {

initializeVersionTracking(

'component',

componentVersionEntityId(componentId, variant.id),

variantDrafts[variant.id]

);

}

}).catch((err) => {

console.error('Failed to initialize component version tracking:', err);

});

}

set((state) => ({

componentDrafts: {

...state.componentDrafts,

[componentId]: {

...(state.componentDrafts[componentId] || {}),

[variantId]: layers,

},

},

componentDraftDirty: {

...state.componentDraftDirty,

[componentId]: true,

},

}));

// Clear existing timeout for this component

const { saveTimeouts } = get();

if (saveTimeouts[componentId]) {

clearTimeout(saveTimeouts[componentId]);

}

// Set new timeout for auto-save (500ms debounce)

const timeout = setTimeout(() => {

get().saveComponentDraft(componentId);

}, 500);

set((state) => ({

saveTimeouts: {

...state.saveTimeouts,

[componentId]: timeout,

},

}));

const component = get().components.find(c => c.id === componentId);

const drafts = get().componentDrafts[componentId];

const targetVariantId = variantId ?? getPrimaryVariantId(component);

if (drafts && targetVariantId && drafts[targetVariantId]) {

return drafts[targetVariantId];

}

// Fall back to persisted variant layers, then to the legacy `layers`.

if (component?.variants && component.variants.length > 0) {

const match = targetVariantId

? component.variants.find(v => v.id === targetVariantId)

: undefined;

return (match ?? component.variants[0]).layers ?? [];

}

return component?.layers ?? [];

const { componentDrafts, componentDraftDirty, components } = get();

const variantDrafts = componentDrafts[componentId];

if (!variantDrafts || Object.keys(variantDrafts).length === 0) {

console.warn(`No draft found for component ${componentId}`);

return;

}

// Skip the round-trip entirely when nothing has changed since the draft

// was loaded or last persisted.

if (!componentDraftDirty[componentId]) {

return;

}

const component = components.find(c => c.id === componentId);

if (!component) {

console.warn(`Component ${componentId} not found in store while saving draft`);

return;

}

// Rebuild the variants payload from the latest drafts. Variants the user

// never opened during this session keep their persisted layers.

const variantsBeingSaved = buildVariantsFromDrafts(component, variantDrafts);

// Snapshot the primary variant's layers for change-detection / undo.

const layersBeingSaved = variantsBeingSaved[0]?.layers ?? [];

set({ isSaving: true });

try {

const response = await fetch(`/ycode/api/components/${componentId}`, {

method: 'PUT',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ variants: variantsBeingSaved }),

});

const result = await response.json();

if (result.error) {

console.error('Failed to save component draft:', result.error);

set({ isSaving: false });

return;

}

const updatedComponent = result.data;

// Detect whether any variant changed during the save (e.g. undo/redo).

const currentDrafts = get().componentDrafts[componentId];

const currentVariantsJSON = JSON.stringify(buildVariantsFromDrafts(updatedComponent, currentDrafts));

const savedVariantsJSON = JSON.stringify(variantsBeingSaved);

if (currentVariantsJSON === savedVariantsJSON) {

set((state) => ({

components: state.components.map((c) => (c.id === componentId ? updatedComponent : c)),

componentDraftDirty: { ...state.componentDraftDirty, [componentId]: false },

isSaving: false,

}));

// Record a version per variant for undo/redo. Each variant has its

// own history; unchanged variants produce an empty patch and are

// skipped inside recordVersionViaApi.

import('@/lib/version-tracking').then(({ recordVersionViaApi, componentVersionEntityId }) => {

for (const variant of variantsBeingSaved) {

recordVersionViaApi(

'component',

componentVersionEntityId(componentId, variant.id),

variant.layers

);

}

}).catch((err) => {

console.error('Failed to record component version:', err);

});

} else {

// Variants changed mid-save — keep the local copy and let the next

// debounced save record the version.

set((state) => ({

components: state.components.map((c) => (c.id === componentId ? updatedComponent : c)),

isSaving: false,

}));

}

// Trigger component sync across all pages — pages render the primary

// variant for back-compat and per-instance variant resolution happens

// at render time.

if (typeof window !== 'undefined') {

window.dispatchEvent(new CustomEvent('componentUpdated', {

detail: { componentId, layers: layersBeingSaved }

}));

triggerThumbnailGeneration(componentId, layersBeingSaved, get().components);

}

// Regenerate CSS to include updated component classes. Collect layers

// from every variant so styles unique to a non-default variant are

// also captured. Run this off the critical path so navigation/UI is

// not blocked.

scheduleIdle(async () => {

try {

const { usePagesStore } = await import('./usePagesStore');

const { collectComponentIds } = await import('@/lib/component-utils');

// `collectComponentIds` (unlike `containsComponent`) also finds

// components embedded inside rich-text content and override text

// values, so a page that uses this component only inside a Rich

// Text block is still flagged for per-page CSS regeneration.

const referencesComponent = (layers: Layer[]) =>

collectComponentIds(layers).has(componentId);

const allDrafts = usePagesStore.getState().draftsByPageId;

const affectedPageIds: string[] = [];

Object.entries(allDrafts).forEach(([pid, pageDraft]) => {

if (pageDraft.layers && referencesComponent(pageDraft.layers)) {

affectedPageIds.push(pid);

}

});

if (affectedPageIds.length > 0) {

fetch('/ycode/api/css/generate-pages', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ pageIds: affectedPageIds }),

}).catch(() => {});

}

// Also regenerate global draft_css for builder preview.

// Start from all variant layers so non-default variant styles are

// included, then append affected page layers.

const { generateAndSaveCSS } = await import('@/lib/client/cssGenerator');

const allLayers: Layer[] = variantsBeingSaved.flatMap(v => v.layers);

Object.values(allDrafts).forEach((pageDraft) => {

if (pageDraft.layers && referencesComponent(pageDraft.layers)) {