@bagelink/vue 1.15.401 → 1.15.409

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.401",
+  "version": "1.15.409",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/form/inputs/DateInput.vue

@@ -275,6 +275,12 @@ function handleIconClick() {
 	isOpen.value = !isOpen.value
 }
 
+function confirmSelection() {
+	isTyping.value = false
+	syncInputValue()
+	isOpen.value = false
+}
+
 // Sync input display when date changes externally; coerce datetime → date-only.
 watch(() => selectedDate.value, (val) => {
 	const coerced = coerceDateOnlyValue(val)
@@ -335,6 +341,7 @@ onMounted(() => {
 						v-model="selectedDate" :min="min" :max="max" :mode="mode"
 						:firstDayOfWeek="firstDayOfWeek" :locale="locale" :enableTime="enableTime"
 						:range="range"
+						@confirm="confirmSelection"
 					/>
 				</div>
 			</Dropdown>

package/src/components/form/inputs/DatePicker.vue

@@ -39,7 +39,7 @@ const props = withDefaults(
 	},
 )
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'confirm'])
 
 // Tentative end date hovered during range selection
 const hoverDate = ref<Date | null>(null)
@@ -542,6 +542,7 @@ function selectDate(date: Date | null) {
 					layout="vertical" @update:modelValue="handleMinuteInput"
 				/>
 			</div>
+			<Btn value="OK" :disabled="!selectedDate" @click="emit('confirm')" />
 		</div>
 	</div>
 </template>

package/src/components/form/inputs/RichText/index.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
-import type { CustomToolbarButton, RichTextToolbarApi, ToolbarConfig } from './richTextTypes'
+import type { CustomToolbarButton, RichTextExtension, RichTextToolbarApi, ToolbarConfig } from './richTextTypes'
 import { CodeEditor, copyText, Btn, Dialog, BglVideo, Icon, Card, ColorInput, pathKeyToURL } from '@bagelink/vue'
 import { watch, onUnmounted, onBeforeUnmount, onMounted, ref, computed, useAttrs } from 'vue'
 import CheckInput from '../CheckInput.vue'
@@ -24,6 +24,7 @@ const props = defineProps<{
 	modelValue: string
 	toolbarConfig?: ToolbarConfig
 	customToolbarButtons?: CustomToolbarButton[]
+	extensions?: RichTextExtension[]
 	debug?: boolean
 	label?: string
 	height?: number | string
@@ -50,12 +51,23 @@ const props = defineProps<{
 	textColor?: string
 	// Font size
 	fontSize?: number | string
+	// Field-specific CSS injected into the editor iframe.
+	contentStyles?: string
 } & BagelInputShellProps>()
 
 const emit = defineEmits(['update:modelValue'])
 
 const { shellClass, shellStyle } = useBagelInputShell(props)
 const hasEditorValue = computed(() => Boolean(props.modelValue?.trim()))
+const extensionToolbarButtons = computed(() => props.extensions?.flatMap(extension => extension.toolbarButtons ?? []) ?? [])
+const effectiveCustomToolbarButtons = computed(() => [
+	...(props.customToolbarButtons ?? []),
+	...extensionToolbarButtons.value,
+])
+const effectiveContentStyles = computed(() => [
+	props.contentStyles,
+	...(props.extensions?.map(extension => extension.contentStyles) ?? []),
+].filter(Boolean).join('\n'))
 
 const attrs = useAttrs()
 
@@ -3294,13 +3306,14 @@ function updateIframeColors() {
 			color: inherit !important;
 			font-size: inherit !important;
 		}
+			${effectiveContentStyles.value}
 	`
 
 	styleElement.textContent = css
 }
 
 // Watch for theme changes and update iframe colors
-watch([currentInputColor, currentTextColor, currentFontFamily], () => {
+watch([currentInputColor, currentTextColor, currentFontFamily, effectiveContentStyles], () => {
 	if (hasInitialized.value) {
 		updateIframeColors()
 	}
@@ -3423,7 +3436,7 @@ const imgTransform = computed({
 				<template #end>
 					<slot name="toolbar-end" :api="toolbarApi">
 						<Btn
-							v-for="button in customToolbarButtons"
+							v-for="button in effectiveCustomToolbarButtons"
 							:key="button.name"
 							v-tooltip="button.label"
 							:icon="button.icon"

package/src/components/form/inputs/RichText/richTextTypes.ts

@@ -77,6 +77,20 @@ export interface CustomToolbarButton {
 	action: (api: RichTextToolbarApi) => void
 }
 
+/**
+ * A reusable editor capability. Extensions can add toolbar actions and the CSS
+ * needed to preview their generated HTML inside the editor iframe.
+ */
+export interface RichTextExtension {
+	name: string
+	toolbarButtons?: CustomToolbarButton[]
+	contentStyles?: string
+}
+
+export function defineRichTextExtension<T extends RichTextExtension>(extension: T): T {
+	return extension
+}
+
 export interface ToolbarOption {
 	name: string
 	label?: string

package/src/components/form/inputs/index.ts

@@ -15,7 +15,8 @@ export { default as PasswordInput } from './PasswordInput.vue'
 export { default as RadioGroup } from './RadioGroup.vue'
 export { default as RangeInput } from './RangeInput.vue'
 export { default as RichText } from './RichText/index.vue'
-export type { CustomToolbarButton, RichTextToolbarApi } from './RichText/richTextTypes'
+export { defineRichTextExtension } from './RichText/richTextTypes'
+export type { CustomToolbarButton, RichTextExtension, RichTextToolbarApi } from './RichText/richTextTypes'
 export { default as SelectBtn } from './SelectBtn.vue'
 export { default as SelectInput } from './SelectInput.vue'
 export { default as SignaturePad } from './SignaturePad.vue'

package/src/form-flow/FormFlow.vue

@@ -23,6 +23,9 @@ import Divider from '../components/layout/Divider.vue'
 import { useI18n, resolveI18n } from '../i18n'
 import { evaluateQuery } from '../utils/queryFilter'
 import { EMAIL_REGEX } from '../utils/constants'
+import {
+	classToGridSpans,
+} from './grid-classes'
 
 export type FormState = 'idle' | 'submitting' | 'success' | 'error'
 
@@ -220,6 +223,23 @@ const visibleFields = computed(() => {
 	return fields
 })
 
+function fieldLayoutStyle(field: FieldBuilder): Record<string, string> | undefined {
+	if (!props.schema._class?.split(/\s+/).includes('free-grid')) return undefined
+	const {
+		rowStart,
+		rowSpan,
+		mRowStart: mobileRowStart,
+		mRowSpan: mobileRowSpan,
+	} = classToGridSpans(field._class)
+	if (!rowStart && !mobileRowStart && !rowSpan && !mobileRowSpan) return undefined
+	return {
+		...(rowStart ? { '--bgl-grid-row-start': String(rowStart) } : {}),
+		...(mobileRowStart ? { '--bgl-mobile-grid-row-start': String(mobileRowStart) } : {}),
+		...(rowSpan ? { '--bgl-grid-row-span': String(rowSpan) } : {}),
+		...(mobileRowSpan ? { '--bgl-mobile-grid-row-span': String(mobileRowSpan) } : {}),
+	}
+}
+
 function updateField(key: string, value: any, field: FieldBuilder) {
 	setNestedValue(formData.value, key, value)
 	if (formState.value === 'success' || formState.value === 'error') {
@@ -338,6 +358,7 @@ const mergedErrors = computed(() => {
 function getFieldProps(field: FieldBuilder, key: string) {
 	const label = generateLabel(key, field)
 	const { helpText, ...configRest } = field._config
+	const freeGrid = props.schema._class?.split(/\s+/).includes('free-grid') ?? false
 	const baseProps: any = {
 		label,
 		'modelValue': getFieldValue(key),
@@ -357,6 +378,21 @@ function getFieldProps(field: FieldBuilder, key: string) {
 		baseProps.multiselect = true
 	}
 
+	if (freeGrid && field._type === 'richtext') {
+		baseProps.fullHeight = true
+	}
+
+	if (
+		freeGrid
+		&& (field._type === 'upload' || field._type === 'file')
+	) {
+		// In free-grid, row span owns the field height. Ignore a persisted
+		// fixed upload height so the preview grows and shrinks with its cell.
+		baseProps.height = field._config.hideLabel
+			? '100%'
+			: 'calc(100% - 1.75rem)'
+	}
+
 	// Function option loaders get the live form data as a 2nd arg so options can
 	// depend on sibling fields (e.g. `model` filtered by the selected `provider`).
 	// SelectInput/useSearch only re-run the loader on search-term change; a change
@@ -502,7 +538,12 @@ defineExpose({
 			<slot name="success" :form-data="formData" />
 		</template>
 		<template v-else>
-			<div v-for="{ key, field } in visibleFields" :key="fieldKey(key, field)" :class="[field._class, field._config.class]">
+			<div
+				v-for="{ key, field } in visibleFields"
+				:key="fieldKey(key, field)"
+				:class="[field._class, field._config.class]"
+				:style="fieldLayoutStyle(field)"
+			>
 				<!-- Custom slot for specific field -->
 				<slot
 					:name="`field:${key}`"

package/src/form-flow/form-flow.ts

@@ -10,7 +10,7 @@
 
 import type { Component } from 'vue'
 import type { IconType } from '../types'
-import type { CustomToolbarButton } from '../components/form/inputs/RichText/richTextTypes'
+import type { CustomToolbarButton, RichTextExtension } from '../components/form/inputs/RichText/richTextTypes'
 import { getOptionValue } from '../utils/options'
 
 // ============================================================================
@@ -298,8 +298,8 @@ export const $ = {
 	},
 
 	richtext(
-		labelOrConfig?: string | (BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean, fontSize?: number | string, customToolbarButtons?: CustomToolbarButton[] }),
-		config?: BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean, fontSize?: number | string, customToolbarButtons?: CustomToolbarButton[] }
+		labelOrConfig?: string | (BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean, fontSize?: number | string, customToolbarButtons?: CustomToolbarButton[], contentStyles?: string, extensions?: RichTextExtension[] }),
+		config?: BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean, fontSize?: number | string, customToolbarButtons?: CustomToolbarButton[], contentStyles?: string, extensions?: RichTextExtension[] }
 	): FieldBuilder<string> {
 		return new Field('richtext', parseArgs(labelOrConfig, config))
 	},
@@ -1365,11 +1365,18 @@ export {
 	DEFAULT_ROW_SPAN,
 	colSpanToClass,
 	colStartToClass,
+	mColStartToClass,
 	mColSpanToClass,
+	mRowStartToClass,
+	mRowSpanToClass,
 	rowSpanToClass,
 	classToColSpan,
 	classToColStart,
+	classToMColStart,
 	classToMColSpan,
+	classToMRowStart,
+	classToMRowSpan,
+	classToRowStart,
 	classToRowSpan,
 	classToGridSpans,
 	stripGridClasses,

package/src/form-flow/grid-classes.ts

@@ -8,7 +8,11 @@
  *   Desktop column span:  col-{1..12}/12   (e.g. col-6/12 = span 6)
  *   Desktop column start: start-col-{1..12}
  *   Mobile column span:   m_col-{1..12}/12
- *   Row span:             span-row-{1..12} (e.g. span-row-2 = span 2 rows)
+ *   Desktop row start:    start-row-{1..N}
+ *   Row span:             span-row-{1..N} (e.g. span-row-2 = span 2 rows)
+ *   Mobile column start:  m_start-col-{1..12}
+ *   Mobile row start:     m_start-row-{1..N}
+ *   Mobile row span:      m_span-row-{1..N}
  *
  * These helpers round-trip cleanly so the same class string renders identically
  * in FormFlow and the form builder, and survives storage as JSON Schema.
@@ -23,7 +27,11 @@ export const DEFAULT_ROW_SPAN = 1
 const COL_RE = /^col-(\d{1,2})\/12$/
 const COL_START_RE = /^start-col-(\d{1,2})$/
 const M_COL_RE = /^m_col-(\d{1,2})\/12$/
-const ROW_RE = /^(?:grid-)?span-row-(\d{1,2})$/
+const ROW_START_RE = /^start-row-(\d+)$/
+const ROW_RE = /^(?:grid-)?span-row-(\d+)$/
+const M_COL_START_RE = /^m_start-col-(\d{1,2})$/
+const M_ROW_START_RE = /^m_start-row-(\d+)$/
+const M_ROW_RE = /^m_(?:grid-)?span-row-(\d+)$/
 
 // Fraction aliases (col-1/2, col-2/3, ...) map to a canonical numeric span.
 const FRACTION_TO_SPAN: Record<string, number> = {
@@ -50,6 +58,10 @@ function clampSpan(span: number): number {
 	return Math.max(1, Math.min(GRID_COLS, Math.round(span)))
 }
 
+function normalizeRowSpan(span: number): number {
+	return Math.max(1, Math.round(span))
+}
+
 /** Desktop column span -> canonical class (e.g. 6 -> "col-6/12"). */
 export function colSpanToClass(span: number): string {
 	return `col-${clampSpan(span)}/12`
@@ -67,7 +79,24 @@ export function mColSpanToClass(span: number): string {
 
 /** Row span -> canonical class (e.g. 2 -> "span-row-2"). */
 export function rowSpanToClass(span: number): string {
-	return `span-row-${clampSpan(span)}`
+	return `span-row-${normalizeRowSpan(span)}`
+}
+
+/** Desktop starting row -> canonical class (e.g. 4 -> "start-row-4"). */
+export function rowStartToClass(start: number): string {
+	return `start-row-${Math.max(1, Math.round(start))}`
+}
+
+export function mColStartToClass(start: number): string {
+	return `m_start-col-${clampSpan(start)}`
+}
+
+export function mRowStartToClass(start: number): string {
+	return `m_start-row-${Math.max(1, Math.round(start))}`
+}
+
+export function mRowSpanToClass(span: number): string {
+	return `m_span-row-${normalizeRowSpan(span)}`
 }
 
 // ─── class -> span ───────────────────────────────────────────────────────────
@@ -105,12 +134,49 @@ export function classToMColSpan(cls: string | undefined): number | undefined {
 	return undefined
 }
 
+export function classToMColStart(cls: string | undefined): number | undefined {
+	if (!cls) return undefined
+	for (const token of cls.split(/\s+/)) {
+		const match = token.match(M_COL_START_RE)
+		if (match) return clampSpan(Number(match[1]))
+	}
+	return undefined
+}
+
 /** Parse the first row span found in a class string, if any. */
 export function classToRowSpan(cls: string | undefined): number | undefined {
 	if (!cls) return undefined
 	for (const token of cls.split(/\s+/)) {
 		const m = token.match(ROW_RE)
-		if (m) return clampSpan(Number(m[1]))
+		if (m) return normalizeRowSpan(Number(m[1]))
+	}
+	return undefined
+}
+
+/** Parse the first desktop starting row found in a class string, if any. */
+export function classToRowStart(cls: string | undefined): number | undefined {
+	if (!cls) return undefined
+	for (const token of cls.split(/\s+/)) {
+		const match = token.match(ROW_START_RE)
+		if (match) return Math.max(1, Number(match[1]))
+	}
+	return undefined
+}
+
+export function classToMRowStart(cls: string | undefined): number | undefined {
+	if (!cls) return undefined
+	for (const token of cls.split(/\s+/)) {
+		const match = token.match(M_ROW_START_RE)
+		if (match) return Math.max(1, Number(match[1]))
+	}
+	return undefined
+}
+
+export function classToMRowSpan(cls: string | undefined): number | undefined {
+	if (!cls) return undefined
+	for (const token of cls.split(/\s+/)) {
+		const match = token.match(M_ROW_RE)
+		if (match) return normalizeRowSpan(Number(match[1]))
 	}
 	return undefined
 }
@@ -127,7 +193,11 @@ export function stripGridClasses(cls: string | undefined): string {
 			!COL_RE.test(t)
 			&& !COL_START_RE.test(t)
 			&& !M_COL_RE.test(t)
+			&& !ROW_START_RE.test(t)
 			&& !ROW_RE.test(t)
+			&& !M_COL_START_RE.test(t)
+			&& !M_ROW_START_RE.test(t)
+			&& !M_ROW_RE.test(t)
 			&& !(t in FRACTION_TO_SPAN)
 			&& !(t in M_FRACTION_TO_SPAN),
 		)
@@ -137,8 +207,12 @@ export function stripGridClasses(cls: string | undefined): string {
 export interface GridSpans {
 	colSpan?: number
 	colStart?: number
+	rowStart?: number
 	rowSpan?: number
 	mColSpan?: number
+	mColStart?: number
+	mRowStart?: number
+	mRowSpan?: number
 }
 
 /**
@@ -155,12 +229,24 @@ export function applyGridClasses(cls: string | undefined, spans: GridSpans): str
 	if (spans.colStart !== undefined) {
 		parts.push(colStartToClass(spans.colStart))
 	}
+	if (spans.rowStart !== undefined) {
+		parts.push(rowStartToClass(spans.rowStart))
+	}
 	if (spans.rowSpan !== undefined && spans.rowSpan !== DEFAULT_ROW_SPAN) {
 		parts.push(rowSpanToClass(spans.rowSpan))
 	}
 	if (spans.mColSpan !== undefined && spans.mColSpan !== DEFAULT_COL_SPAN) {
 		parts.push(mColSpanToClass(spans.mColSpan))
 	}
+	if (spans.mColStart !== undefined) {
+		parts.push(mColStartToClass(spans.mColStart))
+	}
+	if (spans.mRowStart !== undefined) {
+		parts.push(mRowStartToClass(spans.mRowStart))
+	}
+	if (spans.mRowSpan !== undefined && spans.mRowSpan !== DEFAULT_ROW_SPAN) {
+		parts.push(mRowSpanToClass(spans.mRowSpan))
+	}
 	return parts.join(' ')
 }
 
@@ -169,7 +255,11 @@ export function classToGridSpans(cls: string | undefined): GridSpans {
 	return {
 		colSpan: classToColSpan(cls),
 		colStart: classToColStart(cls),
+		rowStart: classToRowStart(cls),
 		rowSpan: classToRowSpan(cls),
 		mColSpan: classToMColSpan(cls),
+		mColStart: classToMColStart(cls),
+		mRowStart: classToMRowStart(cls),
+		mRowSpan: classToMRowSpan(cls),
 	}
 }

package/src/form-flow/schema-fields.ts

@@ -10,7 +10,11 @@ import {
 	applyGridClasses,
 	classToColSpan,
 	classToColStart,
+	classToMColStart,
 	classToMColSpan,
+	classToMRowStart,
+	classToMRowSpan,
+	classToRowStart,
 	classToRowSpan,
 	stripGridClasses,
 } from './grid-classes'
@@ -53,10 +57,18 @@ export interface FormField {
 	colSpan?: number
 	/** Desktop starting column (1-12). Persisted as `start-col-N`. */
 	colStart?: number
-	/** Row span (1-12, default 1). Persisted as `span-row-N`. */
+	/** Desktop starting row (1+). Persisted as `start-row-N`. */
+	rowStart?: number
+	/** Row span (1+, default 1). Persisted as `span-row-N`. */
 	rowSpan?: number
 	/** Mobile column span (1-12, default 12). Persisted as `m_col-N/12`. */
 	mColSpan?: number
+	/** Mobile starting column (1-12). Persisted as `m_start-col-N`. */
+	mColStart?: number
+	/** Mobile starting row (1+). Persisted as `m_start-row-N`. */
+	mRowStart?: number
+	/** Mobile row span (1+). Persisted as `m_span-row-N`. */
+	mRowSpan?: number
 	/** User-authored (non-grid) classes preserved alongside layout classes. */
 	class?: string
 	hideLabel?: boolean
@@ -247,8 +259,12 @@ export function schemaToFields(schema: JSONSchemaObject | undefined): FormField[
 			required: requiredSet.has(key) || undefined,
 			colSpan: classToColSpan(uiClass) ?? 12,
 			colStart: classToColStart(uiClass),
+			rowStart: classToRowStart(uiClass),
 			rowSpan: classToRowSpan(uiClass) ?? defaultRowSpan(type),
 			mColSpan: classToMColSpan(uiClass) ?? 12,
+			mColStart: classToMColStart(uiClass),
+			mRowStart: classToMRowStart(uiClass),
+			mRowSpan: classToMRowSpan(uiClass),
 			class: stripGridClasses(uiClass) || undefined,
 			hideLabel: prop['x-hide-label'] ?? false,
 			condition: prop['x-ui']?.condition || undefined,
@@ -296,7 +312,10 @@ export function schemaToFields(schema: JSONSchemaObject | undefined): FormField[
 
 // ─── Fields → Schema ─────────────────────────────────────────────────────────
 
-export function fieldsToSchema(fields: FormField[]): JSONSchemaObject {
+export function fieldsToSchema(
+	fields: FormField[],
+	options: { freeGrid?: boolean } = {},
+): JSONSchemaObject {
 	const properties: Record<string, JSONSchemaProperty> = {}
 	const required: string[] = []
 
@@ -392,13 +411,21 @@ export function fieldsToSchema(fields: FormField[]): JSONSchemaObject {
 		// Options
 		if (field.validation?.options) prop['x-options'] = field.validation.options
 
-		// Layout — encoded as grid utility classes inside x-ui.class, merged
-		// with any user-authored classes. Row default is field-type dependent.
+		const rowSpan = field.rowSpan ?? defaultRowSpan(field.type)
+		// Free-grid needs every multi-row default persisted because the live
+		// renderer owns fixed row geometry. Flow forms preserve the prior
+		// behavior and omit field-type defaults.
 		const layoutClass = applyGridClasses(field.class, {
 			colSpan: field.colSpan,
 			colStart: field.colStart,
-			rowSpan: field.rowSpan === defaultRowSpan(field.type) ? undefined : field.rowSpan,
+			rowStart: field.rowStart,
+			rowSpan: options.freeGrid
+				? (rowSpan > 1 ? rowSpan : undefined)
+				: (rowSpan === defaultRowSpan(field.type) ? undefined : rowSpan),
 			mColSpan: field.mColSpan,
+			mColStart: field.mColStart,
+			mRowStart: field.mRowStart,
+			mRowSpan: field.mRowSpan,
 		})
 		if (layoutClass) prop['x-ui'] = { ...prop['x-ui'], class: layoutClass }
 

package/src/styles/inputs.css

@@ -509,6 +509,22 @@ select {
     row-gap: 0.5rem;
 }
 
+.grid-form.free-grid {
+    grid-auto-rows: 72px;
+}
+
+.grid-form.free-grid > * {
+    grid-row-start: var(--bgl-grid-row-start, auto);
+    grid-row-end: span var(--bgl-grid-row-span, 1);
+    min-height: 0;
+}
+
+.grid-form.free-grid > * > .bagel-input {
+    height: 100%;
+    min-height: 0;
+    margin-bottom: 0;
+}
+
 .grid-form.thin .bagel-input,
 .grid-form.dense .bagel-input {
     margin-bottom: 0;
@@ -620,6 +636,11 @@ select {
 }
 
 @media screen and (max-width: 910px) {
+    .grid-form.free-grid > * {
+        grid-row-start: var(--bgl-mobile-grid-row-start, var(--bgl-grid-row-start, auto));
+        grid-row-end: span var(--bgl-mobile-grid-row-span, var(--bgl-grid-row-span, 1));
+    }
+
     .bagel-input.wider input {
         min-width: 120px;
     }
@@ -717,4 +738,17 @@ select {
     .m_col-12\/12 {
         grid-column: span 12 !important;
     }
+
+    .grid-form.free-grid .m_start-col-1 { grid-column-start: 1 !important; }
+    .grid-form.free-grid .m_start-col-2 { grid-column-start: 2 !important; }
+    .grid-form.free-grid .m_start-col-3 { grid-column-start: 3 !important; }
+    .grid-form.free-grid .m_start-col-4 { grid-column-start: 4 !important; }
+    .grid-form.free-grid .m_start-col-5 { grid-column-start: 5 !important; }
+    .grid-form.free-grid .m_start-col-6 { grid-column-start: 6 !important; }
+    .grid-form.free-grid .m_start-col-7 { grid-column-start: 7 !important; }
+    .grid-form.free-grid .m_start-col-8 { grid-column-start: 8 !important; }
+    .grid-form.free-grid .m_start-col-9 { grid-column-start: 9 !important; }
+    .grid-form.free-grid .m_start-col-10 { grid-column-start: 10 !important; }
+    .grid-form.free-grid .m_start-col-11 { grid-column-start: 11 !important; }
+    .grid-form.free-grid .m_start-col-12 { grid-column-start: 12 !important; }
 }