@bagelink/vue 1.12.16 → 1.12.23

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.12.16",
+  "version": "1.12.23",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -90,7 +90,7 @@
     "signature_pad": "^5.0.9",
     "vue-i18n": "^11.2.8",
     "vue-toastification": "^2.0.0-rc.5",
-    "@bagelink/utils": "1.12.16"
+    "@bagelink/utils": "1.12.23"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/Pagination.vue

@@ -231,7 +231,7 @@ const renderPageButtons = computed(() => {
 	height: 30px;
 	background-color: var(--bgl-primary);
 	transition: all 0.3s ease;
-	z-index: -1;
+	/* z-index: -1; */
 }
 
 .selected {

package/src/components/calendar/CalendarTypes.ts

@@ -14,11 +14,22 @@ export type CalendarView = 'Week' | 'Month' | 'Day' | 'Agenda'
 
 export type WeekStart = 'Sunday' | 'Monday'
 
+export interface AvailabilitySlot {
+	start_time: Date
+	end_time: Date
+}
+
 export interface CalendarProps {
 	events?: CalendarEvent[]
 	startDate?: Date
 	view?: CalendarView
 	weekStart?: WeekStart
+	/** When true, renders availability blocks on the week grid */
+	availabilityMode?: boolean
+	/** When true, allows drag-to-paint editing of availability (requires availabilityMode) */
+	availabilityEditable?: boolean
+	/** Existing availability slots to display as painted blocks */
+	availabilitySlots?: AvailabilitySlot[]
 }
 
 export interface CalendarViewState {

package/src/components/calendar/Index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
-import type { CalendarEvent, CalendarProps, CalendarView, CalendarViewState } from './CalendarTypes'
+import type { AvailabilitySlot, CalendarEvent, CalendarView, CalendarViewState, WeekStart } from './CalendarTypes'
 import { timeDelta, Btn, ListItem, Dropdown, formatDate } from '@bagelink/vue'
 import { ref, computed, onMounted } from 'vue'
 import CalendarPopover from './CalendarPopover.vue'
@@ -9,11 +9,22 @@ import DayView from './views/DayView.vue'
 import MonthView from './views/MonthView.vue'
 import WeekView from './views/WeekView.vue'
 
-const props = withDefaults(defineProps<CalendarProps>(), {
+const props = withDefaults(defineProps<{
+	events?: CalendarEvent[]
+	startDate?: Date
+	view?: CalendarView
+	weekStart?: WeekStart
+	availabilityMode?: boolean
+	availabilityEditable?: boolean
+	availabilitySlots?: AvailabilitySlot[]
+}>(), {
 	startDate: () => new Date(),
 	view: 'Week',
 	weekStart: 'Sunday',
-	events: () => []
+	events: () => [],
+	availabilityMode: false,
+	availabilityEditable: false,
+	availabilitySlots: () => []
 })
 
 const emit = defineEmits<{
@@ -24,6 +35,7 @@ const emit = defineEmits<{
 	(e: 'dateChange', changeEvent: CalendarViewState): void
 	(e: 'viewChange', changeEvent: CalendarViewState): void
 	(e: 'ready', changeEvent: CalendarViewState): void
+	(e: 'availabilityChange', slots: AvailabilitySlot[]): void
 }>()
 
 const currentDate = ref(new Date(props.startDate))
@@ -117,7 +129,14 @@ defineExpose({
 	closePopover
 })
 
-onMounted(() => { emit('ready', state.value) })
+onMounted(() => {
+	console.log('[Calendar] props:', {
+		availabilityMode: props.availabilityMode,
+		availabilityEditable: props.availabilityEditable,
+		availabilitySlots: props.availabilitySlots?.length
+	})
+	emit('ready', state.value)
+})
 </script>
 
 <template>
@@ -144,8 +163,10 @@ onMounted(() => { emit('ready', state.value) })
 		</div>
 		<component
 			:is="views[currentView]" :events="events" :start-date="currentDate" :week-start="weekStart"
+			:availability-mode="props.availabilityMode" :availability-editable="props.availabilityEditable" :availability-slots="props.availabilitySlots"
 			@event-click="handleEventClick" @event-create="handleEventCreate" @event-update="handleEventUpdate"
 			@event-delete="handleEventDelete" @date-change="handleDateChange" @open-popover="openPopover"
+			@availability-change="(slots: AvailabilitySlot[]) => emit('availabilityChange', slots)"
 		>
 			<template #eventContent="{ event, close }">
 				<slot name="eventContent" :event="event" :close="close" />

package/src/components/calendar/views/WeekView.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { SetupContext, ComponentPublicInstance } from 'vue'
-import type { CalendarEvent, WeekStart } from '../CalendarTypes'
+import type { AvailabilitySlot, CalendarEvent, WeekStart } from '../CalendarTypes'
 import { formatDate } from '@bagelink/vue'
-import { ref, computed, onMounted, onUnmounted, useSlots, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, useSlots, nextTick, watch } from 'vue'
 
 interface WeekViewEvent extends CalendarEvent {
 	top: number
@@ -17,16 +17,23 @@ const props = withDefaults(defineProps<{
 	events?: CalendarEvent[]
 	startDate?: Date
 	weekStart?: WeekStart
+	availabilityMode?: boolean
+	availabilityEditable?: boolean
+	availabilitySlots?: AvailabilitySlot[]
 }>(), {
 	startDate: () => new Date(),
 	weekStart: 'Sunday',
-	events: () => []
+	events: () => [],
+	availabilityMode: false,
+	availabilityEditable: false,
+	availabilitySlots: () => []
 })
 
 const emit = defineEmits<{
 	(e: 'eventClick', event: CalendarEvent): void
 	(e: 'eventCreate', event: { start_time: Date, end_time: Date }): void
 	(e: 'openPopover', event: CalendarEvent, position?: { top: number, left: number }): void
+	(e: 'availabilityChange', slots: AvailabilitySlot[]): void
 }>()
 
 const slots: SetupContext['slots'] = useSlots()
@@ -52,16 +59,24 @@ const dragState = ref({
 	endTime: undefined as Date | undefined
 })
 
-// Time indicators
-const currentTimeTop = ref(0)
-const isToday = ref(false)
-const currentTimeInterval = ref<any>()
+// ===== AVAILABILITY MODE =====
+const AVAILABILITY_SNAP_MINUTES = 30
+const localAvailability = ref<AvailabilitySlot[]>([])
+const availDragState = ref({
+	isDragging: false,
+	mode: 'add' as 'add' | 'remove',
+	dayIndex: -1,
+	startMinute: 0,
+	currentMinute: 0
+})
 
-const timeSlotsContainer = ref<HTMLElement>()
-const calendarGrid = ref<HTMLElement>()
-const dayColumns = ref<HTMLElement[]>([])
-const dayColumnsContainer = ref<HTMLElement>()
-const scrollableContainer = ref<HTMLElement>()
+// Sync external availability slots to local state
+watch(() => props.availabilitySlots, (slots) => {
+	localAvailability.value = slots.map(s => ({
+		start_time: new Date(s.start_time),
+		end_time: new Date(s.end_time)
+	}))
+}, { immediate: true })
 
 // Calculate week days based on start date and week start preference
 const weekDays = computed(() => {
@@ -83,19 +98,197 @@ const weekDays = computed(() => {
 	return days
 })
 
+function snapMinutes(minutes: number): number {
+	return Math.round(minutes / AVAILABILITY_SNAP_MINUTES) * AVAILABILITY_SNAP_MINUTES
+}
+
+function getAvailabilitySlotsForDay(day: Date) {
+	return localAvailability.value.filter((slot) => {
+		const slotDate = new Date(slot.start_time)
+		return slotDate.getFullYear() === day.getFullYear()
+			&& slotDate.getMonth() === day.getMonth()
+			&& slotDate.getDate() === day.getDate()
+	}).map((slot) => {
+		const startMinutes = new Date(slot.start_time).getHours() * 60 + new Date(slot.start_time).getMinutes()
+		const endMinutes = new Date(slot.end_time).getHours() * 60 + new Date(slot.end_time).getMinutes()
+		return {
+			top: (startMinutes / slotDuration) * slotHeight,
+			height: ((endMinutes - startMinutes) / slotDuration) * slotHeight,
+			slot
+		}
+	})
+}
+
+function availabilityPreviewForDay(dayIndex: number) {
+	if (!availDragState.value.isDragging || availDragState.value.dayIndex !== dayIndex) return null
+	const minM = Math.min(availDragState.value.startMinute, availDragState.value.currentMinute)
+	const maxM = Math.max(availDragState.value.startMinute, availDragState.value.currentMinute)
+	return {
+		top: (minM / slotDuration) * slotHeight,
+		height: ((maxM - minM) / slotDuration) * slotHeight,
+		mode: availDragState.value.mode
+	}
+}
+
+function isMinuteInAvailability(day: Date, minute: number): boolean {
+	return localAvailability.value.some((slot) => {
+		const slotDate = new Date(slot.start_time)
+		if (slotDate.getFullYear() !== day.getFullYear()
+			|| slotDate.getMonth() !== day.getMonth()
+			|| slotDate.getDate() !== day.getDate()) { return false
+		}
+		const startM = slotDate.getHours() * 60 + slotDate.getMinutes()
+		const endM = new Date(slot.end_time).getHours() * 60 + new Date(slot.end_time).getMinutes()
+		return minute >= startM && minute < endM
+	})
+}
+
+function handleAvailMouseDown(e: MouseEvent, dayIndex: number) {
+	if (!props.availabilityEditable) return
+	e.preventDefault()
+	e.stopPropagation()
+	const day = weekDays.value[dayIndex]
+	const minutes = snapMinutes(getMinutesFromY(e.clientY))
+	const isExisting = isMinuteInAvailability(day, minutes)
+
+	availDragState.value = {
+		isDragging: true,
+		mode: isExisting ? 'remove' : 'add',
+		dayIndex,
+		startMinute: minutes,
+		currentMinute: minutes + AVAILABILITY_SNAP_MINUTES
+	}
+
+	document.addEventListener('mousemove', handleAvailMouseMove)
+	document.addEventListener('mouseup', handleAvailMouseUp)
+}
+
+function handleAvailMouseMove(e: MouseEvent) {
+	if (!availDragState.value.isDragging) return
+	const minutes = snapMinutes(getMinutesFromY(e.clientY))
+	availDragState.value.currentMinute = minutes
+}
+
+function handleAvailMouseUp() {
+	if (!availDragState.value.isDragging) return
+	const { dayIndex, startMinute, currentMinute, mode } = availDragState.value
+	const day = weekDays.value[dayIndex]
+	const minM = Math.min(startMinute, currentMinute)
+	const maxM = Math.max(startMinute, currentMinute)
+
+	if (maxM - minM < AVAILABILITY_SNAP_MINUTES) {
+		availDragState.value.isDragging = false
+		document.removeEventListener('mousemove', handleAvailMouseMove)
+		document.removeEventListener('mouseup', handleAvailMouseUp)
+		return
+	}
+
+	const newStart = new Date(day)
+	newStart.setHours(Math.floor(minM / 60), minM % 60, 0, 0)
+	const newEnd = new Date(day)
+	newEnd.setHours(Math.floor(maxM / 60), maxM % 60, 0, 0)
+
+	if (mode === 'add') {
+		// Add and merge overlapping
+		const otherDays = localAvailability.value.filter((s) => {
+			const d = new Date(s.start_time)
+			return d.getFullYear() !== day.getFullYear()
+				|| d.getMonth() !== day.getMonth()
+				|| d.getDate() !== day.getDate()
+		})
+		const sameDaySlots = localAvailability.value.filter((s) => {
+			const d = new Date(s.start_time)
+			return d.getFullYear() === day.getFullYear()
+				&& d.getMonth() === day.getMonth()
+				&& d.getDate() === day.getDate()
+		})
+		sameDaySlots.push({ start_time: newStart, end_time: newEnd })
+		// Sort and merge
+		sameDaySlots.sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime())
+		const merged: AvailabilitySlot[] = []
+		for (const s of sameDaySlots) {
+			if (merged.length === 0) {
+				merged.push({ start_time: new Date(s.start_time), end_time: new Date(s.end_time) })
+			} else {
+				const last = merged[merged.length - 1]
+				if (new Date(s.start_time).getTime() <= new Date(last.end_time).getTime()) {
+					last.end_time = new Date(Math.max(new Date(last.end_time).getTime(), new Date(s.end_time).getTime()))
+				} else {
+					merged.push({ start_time: new Date(s.start_time), end_time: new Date(s.end_time) })
+				}
+			}
+		}
+		localAvailability.value = [...otherDays, ...merged]
+	} else {
+		// Remove: subtract the range from existing slots
+		const result: AvailabilitySlot[] = []
+		for (const s of localAvailability.value) {
+			const d = new Date(s.start_time)
+			if (d.getFullYear() !== day.getFullYear()
+				|| d.getMonth() !== day.getMonth()
+				|| d.getDate() !== day.getDate()) {
+				result.push(s)
+				continue
+			}
+			const sStart = new Date(s.start_time).getTime()
+			const sEnd = new Date(s.end_time).getTime()
+			const rStart = newStart.getTime()
+			const rEnd = newEnd.getTime()
+
+			// No overlap
+			if (sEnd <= rStart || sStart >= rEnd) {
+				result.push(s)
+				continue
+			}
+			// Left remainder
+			if (sStart < rStart) {
+				result.push({ start_time: new Date(sStart), end_time: new Date(rStart) })
+			}
+			// Right remainder
+			if (sEnd > rEnd) {
+				result.push({ start_time: new Date(rEnd), end_time: new Date(sEnd) })
+			}
+		}
+		localAvailability.value = result
+	}
+
+	emit('availabilityChange', localAvailability.value)
+	availDragState.value.isDragging = false
+	document.removeEventListener('mousemove', handleAvailMouseMove)
+	document.removeEventListener('mouseup', handleAvailMouseUp)
+}
+
+// Time indicators
+const currentTimeTop = ref(0)
+const isToday = ref(false)
+const currentTimeInterval = ref<any>()
+
+const timeSlotsContainer = ref<HTMLElement>()
+const calendarGrid = ref<HTMLElement>()
+const dayColumns = ref<HTMLElement[]>([])
+const dayColumnsContainer = ref<HTMLElement>()
+const scrollableContainer = ref<HTMLElement>()
+
+function getMinutesFromY(clientY: number): number {
+	if (!dayColumnsContainer.value) return 0
+	const rect = dayColumnsContainer.value.getBoundingClientRect()
+	const relativeY = clientY - rect.top
+	return Math.max(0, Math.min((relativeY / slotHeight) * slotDuration, 24 * 60))
+}
+
 // Generate hourly time slots
 const timeSlots = computed(() => {
-	const slots = []
+	const items = []
 	for (let hour = timeRange.start; hour < timeRange.end; hour++) {
 		for (let minute = 0; minute < 60; minute += slotDuration) {
-			slots.push({
+			items.push({
 				hour,
 				minute,
 				time: `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
 			})
 		}
 	}
-	return slots
+	return items
 })
 
 // Calculate drag preview positioning using the same formula as events
@@ -410,6 +603,11 @@ function scrollToTime(time: number) {
 
 // Lifecycle hooks
 onMounted(() => {
+	console.log('[WeekView] mounted with props:', {
+		availabilityMode: props.availabilityMode,
+		availabilityEditable: props.availabilityEditable,
+		availabilitySlotsCount: props.availabilitySlots?.length
+	})
 	updateCurrentTimeIndicator()
 	currentTimeInterval.value = setInterval(updateCurrentTimeIndicator, 60000)
 
@@ -420,6 +618,8 @@ onMounted(() => {
 onUnmounted(() => {
 	document.removeEventListener('mousemove', handleMouseMove)
 	document.removeEventListener('mouseup', handleMouseUp)
+	document.removeEventListener('mousemove', handleAvailMouseMove)
+	document.removeEventListener('mouseup', handleAvailMouseUp)
 
 	if (currentTimeInterval.value) {
 		clearInterval(currentTimeInterval.value)
@@ -466,8 +666,29 @@ onUnmounted(() => {
 
 				<div
 					v-for="(day, index) in weekDays" :key="day.toISOString()" :ref="el => setDayColumnRef(el, index)"
-					class="day-column top bottom border-start relative" @mousedown="handleMouseDown($event, day)"
+					class="day-column top bottom border-start relative"
+					@mousedown="props.availabilityEditable ? handleAvailMouseDown($event, index) : handleMouseDown($event, day)"
 				>
+					<!-- Availability painted blocks (behind events) -->
+					<template v-if="props.availabilityMode">
+						<div
+							v-for="(block, bi) in getAvailabilitySlotsForDay(day)" :key="`avail-${bi}`"
+							class="availability-block absolute start end"
+							:class="{ 'availability-editable': props.availabilityEditable }"
+							:style="{ top: `${block.top}px`, height: `${block.height}px` }"
+						/>
+						<!-- Availability drag preview -->
+						<div
+							v-if="availabilityPreviewForDay(index)"
+							class="availability-preview absolute start end pointer-events-none"
+							:class="{ 'avail-remove': availabilityPreviewForDay(index)!.mode === 'remove' }"
+							:style="{
+								top: `${availabilityPreviewForDay(index)!.top}px`,
+								height: `${availabilityPreviewForDay(index)!.height}px`,
+							}"
+						/>
+					</template>
+
 					<template
 						v-for="event in processedEvents.filter(e =>
 							new Date(e.start_time).toDateString() === day.toDateString())" :key="event.id"
@@ -587,6 +808,29 @@ onUnmounted(() => {
 	justify-content: center; */
 }
 
+.availability-block {
+	background-color: rgba(76, 175, 80, 0.18);
+	border-inline-start: 3px solid rgba(76, 175, 80, 0.5);
+	z-index: 0;
+	pointer-events: none;
+}
+
+.availability-block.availability-editable {
+	background-color: rgba(33, 150, 243, 0.18);
+	border-inline-start: 3px solid rgba(33, 150, 243, 0.5);
+}
+
+.availability-preview {
+	background-color: rgba(76, 175, 80, 0.25);
+	border: 1px dashed rgba(76, 175, 80, 0.6);
+	z-index: 0;
+}
+
+.availability-preview.avail-remove {
+	background-color: rgba(244, 67, 54, 0.15);
+	border-color: rgba(244, 67, 54, 0.5);
+}
+
 @media (max-width: 910px) {
 	.weekGrid {
 		display: grid;

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

@@ -136,7 +136,7 @@ function getItemRef(i: number) {
 			{{ helpText }}
 		</p>
 		<template v-if="!collapsible">
-			<div v-for="(_, i) in items" :key="i" class="array-input-row grid align-items-center">
+			<div v-for="(_, i) in items" :key="i" class="array-input-row grid align-items-center pb-1">
 				<slot :item="getItemRef(i)" :index="i" />
 				<div v-if="allowDelete" class="ms-075 my-1 border-start h-100p ps-025">
 					<Btn
@@ -149,13 +149,14 @@ function getItemRef(i: number) {
 		<Draggable v-if="collapsible" :model-value="items" handle=".grab" :disabled="!allowReorder" class="grid gap-05 mb-05" @end="onDraggableEnd">
 			<template #default="{ index: i }">
 				<div class="border radius-1 overflow-hidden">
-					<div class="grid gap-05 grid-array-line align-items-center pe-025 hover">
+					<div class="grid gap-0 grid-array-line align-items-center pe-025 hover">
 						<Btn
 							v-if="allowReorder" v-tooltip="resolveI18n('Drag to reorder')" flat thin icon="drag_indicator"
 							class="grab"
 						/>
+						<div v-else />
 						<Btn
-							full-width align-txt="start" class="px-05 bg-transparent color-inherit" :ripple="false"
+							full-width align-txt="start" class="px-025 bg-transparent color-inherit" :ripple="false"
 							:icon="minimizedItems[i] ? 'expand_more' : 'expand_less'" @click="toggleItem(i)"
 						>
 							<p class="ellipsis-1">

package/src/components/form/inputs/RichText/utils/formatting.ts

@@ -178,10 +178,10 @@ export function formatting(state: EditorState) {
 
 	const clear = () => {
 		console.log('[Clear Format] Starting clear format process', state)
-		console.assert(state, '[Clear Format] State must exist')
-		console.assert(state.doc, '[Clear Format] Document must exist')
-		console.assert(state.range, '[Clear Format] Range must exist')
-		console.assert(state.selection, '[Clear Format] Selection must exist')
+		console.assert(!!state, '[Clear Format] State must exist')
+		console.assert(!!state.doc, '[Clear Format] Document must exist')
+		console.assert(!!state.range, '[Clear Format] Range must exist')
+		console.assert(!!state.selection, '[Clear Format] Selection must exist')
 
 		if (!state.doc || !state.range || !state.selection) {
 			console.log('[Clear Format] No document or selection')

package/src/dialog/DialogForm.vue

@@ -108,15 +108,13 @@ function handleClose() {
 		:open="open" :title="title" :width="width" :position="position" :dismissable="dismissable"
 		@update:open="$emit('update:open', $event)" @close="handleClose"
 	>
-		<form @submit.prevent="handleSubmit">
-			<!-- Error message -->
-			<div v-if="error" class="dialog-form-error bg-red-30 color-red radius-1 mb-1 txt14 px-1 py-075">
-				{{ error }}
-			</div>
-
-			<!-- Form fields -->
-			<FormFlow ref="formFlowRef" v-model="formData" :schema="schema" />
-		</form>
+		<!-- Error message -->
+		<div v-if="error" class="dialog-form-error bg-red-30 color-red radius-1 mb-1 txt14 px-1 py-075">
+			{{ error }}
+		</div>
+
+		<!-- Form fields -->
+		<FormFlow ref="formFlowRef" v-model="formData" :schema="schema" @submit="handleSubmit" />
 
 		<template #footer>
 			<!-- Delete button (left side) -->

package/src/form-flow/FormFlow.vue

@@ -348,7 +348,7 @@ defineExpose({
 </script>
 
 <template>
-	<form ref="formElement" :class="schema._class" @submit="handleSubmit">
+	<form ref="formElement" class="grid-form" :class="schema._class" @submit="handleSubmit">
 		<template v-if="formState === 'success'">
 			<slot name="success" :form-data="formData" />
 		</template>
@@ -376,6 +376,19 @@ defineExpose({
 						</ArrayInput>
 					</template>
 
+					<!-- Array field with primitive string item type e.g. $.array('Label', 'text') -->
+					<template v-else-if="field._type === 'array' && typeof field._config.schema === 'string'">
+						<ArrayInput v-bind="getFieldProps(field, key)">
+							<template #default="{ item }">
+								<component
+									:is="getFieldComponent(field._config.schema as string)"
+									:model-value="(item.value as string | number | undefined)"
+									@update:model-value="(val: any) => { item.value = val }"
+								/>
+							</template>
+						</ArrayInput>
+					</template>
+
 					<!-- Array field with custom component -->
 					<template v-else-if="field._type === 'array' && field._config.schema">
 						<ArrayInput v-bind="getFieldProps(field, key)">

package/src/form-flow/MultiStepForm.vue

@@ -360,7 +360,7 @@ defineExpose({
 				<!-- Default: Use FormFlow -->
 				<FormFlow v-model="formData" :schema="currentStepSchema" :components="components" :errors="stepErrors">
 					<!-- Pass through field slots -->
-					<template v-for="(_, name) in $slots" #[name]="slotProps">
+					<template v-for="(_, name) in ($slots as Record<string, unknown>)" #[name]="slotProps">
 						<slot :name="name" v-bind="slotProps" />
 					</template>
 				</FormFlow>

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

@@ -285,8 +285,8 @@ export const $ = {
 	},
 
 	richtext(
-		labelOrConfig?: string | (BaseFieldConfig & { autoheight?: boolean, basic?: boolean }),
-		config?: BaseFieldConfig & { autoheight?: boolean, basic?: boolean }
+		labelOrConfig?: string | (BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean }),
+		config?: BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean }
 	): FieldBuilder<string> {
 		return new Field('richtext', parseArgs(labelOrConfig, config))
 	},

package/src/i18n/locales/en.json

@@ -182,6 +182,7 @@
     "closeEditor": "Close Editor (ESC)",
     "blockNotEditable": "This block's content comes from a data source",
     "blockNotEditableDesc": "and cannot be edited here.",
+    "dataSourceHint": "Some content in this block may come from a data source. To change it, edit the data directly.",
     "screenTooSmall": "The screen is too small for this editor. Try reducing zoom or using a larger screen.",
     "cancel": "Cancel",
     "publish": "Publish",
@@ -210,6 +211,52 @@
     "production": "Production",
     "publishFailed": "Publish failed"
   },
+  "collection": {
+    "loadError": "Loading failed",
+    "newItemTitle": "New item — {label}",
+    "createSubmit": "Create",
+    "editTitle": "Edit",
+    "saveSubmit": "Save",
+    "importTitle": "Import JSON — {label}",
+    "importSubmit": "Import",
+    "importJsonLabel": "JSON content",
+    "importJsonHint": "Array of objects [ {...}, {...} ] or a single object",
+    "importSummary": "{imported} imported · {failed} failed",
+    "deleteItemTitle": "Delete item",
+    "deleteItemMessage": "Delete this item?",
+    "deleteConfirm": "Delete",
+    "batchDeleteTitle": "Batch delete",
+    "batchDeleteMessage": "Delete {count} items?",
+    "batchDeleteSummary": "{deleted} deleted · {failed} failed",
+    "batchUpdateTitle": "Batch update — {count} items",
+    "updateAllSubmit": "Update all",
+    "batchUpdateSummary": "Updated · {failed} failed",
+    "selectedCount": "{count} selected",
+    "updateBtn": "Update",
+    "deleteBtn": "Delete",
+    "searchPlaceholder": "Search...",
+    "refreshTooltip": "Refresh",
+    "importTooltip": "Import JSON",
+    "newItemBtn": "New item",
+    "deleteTooltip": "Delete",
+    "reorderTooltip": "Reorder",
+    "reorderSaving": "Saving order..."
+  },
+  "datastores": {
+    "fieldName": "Name",
+    "fieldStore": "Store",
+    "fieldStoreHint": "e.g.: default",
+    "fieldCollection": "Collection",
+    "fieldCollectionHint": "e.g.: my_collection",
+    "fieldDescription": "Description",
+    "createTitle": "Create new Datastore",
+    "createSubmit": "Create",
+    "editTitle": "Edit {name}",
+    "saveSubmit": "Save",
+    "addBtn": "Add Datastore",
+    "empty": "No Datastores yet",
+    "deleteConfirm": "Delete \"{name}\"?"
+  },
   "admin": {
     "content": "Content",
     "blox": "Blox",