blocks.ts Store Module -- Structure Analysis

Overview

src/store/modules/blocks.ts is the largest Vuex module in Application-Frontend at ~1384 lines (on the block-grouping branch). This document breaks down what's in it and identifies extraction opportunities.

Breakdown by Category

Category	Lines	%	Extractable?
Form input utilities	~471	34%	Yes -- pure functions
Slider template generators	~155	11%	Yes -- pure functions
Block group mutations	~200	14%	Partially (mutations stay, helpers extract)
Core mutations (add, remove, duplicate, reorder)	~300	22%	No -- Vuex mutations
Getters and state	~100	7%	No -- Vuex boilerplate
Block naming/ordering helpers	~80	6%	Yes -- pure functions
Imports and type definitions	~78	6%	No

Form Input Utilities (~471 lines)

These are pure functions with no Vuex dependency. They compute form input properties, generate display names, and manage the triple numbering system.

Functions:

• createFormInputBlock() -- creates a new form input sub-block with correct type, blockName, typeIndex, displayName
• calculateFormInputTypeIndex() -- finds next typeIndex for a given input type
• renumberFormInputDisplayNames() -- renumbers all form inputs after any mutation
• generateFormInputDisplayName() -- creates "Email #1", "Text #2" etc.
• getFormInputType() -- resolves input type from template or explicit type
• formInputDefaultsByType() -- returns default properties per input type (text, email, phone, date, time, number, checkbox, file, select, hidden, textarea)
• isDefaultDisplayName() -- checks if a displayName matches the auto-generated pattern
• uniquefyFormBlockNames() -- regenerates blockNames during duplication

Extraction target: src/store/utils/formBlockUtils.tsRisk: None -- pure functions, just move + re-export

Slider Template Generators (~155 lines)

Pure functions that create slider sub-block templates from presets.

Functions:

• createSliderTemplateBlocks() -- creates sub-blocks for a slider template
• uniquefySlideBlockNames() -- regenerates sub-block names during duplication
• generateSliderDefaults() -- creates default slider configuration
• Slide-specific template generators (basic slide, gallery, comparison, etc.)

Extraction target: src/store/utils/sliderBlockUtils.tsRisk: None -- pure functions

Block Group Mutations (~200 lines)

Mix of Vuex mutations and helper functions:

• getTopLevelBlocks() -- helper, extractable
• normalizeOrders() -- helper, extractable (removed entirely by fractional indexing)
• syncGroupChildren() -- helper, extractable
• createBlockGroup -- mutation, stays
• moveBlockToGroup -- mutation, stays
• moveBlockOutOfGroup -- mutation, stays
• ungroupBlocks -- mutation, stays

Extraction target: helpers to src/store/utils/blockGroupUtils.tsRisk: Low -- helpers are called by mutations but don't depend on Vuex state directly

Core Mutations (~300 lines)

These are the essential Vuex mutations that must stay in blocks.ts:

• addBlock -- creates blocks of any type
• removeBlock -- deletes blocks (with sub-block cascade)
• duplicateBlock -- deep clones with name regeneration
• updateBlockOrder -- reorders blocks (the most complex mutation)
• updateBlockValue -- sets individual block properties
• setCreativeBlocks -- loads blocks from backend
• setSelectedBlockPath -- tracks selected block in UI

Cannot be extracted -- they need direct access to Vuex state.

Block Naming/Ordering Helpers (~80 lines)

• generateVisualElementName() -- creates unique blockName + displayName
• getNextBlockOrder() -- finds the next order value for a new block
• fixBlockNameMismatches() -- repairs blockName vs property key divergence on load

Extraction target: src/store/utils/blockNamingUtils.tsRisk: None -- pure functions

After Extraction

File	Lines	Purpose
blocks.ts	~700	Vuex state, mutations, getters, actions
formBlockUtils.ts	~471	Form input creation, numbering, defaults
sliderBlockUtils.ts	~155	Slider template generation
blockGroupUtils.ts	~50	Group helper functions
blockNamingUtils.ts	~80	Block naming and ordering

blocks.ts drops from 1384 to ~700 lines -- a 49% reduction.

After Fractional Indexing (additional reduction)

The fractional indexing migration removes:

• normalizeOrders() function (~15 lines) + 6 call sites (~12 lines)
• Sort area index formula in updateBlockOrder (~20 lines, replaced with simpler logic)
• isValidSortLocation comparison (~15 lines)
• sortedBlocks getter mutation side effect (~8 lines)

Net: ~50 fewer lines in blocks.ts, but more importantly the remaining code is much simpler -- each mutation is self-contained instead of needing normalizeOrders as a cleanup step.

Recommended Extraction Order

1. Form utilities first (biggest, cleanest extraction)
2. Slider templates second (straightforward)
3. Block naming helpers third (small but useful)
4. Group helpers last (some will change with fractional indexing)

Each extraction can be its own commit. No behavior changes, just file organization.