@mulmoclaude/collection-plugin 0.5.21 → 0.6.0

package/dist/vue.js

@@ -2,6 +2,7 @@ import { MINUTES_PER_DAY, TOOL_DEFINITION, actionVisible, assignLanes, boolSortV
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, effectScope, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useModel, vModelCheckbox, vModelDynamic, vModelSelect, vModelText, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { createI18n } from "vue-i18n";
 import draggable from "vuedraggable";
+import { REMOTE_VIEW_MAX_BYTES, handleRemoteViewMessage, pageFromItems } from "@mulmoclaude/core/remote-view";
 import { createTranslationCache } from "@mulmoclaude/core/translation/client";
 //#region src/vue/uiContext.ts
 var current = null;
@@ -1185,18 +1186,18 @@ var CollectionRecordModal_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/vue/components/CollectionCalendarView.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$13 = {
+var _hoisted_1$14 = {
 	class: "flex flex-col gap-3",
 	"data-testid": "collection-calendar"
 };
-var _hoisted_2$12 = { class: "flex items-center gap-2" };
-var _hoisted_3$12 = ["aria-label"];
-var _hoisted_4$12 = ["aria-label"];
-var _hoisted_5$11 = {
+var _hoisted_2$13 = { class: "flex items-center gap-2" };
+var _hoisted_3$13 = ["aria-label"];
+var _hoisted_4$13 = ["aria-label"];
+var _hoisted_5$12 = {
 	class: "text-sm font-bold text-slate-800 flex-1",
 	"data-testid": "collection-calendar-month"
 };
-var _hoisted_6$10 = { class: "grid grid-cols-7 gap-1 text-[10px] font-bold text-slate-400 uppercase tracking-wider select-none" };
+var _hoisted_6$11 = { class: "grid grid-cols-7 gap-1 text-[10px] font-bold text-slate-400 uppercase tracking-wider select-none" };
 var _hoisted_7$10 = { class: "grid grid-cols-7 gap-1" };
 var _hoisted_8$10 = [
 	"aria-label",
@@ -1326,23 +1327,23 @@ var CollectionCalendarView_default = /* @__PURE__ */ defineComponent({
 			viewMonth.value = now.getMonth() + 1;
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$13, [
-				createElementVNode("div", _hoisted_2$12, [
+			return openBlock(), createElementBlock("div", _hoisted_1$14, [
+				createElementVNode("div", _hoisted_2$13, [
 					createElementVNode("button", {
 						type: "button",
 						class: "h-8 w-8 flex items-center justify-center rounded text-slate-500 hover:bg-slate-100 transition-colors",
 						"aria-label": unref(t)("collectionsView.calendarPrevMonth"),
 						"data-testid": "collection-calendar-prev",
 						onClick: _cache[0] || (_cache[0] = ($event) => stepMonth(-1))
-					}, [..._cache[2] || (_cache[2] = [createElementVNode("span", { class: "material-icons text-lg" }, "chevron_left", -1)])], 8, _hoisted_3$12),
+					}, [..._cache[2] || (_cache[2] = [createElementVNode("span", { class: "material-icons text-lg" }, "chevron_left", -1)])], 8, _hoisted_3$13),
 					createElementVNode("button", {
 						type: "button",
 						class: "h-8 w-8 flex items-center justify-center rounded text-slate-500 hover:bg-slate-100 transition-colors",
 						"aria-label": unref(t)("collectionsView.calendarNextMonth"),
 						"data-testid": "collection-calendar-next",
 						onClick: _cache[1] || (_cache[1] = ($event) => stepMonth(1))
-					}, [..._cache[3] || (_cache[3] = [createElementVNode("span", { class: "material-icons text-lg" }, "chevron_right", -1)])], 8, _hoisted_4$12),
-					createElementVNode("h3", _hoisted_5$11, toDisplayString(monthLabel.value), 1),
+					}, [..._cache[3] || (_cache[3] = [createElementVNode("span", { class: "material-icons text-lg" }, "chevron_right", -1)])], 8, _hoisted_4$13),
+					createElementVNode("h3", _hoisted_5$12, toDisplayString(monthLabel.value), 1),
 					createElementVNode("button", {
 						type: "button",
 						class: "h-8 px-2.5 flex items-center gap-1 rounded border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 text-xs font-bold transition-colors",
@@ -1350,7 +1351,7 @@ var CollectionCalendarView_default = /* @__PURE__ */ defineComponent({
 						onClick: goToday
 					}, toDisplayString(unref(t)("collectionsView.calendarToday")), 1)
 				]),
-				createElementVNode("div", _hoisted_6$10, [(openBlock(true), createElementBlock(Fragment, null, renderList(weekdayLabels.value, (label, idx) => {
+				createElementVNode("div", _hoisted_6$11, [(openBlock(true), createElementBlock(Fragment, null, renderList(weekdayLabels.value, (label, idx) => {
 					return openBlock(), createElementBlock("div", {
 						key: idx,
 						class: "px-1 py-1 text-center"
@@ -1391,18 +1392,18 @@ var CollectionCalendarView_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/vue/components/CollectionDayView.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$12 = { class: "flex items-center gap-2 border-b border-slate-200 px-4 py-3" };
-var _hoisted_2$11 = {
+var _hoisted_1$13 = { class: "flex items-center gap-2 border-b border-slate-200 px-4 py-3" };
+var _hoisted_2$12 = {
 	class: "flex-1 text-sm font-bold text-slate-800",
 	"data-testid": "collection-day-view-title"
 };
-var _hoisted_3$11 = ["aria-label"];
-var _hoisted_4$11 = ["aria-label"];
-var _hoisted_5$10 = {
+var _hoisted_3$12 = ["aria-label"];
+var _hoisted_4$12 = ["aria-label"];
+var _hoisted_5$11 = {
 	key: 0,
 	class: "px-4 py-10 text-center text-sm text-slate-400"
 };
-var _hoisted_6$9 = { class: "absolute -top-2 left-0 w-10 pr-1 text-right text-[10px] tabular-nums text-slate-400" };
+var _hoisted_6$10 = { class: "absolute -top-2 left-0 w-10 pr-1 text-right text-[10px] tabular-nums text-slate-400" };
 var _hoisted_7$9 = {
 	class: "absolute inset-y-0 right-0",
 	style: { "left": "2.75rem" }
@@ -1583,8 +1584,8 @@ var CollectionDayView_default = /* @__PURE__ */ defineComponent({
 				role: "dialog",
 				"aria-modal": "true"
 			}, [createElementVNode("div", { class: normalizeClass(["flex min-h-0 flex-col", __props.showDetail ? "w-80 shrink-0 border-r border-slate-200" : "w-full"]) }, [
-				createElementVNode("div", _hoisted_1$12, [
-					createElementVNode("h3", _hoisted_2$11, toDisplayString(dayLabel.value), 1),
+				createElementVNode("div", _hoisted_1$13, [
+					createElementVNode("h3", _hoisted_2$12, toDisplayString(dayLabel.value), 1),
 					__props.canCreate ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						type: "button",
@@ -1592,16 +1593,16 @@ var CollectionDayView_default = /* @__PURE__ */ defineComponent({
 						"aria-label": unref(t)("collectionsView.calendarCreateOn", { date: dayKey.value }),
 						"data-testid": "collection-day-view-create",
 						onClick: onCreate
-					}, [..._cache[3] || (_cache[3] = [createElementVNode("span", { class: "material-icons text-lg" }, "add", -1)])], 8, _hoisted_3$11)) : createCommentVNode("", true),
+					}, [..._cache[3] || (_cache[3] = [createElementVNode("span", { class: "material-icons text-lg" }, "add", -1)])], 8, _hoisted_3$12)) : createCommentVNode("", true),
 					createElementVNode("button", {
 						type: "button",
 						class: "h-8 w-8 flex items-center justify-center rounded text-slate-500 hover:bg-slate-100 transition-colors",
 						"aria-label": unref(t)("collectionsView.dayViewClose"),
 						"data-testid": "collection-day-view-close",
 						onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
-					}, [..._cache[4] || (_cache[4] = [createElementVNode("span", { class: "material-icons text-lg" }, "close", -1)])], 8, _hoisted_4$11)
+					}, [..._cache[4] || (_cache[4] = [createElementVNode("span", { class: "material-icons text-lg" }, "close", -1)])], 8, _hoisted_4$12)
 				]),
-				timedEntries.value.length === 0 && allDayEntries.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$10, toDisplayString(unref(t)("collectionsView.dayViewEmpty")), 1)) : (openBlock(), createElementBlock("div", {
+				timedEntries.value.length === 0 && allDayEntries.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$11, toDisplayString(unref(t)("collectionsView.dayViewEmpty")), 1)) : (openBlock(), createElementBlock("div", {
 					key: 1,
 					ref_key: "scrollEl",
 					ref: scrollEl,
@@ -1615,7 +1616,7 @@ var CollectionDayView_default = /* @__PURE__ */ defineComponent({
 						key: hour,
 						class: "absolute left-0 right-0 border-t border-slate-100",
 						style: normalizeStyle({ top: `${(hour - 1) * HOUR_PX}px` })
-					}, [createElementVNode("span", _hoisted_6$9, toDisplayString(hourLabel(hour - 1)), 1)], 4);
+					}, [createElementVNode("span", _hoisted_6$10, toDisplayString(hourLabel(hour - 1)), 1)], 4);
 				}), 64)), createElementVNode("div", _hoisted_7$9, [(openBlock(true), createElementBlock(Fragment, null, renderList(timedEntries.value, (entry) => {
 					return openBlock(), createElementBlock("button", {
 						key: entry.id,
@@ -1650,15 +1651,15 @@ var CollectionDayView_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/vue/components/CollectionKanbanView.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$11 = {
+var _hoisted_1$12 = {
 	class: "h-full overflow-x-auto overflow-y-hidden",
 	"data-testid": "collection-kanban"
 };
-var _hoisted_2$10 = { class: "flex gap-3 h-full p-1 min-w-max" };
-var _hoisted_3$10 = ["data-testid"];
-var _hoisted_4$10 = { class: "flex items-center justify-between px-3 py-2 border-b border-slate-200" };
-var _hoisted_5$9 = { class: "flex items-center gap-2 min-w-0" };
-var _hoisted_6$8 = ["title"];
+var _hoisted_2$11 = { class: "flex gap-3 h-full p-1 min-w-max" };
+var _hoisted_3$11 = ["data-testid"];
+var _hoisted_4$11 = { class: "flex items-center justify-between px-3 py-2 border-b border-slate-200" };
+var _hoisted_5$10 = { class: "flex items-center gap-2 min-w-0" };
+var _hoisted_6$9 = ["title"];
 var _hoisted_7$8 = { class: "text-[11px] text-slate-400 shrink-0" };
 var _hoisted_8$8 = [
 	"data-testid",
@@ -1771,15 +1772,15 @@ var CollectionKanbanView_default = /* @__PURE__ */ defineComponent({
 			emit("move", itemId(item), next);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$11, [createElementVNode("div", _hoisted_2$10, [(openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$12, [createElementVNode("div", _hoisted_2$11, [(openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
 				return openBlock(), createElementBlock("div", {
 					key: column.value,
 					"data-testid": `collection-kanban-column-${column.value || "uncategorized"}`,
 					class: "w-72 shrink-0 flex flex-col bg-slate-100 rounded-lg"
-				}, [createElementVNode("div", _hoisted_4$10, [createElementVNode("div", _hoisted_5$9, [createElementVNode("span", { class: normalizeClass(["w-2 h-2 rounded-full shrink-0", unref(resolveEnumColor)(__props.schema, __props.groupField, column.value).dot]) }, null, 2), createElementVNode("span", {
+				}, [createElementVNode("div", _hoisted_4$11, [createElementVNode("div", _hoisted_5$10, [createElementVNode("span", { class: normalizeClass(["w-2 h-2 rounded-full shrink-0", unref(resolveEnumColor)(__props.schema, __props.groupField, column.value).dot]) }, null, 2), createElementVNode("span", {
 					class: "font-semibold text-xs text-slate-600 truncate",
 					title: column.label
-				}, toDisplayString(column.label), 9, _hoisted_6$8)]), createElementVNode("span", _hoisted_7$8, toDisplayString(itemsByColumn(column.value).length), 1)]), createVNode(unref(draggable), {
+				}, toDisplayString(column.label), 9, _hoisted_6$9)]), createElementVNode("span", _hoisted_7$8, toDisplayString(itemsByColumn(column.value).length), 1)]), createVNode(unref(draggable), {
 					"model-value": itemsByColumn(column.value),
 					"item-key": __props.schema.primaryKey,
 					group: "collection-kanban-cards",
@@ -1810,7 +1811,7 @@ var CollectionKanbanView_default = /* @__PURE__ */ defineComponent({
 					"model-value",
 					"item-key",
 					"onChange"
-				])], 8, _hoisted_3$10);
+				])], 8, _hoisted_3$11);
 			}), 128))])]);
 		};
 	}
@@ -1840,16 +1841,16 @@ function activatePathLink(event, path, stop = false) {
 }
 //#endregion
 //#region src/vue/components/CollectionEmbedView.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$10 = [
+var _hoisted_1$11 = [
 	"href",
 	"tabindex",
 	"data-testid"
 ];
-var _hoisted_2$9 = { class: "flex items-center justify-between text-[10px] font-bold text-indigo-600/90 tracking-wider uppercase" };
-var _hoisted_3$9 = { class: "flex items-center gap-1.5" };
-var _hoisted_4$9 = { class: "bg-indigo-100/60 text-indigo-700 px-1.5 py-0.5 rounded font-mono font-medium lowercase" };
-var _hoisted_5$8 = { class: "grid gap-x-4 gap-y-3 grid-cols-2" };
-var _hoisted_6$7 = { class: "text-[10px] font-semibold text-slate-400 uppercase tracking-wide" };
+var _hoisted_2$10 = { class: "flex items-center justify-between text-[10px] font-bold text-indigo-600/90 tracking-wider uppercase" };
+var _hoisted_3$10 = { class: "flex items-center gap-1.5" };
+var _hoisted_4$10 = { class: "bg-indigo-100/60 text-indigo-700 px-1.5 py-0.5 rounded font-mono font-medium lowercase" };
+var _hoisted_5$9 = { class: "grid gap-x-4 gap-y-3 grid-cols-2" };
+var _hoisted_6$8 = { class: "text-[10px] font-semibold text-slate-400 uppercase tracking-wide" };
 var _hoisted_7$7 = ["data-testid"];
 var _hoisted_8$7 = {
 	key: 0,
@@ -1893,17 +1894,17 @@ var CollectionEmbedView_default = /* @__PURE__ */ defineComponent({
 				onKeydown: [_cache[1] || (_cache[1] = withKeys(($event) => unref(activateRefLink)($event, __props.view.targetSlug, __props.view.recordId), ["enter"])), _cache[2] || (_cache[2] = withKeys(($event) => unref(activateRefLink)($event, __props.view.targetSlug, __props.view.recordId), ["space"]))]
 			}, [
 				_cache[7] || (_cache[7] = createElementVNode("div", { class: "absolute left-0 top-0 bottom-0 w-1 bg-indigo-500 rounded-l-xl transition-all duration-300 group-hover:w-1.5 group-hover:bg-indigo-600" }, null, -1)),
-				createElementVNode("div", _hoisted_2$9, [createElementVNode("div", _hoisted_3$9, [_cache[6] || (_cache[6] = createElementVNode("span", { class: "material-icons text-sm" }, "link", -1)), createElementVNode("span", null, toDisplayString(__props.view.targetSlug), 1)]), createElementVNode("span", _hoisted_4$9, toDisplayString(__props.view.recordId), 1)]),
-				createElementVNode("div", _hoisted_5$8, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.view.rows, (row) => {
+				createElementVNode("div", _hoisted_2$10, [createElementVNode("div", _hoisted_3$10, [_cache[6] || (_cache[6] = createElementVNode("span", { class: "material-icons text-sm" }, "link", -1)), createElementVNode("span", null, toDisplayString(__props.view.targetSlug), 1)]), createElementVNode("span", _hoisted_4$10, toDisplayString(__props.view.recordId), 1)]),
+				createElementVNode("div", _hoisted_5$9, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.view.rows, (row) => {
 					return openBlock(), createElementBlock("div", {
 						key: row.key,
 						class: "space-y-0.5"
-					}, [createElementVNode("div", _hoisted_6$7, toDisplayString(row.label), 1), createElementVNode("div", {
+					}, [createElementVNode("div", _hoisted_6$8, toDisplayString(row.label), 1), createElementVNode("div", {
 						class: "text-xs text-slate-700 font-medium break-words",
 						"data-testid": `collections-embed-${__props.fieldKey}-${row.key}`
 					}, [row.type === "boolean" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [row.value === true ? (openBlock(), createElementBlock("span", _hoisted_8$7, "check_circle")) : (openBlock(), createElementBlock("span", _hoisted_9$7, "—"))], 64)) : row.type === "markdown" ? (openBlock(), createElementBlock("p", _hoisted_10$7, toDisplayString(row.display), 1)) : (openBlock(), createElementBlock("span", _hoisted_11$7, toDisplayString(row.display), 1))], 8, _hoisted_7$7)]);
 				}), 128))])
-			], 40, _hoisted_1$10)) : (openBlock(), createElementBlock("div", {
+			], 40, _hoisted_1$11)) : (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: "relative rounded-xl border border-red-100 bg-red-50/30 p-4 pl-5 shadow-sm",
 				"data-testid": `collections-embed-${__props.fieldKey}`
@@ -1931,12 +1932,12 @@ var CollectionEmbedView_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/vue/components/CollectionRecordPanel.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$9 = { class: "flex items-center gap-2 mb-4" };
-var _hoisted_2$8 = { class: "flex-1 min-w-0" };
-var _hoisted_3$8 = { class: "block text-[9px] font-bold text-slate-400 uppercase tracking-wider" };
-var _hoisted_4$8 = ["data-testid"];
-var _hoisted_5$7 = ["disabled"];
-var _hoisted_6$6 = {
+var _hoisted_1$10 = { class: "flex items-center gap-2 mb-4" };
+var _hoisted_2$9 = { class: "flex-1 min-w-0" };
+var _hoisted_3$9 = { class: "block text-[9px] font-bold text-slate-400 uppercase tracking-wider" };
+var _hoisted_4$9 = ["data-testid"];
+var _hoisted_5$8 = ["disabled"];
+var _hoisted_6$7 = {
 	key: 1,
 	class: "flex items-center gap-2"
 };
@@ -2300,10 +2301,10 @@ var CollectionRecordPanel_default = /* @__PURE__ */ defineComponent({
 				onSubmit: _cache[5] || (_cache[5] = withModifiers(($event) => emit("submit"), ["prevent"]))
 			}, {
 				default: withCtx(() => [
-					createElementVNode("div", _hoisted_1$9, [createElementVNode("div", _hoisted_2$8, [createElementVNode("span", _hoisted_3$8, toDisplayString(__props.collection.title), 1), createElementVNode("h2", {
+					createElementVNode("div", _hoisted_1$10, [createElementVNode("div", _hoisted_2$9, [createElementVNode("span", _hoisted_3$9, toDisplayString(__props.collection.title), 1), createElementVNode("h2", {
 						class: "text-base font-bold text-slate-800 truncate",
 						"data-testid": editing.value ? "collections-edit-title" : "collections-detail-title"
-					}, toDisplayString(headerTitle.value), 9, _hoisted_4$8)]), editing.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("button", {
+					}, toDisplayString(headerTitle.value), 9, _hoisted_4$9)]), editing.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("button", {
 						type: "button",
 						class: "h-8 px-2.5 rounded text-xs font-bold text-slate-500 hover:bg-slate-200/50 transition-colors",
 						"data-testid": "collections-editor-cancel",
@@ -2313,7 +2314,7 @@ var CollectionRecordPanel_default = /* @__PURE__ */ defineComponent({
 						class: "h-8 px-2.5 rounded bg-indigo-600 text-white font-bold text-xs hover:bg-indigo-700 disabled:opacity-50 transition-all shadow-sm shadow-indigo-600/10",
 						disabled: __props.saving,
 						"data-testid": "collections-editor-save"
-					}, toDisplayString(__props.saving ? unref(t)("common.saving") : unref(t)("common.save")), 9, _hoisted_5$7)], 64)) : (openBlock(), createElementBlock("div", _hoisted_6$6, [
+					}, toDisplayString(__props.saving ? unref(t)("common.saving") : unref(t)("common.save")), 9, _hoisted_5$8)], 64)) : (openBlock(), createElementBlock("div", _hoisted_6$7, [
 						(openBlock(true), createElementBlock(Fragment, null, renderList(__props.visibleActions, (action) => {
 							return openBlock(), createElementBlock("button", {
 								key: action.id,
@@ -2594,15 +2595,15 @@ var CollectionRecordPanel_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/vue/components/CollectionViewConfigModal.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$8 = {
+var _hoisted_1$9 = {
 	"data-testid": "collection-config-modal",
 	class: "flex flex-col overflow-hidden"
 };
-var _hoisted_2$7 = { class: "flex items-center justify-between gap-2 border-b border-slate-100 px-5 py-3" };
-var _hoisted_3$7 = { class: "text-sm font-bold text-slate-700" };
-var _hoisted_4$7 = ["title", "aria-label"];
-var _hoisted_5$6 = { class: "overflow-y-auto px-5 py-4" };
-var _hoisted_6$5 = { class: "mb-2 text-[10px] font-bold uppercase tracking-wider text-slate-400" };
+var _hoisted_2$8 = { class: "flex items-center justify-between gap-2 border-b border-slate-100 px-5 py-3" };
+var _hoisted_3$8 = { class: "text-sm font-bold text-slate-700" };
+var _hoisted_4$8 = ["title", "aria-label"];
+var _hoisted_5$7 = { class: "overflow-y-auto px-5 py-4" };
+var _hoisted_6$6 = { class: "mb-2 text-[10px] font-bold uppercase tracking-wider text-slate-400" };
 var _hoisted_7$5 = {
 	key: 0,
 	class: "mb-3 rounded border border-rose-200 bg-rose-50 px-3 py-2 text-xs font-medium text-rose-600",
@@ -2666,15 +2667,15 @@ var CollectionViewConfigModal_default = /* @__PURE__ */ defineComponent({
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(CollectionRecordModal_default, { onClose: _cache[1] || (_cache[1] = ($event) => emit("close")) }, {
-				default: withCtx(() => [createElementVNode("div", _hoisted_1$8, [createElementVNode("header", _hoisted_2$7, [createElementVNode("h2", _hoisted_3$7, toDisplayString(unref(t)("collectionsView.config.title", { title: __props.title })), 1), createElementVNode("button", {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1$9, [createElementVNode("header", _hoisted_2$8, [createElementVNode("h2", _hoisted_3$8, toDisplayString(unref(t)("collectionsView.config.title", { title: __props.title })), 1), createElementVNode("button", {
 					type: "button",
 					class: "h-8 w-8 flex items-center justify-center rounded text-slate-400 hover:bg-slate-50 hover:text-slate-600",
 					title: unref(t)("common.close"),
 					"aria-label": unref(t)("common.close"),
 					"data-testid": "collection-config-close",
 					onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
-				}, [..._cache[2] || (_cache[2] = [createElementVNode("span", { class: "material-icons text-sm" }, "close", -1)])], 8, _hoisted_4$7)]), createElementVNode("div", _hoisted_5$6, [
-					createElementVNode("h3", _hoisted_6$5, toDisplayString(unref(t)("collectionsView.config.viewsHeading")), 1),
+				}, [..._cache[2] || (_cache[2] = [createElementVNode("span", { class: "material-icons text-sm" }, "close", -1)])], 8, _hoisted_4$8)]), createElementVNode("div", _hoisted_5$7, [
+					createElementVNode("h3", _hoisted_6$6, toDisplayString(unref(t)("collectionsView.config.viewsHeading")), 1),
 					error.value ? (openBlock(), createElementBlock("p", _hoisted_7$5, toDisplayString(error.value), 1)) : createCommentVNode("", true),
 					__props.views.length > 0 ? (openBlock(), createElementBlock("ul", _hoisted_8$5, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.views, (view) => {
 						return openBlock(), createElementBlock("li", {
@@ -2702,19 +2703,19 @@ var CollectionViewConfigModal_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/vue/components/CollectionCustomView.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$7 = { class: "custom-view-container" };
-var _hoisted_2$6 = {
+var _hoisted_1$8 = { class: "custom-view-container" };
+var _hoisted_2$7 = {
 	key: 0,
 	class: "custom-view-message",
 	role: "alert",
 	"data-testid": "collection-custom-view-error"
 };
-var _hoisted_3$6 = {
+var _hoisted_3$7 = {
 	key: 1,
 	class: "custom-view-message",
 	"data-testid": "collection-custom-view-loading"
 };
-var _hoisted_4$6 = ["title", "srcdoc"];
+var _hoisted_4$7 = ["title", "srcdoc"];
 var REMINT_LEAD_MS = 6e4;
 var MIN_REMINT_DELAY_MS = 1e4;
 var CollectionCustomView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -2836,7 +2837,7 @@ var CollectionCustomView_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 			window.removeEventListener("message", onWindowMessage);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$7, [error.value ? (openBlock(), createElementBlock("div", _hoisted_2$6, toDisplayString(unref(t)("collectionsView.customViewError", { error: error.value })), 1)) : loading.value ? (openBlock(), createElementBlock("div", _hoisted_3$6, toDisplayString(unref(t)("collectionsView.customViewLoading")), 1)) : srcdoc.value ? (openBlock(), createElementBlock("iframe", {
+			return openBlock(), createElementBlock("div", _hoisted_1$8, [error.value ? (openBlock(), createElementBlock("div", _hoisted_2$7, toDisplayString(unref(t)("collectionsView.customViewError", { error: error.value })), 1)) : loading.value ? (openBlock(), createElementBlock("div", _hoisted_3$7, toDisplayString(unref(t)("collectionsView.customViewLoading")), 1)) : srcdoc.value ? (openBlock(), createElementBlock("iframe", {
 				ref_key: "iframeEl",
 				ref: iframeEl,
 				key: __props.view.id,
@@ -2845,7 +2846,7 @@ var CollectionCustomView_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 				srcdoc: srcdoc.value,
 				sandbox: "allow-scripts allow-popups allow-popups-to-escape-sandbox",
 				class: "w-full h-full border-0"
-			}, null, 8, _hoisted_4$6)) : createCommentVNode("", true)]);
+			}, null, 8, _hoisted_4$7)) : createCommentVNode("", true)]);
 		};
 	}
 });
@@ -2860,6 +2861,110 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 //#region src/vue/components/CollectionCustomView.vue
 var CollectionCustomView_default = /*#__PURE__*/ _plugin_vue_export_helper_default(CollectionCustomView_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b22228db"]]);
 //#endregion
+//#region src/vue/components/CollectionRemoteViewPreview.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$7 = {
+	class: "remote-preview-container",
+	"data-testid": "collection-remote-view-preview"
+};
+var _hoisted_2$6 = {
+	key: 0,
+	class: "remote-preview-message",
+	role: "alert",
+	"data-testid": "collection-remote-view-error"
+};
+var _hoisted_3$6 = {
+	key: 1,
+	class: "remote-preview-message",
+	"data-testid": "collection-remote-view-loading"
+};
+var _hoisted_4$6 = { class: "phone-frame" };
+var _hoisted_5$6 = ["title", "srcdoc"];
+var _hoisted_6$5 = {
+	class: "remote-preview-caption",
+	"data-testid": "collection-remote-view-size"
+};
+//#endregion
+//#region src/vue/components/CollectionRemoteViewPreview.vue
+var CollectionRemoteViewPreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "CollectionRemoteViewPreview",
+	props: {
+		slug: {},
+		view: {},
+		primaryKey: {},
+		items: {}
+	},
+	emits: ["startChat"],
+	setup(__props, { emit: __emit }) {
+		const { t } = useCollectionI18n();
+		const props = __props;
+		const emit = __emit;
+		const loading = ref(true);
+		const error = ref(null);
+		const srcdoc = ref(null);
+		const bytes = ref(0);
+		const iframeEl = ref(null);
+		const sizeCaption = computed(() => `${Math.max(1, Math.round(bytes.value / 1024))} KB / ${Math.round(REMOTE_VIEW_MAX_BYTES / 1024)} KB`);
+		let loadSeq = 0;
+		async function load() {
+			const seq = ++loadSeq;
+			const stale = () => seq !== loadSeq;
+			loading.value = true;
+			error.value = null;
+			srcdoc.value = null;
+			const binding = collectionUi();
+			try {
+				const resp = await binding.fetchRemoteView?.(props.slug, props.view.id, binding.localeTag());
+				if (stale()) return;
+				if (!resp) {
+					error.value = "fetchRemoteView is not wired on this host";
+					return;
+				}
+				if (!resp.ok) {
+					error.value = resp.error;
+					return;
+				}
+				bytes.value = resp.data.bytes;
+				srcdoc.value = resp.data.srcdoc;
+			} catch (err) {
+				if (!stale()) error.value = errorMessage(err);
+			} finally {
+				if (!stale()) loading.value = false;
+			}
+		}
+		watch([
+			() => props.slug,
+			() => props.view.id,
+			() => collectionUi().localeTag()
+		], () => void load(), { immediate: true });
+		function onWindowMessage(event) {
+			const target = event.source;
+			if (!target || target !== iframeEl.value?.contentWindow) return;
+			handleRemoteViewMessage(event.data, {
+				slug: props.slug,
+				getPage: (request) => pageFromItems(props.items, request, props.primaryKey),
+				onStartChat: (prompt, role) => emit("startChat", {
+					prompt,
+					role
+				})
+			}, (message) => target.postMessage(message, "*"));
+		}
+		onMounted(() => window.addEventListener("message", onWindowMessage));
+		onBeforeUnmount(() => window.removeEventListener("message", onWindowMessage));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$7, [error.value ? (openBlock(), createElementBlock("div", _hoisted_2$6, toDisplayString(unref(t)("collectionsView.customViewError", { error: error.value })), 1)) : loading.value ? (openBlock(), createElementBlock("div", _hoisted_3$6, toDisplayString(unref(t)("collectionsView.customViewLoading")), 1)) : srcdoc.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createElementVNode("div", _hoisted_4$6, [(openBlock(), createElementBlock("iframe", {
+				ref_key: "iframeEl",
+				ref: iframeEl,
+				key: __props.view.id,
+				"data-testid": "collection-remote-view-iframe",
+				title: __props.view.label,
+				srcdoc: srcdoc.value,
+				sandbox: "allow-scripts allow-popups allow-popups-to-escape-sandbox",
+				class: "phone-screen"
+			}, null, 8, _hoisted_5$6))]), createElementVNode("div", _hoisted_6$5, toDisplayString(sizeCaption.value), 1)], 64)) : createCommentVNode("", true)]);
+		};
+	}
+}), [["__scopeId", "data-v-b9e3d51f"]]);
+//#endregion
 //#region src/vue/useCollectionRendering.ts
 function stepForFieldType(type) {
 	if (type === "money") return "0.01";
@@ -3939,8 +4044,13 @@ var CollectionView_default = /* @__PURE__ */ defineComponent({
 		*  vanished (e.g. `view = "kanban"` after switching to an enum-less
 		*  collection) back to "table". Single source of truth for the toggle and
 		*  the body branches. */
-		/** Custom (LLM-authored) HTML views declared on the schema. */
-		const customViews = computed(() => collection.value?.schema.views ?? []);
+		/** Custom (LLM-authored) HTML views declared on the schema. Mobile-target
+		*  views need the host's `fetchRemoteView` binding (the phone-frame preview's
+		*  data source) — on a host without it they're hidden from the selector. */
+		const customViews = computed(() => {
+			const views = collection.value?.schema.views ?? [];
+			return cui.fetchRemoteView ? views : views.filter((entry) => entry.target !== "mobile");
+		});
 		const hasCustomViews = computed(() => customViews.value.length > 0);
 		const activeView = computed(() => {
 			if (view.value === "calendar" && hasCalendar.value) return "calendar";
@@ -4666,7 +4776,7 @@ var CollectionView_default = /* @__PURE__ */ defineComponent({
 								"aria-pressed": activeView.value === unref(customViewKey)(cv.id),
 								"data-testid": `collection-view-custom-${cv.id}`,
 								onClick: ($event) => setCustomView(cv.id)
-							}, [createElementVNode("span", _hoisted_27$1, toDisplayString(cv.icon || "dashboard_customize"), 1), createElementVNode("span", null, toDisplayString(cv.label), 1)], 10, _hoisted_26$1);
+							}, [createElementVNode("span", _hoisted_27$1, toDisplayString(cv.icon || (cv.target === "mobile" ? "smartphone" : "dashboard_customize")), 1), createElementVNode("span", null, toDisplayString(cv.label), 1)], 10, _hoisted_26$1);
 						}), 128)),
 						canAddCustomView.value ? (openBlock(), createElementBlock("button", {
 							key: 2,
@@ -4836,12 +4946,25 @@ var CollectionView_default = /* @__PURE__ */ defineComponent({
 					"group-field",
 					"selected",
 					"notified"
-				])])])) : activeCustomView.value ? (openBlock(), createElementBlock("div", _hoisted_47, [createVNode(CollectionCustomView_default, {
+				])])])) : activeCustomView.value ? (openBlock(), createElementBlock("div", _hoisted_47, [activeCustomView.value.target === "mobile" ? (openBlock(), createBlock(CollectionRemoteViewPreview_default, {
+					key: 0,
+					slug: collection.value.slug,
+					view: activeCustomView.value,
+					"primary-key": collection.value.schema.primaryKey,
+					items: items.value,
+					onStartChat: onCustomViewStartChat
+				}, null, 8, [
+					"slug",
+					"view",
+					"primary-key",
+					"items"
+				])) : (openBlock(), createBlock(CollectionCustomView_default, {
+					key: 1,
 					slug: collection.value.slug,
 					view: activeCustomView.value,
 					onOpenItem: onCustomViewOpenItem,
 					onStartChat: onCustomViewStartChat
-				}, null, 8, ["slug", "view"])])) : items.value.length === 0 && editing.value?.mode !== "create" ? (openBlock(), createElementBlock("div", _hoisted_48, [_cache[42] || (_cache[42] = createElementVNode("span", { class: "material-icons text-4xl text-slate-300" }, "folder_open", -1)), createElementVNode("p", _hoisted_49, toDisplayString(unref(t)("collectionsView.itemsEmpty")), 1)])) : filteredItems.value.length === 0 && editing.value?.mode !== "create" ? (openBlock(), createElementBlock("div", _hoisted_50, [
+				}, null, 8, ["slug", "view"]))])) : items.value.length === 0 && editing.value?.mode !== "create" ? (openBlock(), createElementBlock("div", _hoisted_48, [_cache[42] || (_cache[42] = createElementVNode("span", { class: "material-icons text-4xl text-slate-300" }, "folder_open", -1)), createElementVNode("p", _hoisted_49, toDisplayString(unref(t)("collectionsView.itemsEmpty")), 1)])) : filteredItems.value.length === 0 && editing.value?.mode !== "create" ? (openBlock(), createElementBlock("div", _hoisted_50, [
 					_cache[43] || (_cache[43] = createElementVNode("span", { class: "material-icons text-4xl text-slate-300" }, "search_off", -1)),
 					createElementVNode("p", _hoisted_51, toDisplayString(unref(t)("collectionsView.noMatchingItems")), 1),
 					createElementVNode("button", {