@alfakit/vue 0.0.0-stage → 0.1.1

package/dist/components/fields/BuilderBlockActionsMenu.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderBlockActionsMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/BuilderBlockActionsMenu.vue"],"names":[],"mappings":"AAmGA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAYnF;;;GAGG;AACH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,gBAAgB,GAAG,IAAI,CAAA;IAC1D,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,YAAY,EAAE,CAAA;CAC9B,CAAC;;;;;;;;AAwPF,wBAOG"}

package/dist/components/fields/BuilderBlockActionsMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,97 @@
+import { useT as e } from "../../context.js";
+import t from "../../lib/Icon.js";
+import n from "../ui/Button2.js";
+import r from "../ui/DropdownMenu.js";
+import i from "../ui/DropdownMenuContent.js";
+import a from "../ui/DropdownMenuItem.js";
+import o from "../ui/DropdownMenuSeparator.js";
+import s from "../ui/DropdownMenuTrigger.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createTextVNode as p, createVNode as m, defineComponent as h, openBlock as g, renderList as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
+import { EllipsisIcon as x } from "@lucide/vue";
+//#region src/components/fields/BuilderBlockActionsMenu.vue?vue&type=script&setup=true&lang.ts
+var S = /*@__PURE__*/ h({
+	__name: "BuilderBlockActionsMenu",
+	props: {
+		label: {},
+		resolve: { type: Function },
+		canMoveUp: { type: Boolean },
+		canMoveDown: { type: Boolean },
+		canClone: { type: Boolean },
+		canDelete: { type: Boolean },
+		extraActions: {}
+	},
+	emits: ["action", "extra"],
+	setup(h, { emit: S }) {
+		let C = h, w = S, T = e(), E = l(() => [
+			["moveUp", C.canMoveUp],
+			["moveDown", C.canMoveDown],
+			["clone", C.canClone]
+		].map(([e, t]) => ({
+			name: e,
+			enabled: t,
+			action: C.resolve(e)
+		})).filter((e) => e.enabled && e.action !== null)), D = l(() => C.canDelete ? C.resolve("delete") : null), O = l(() => C.extraActions ?? []), k = l(() => E.value.length > 0 || O.value.length > 0);
+		return (e, l) => k.value || D.value ? (g(), u(r, { key: 0 }, {
+			default: b(() => [m(s, { "as-child": "" }, {
+				default: b(() => [m(n, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-xs",
+					"data-slot": "builder-item-menu",
+					"aria-label": y(T)("builder.block_actions", { block: C.label }, "Actions for :block")
+				}, {
+					default: b(() => [m(y(x), { "aria-hidden": "true" })]),
+					_: 1
+				}, 8, ["aria-label"])]),
+				_: 1
+			}), m(i, {
+				align: "end",
+				class: "min-w-44"
+			}, {
+				default: b(() => [
+					(g(!0), f(c, null, _(E.value, (e) => (g(), u(a, {
+						key: e.name,
+						disabled: e.action?.disabled,
+						onSelect: (t) => w("action", e.name)
+					}, {
+						default: b(() => [e.action?.icon ? (g(), u(y(t), {
+							key: 0,
+							name: e.action.icon
+						}, null, 8, ["name"])) : d("", !0), p(" " + v(e.name === "clone" ? y(T)("builder.duplicate_block", {}, "Duplicate") : e.action?.label), 1)]),
+						_: 2
+					}, 1032, ["disabled", "onSelect"]))), 128)),
+					(g(!0), f(c, null, _(O.value, (e) => (g(), u(a, {
+						key: e.name,
+						disabled: e.disabled,
+						onSelect: (t) => w("extra", e)
+					}, {
+						default: b(() => [e.icon ? (g(), u(y(t), {
+							key: 0,
+							name: e.icon
+						}, null, 8, ["name"])) : d("", !0), p(" " + v(e.label), 1)]),
+						_: 2
+					}, 1032, ["disabled", "onSelect"]))), 128)),
+					D.value && k.value ? (g(), u(o, { key: 0 })) : d("", !0),
+					D.value ? (g(), u(a, {
+						key: 1,
+						variant: "destructive",
+						disabled: D.value.disabled,
+						onSelect: l[0] ||= (e) => w("action", "delete")
+					}, {
+						default: b(() => [D.value.icon ? (g(), u(y(t), {
+							key: 0,
+							name: D.value.icon
+						}, null, 8, ["name"])) : d("", !0), p(" " + v(D.value.label), 1)]),
+						_: 1
+					}, 8, ["disabled"])) : d("", !0)
+				]),
+				_: 1
+			})]),
+			_: 1
+		})) : d("", !0);
+	}
+});
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=BuilderBlockActionsMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/BuilderBlockActionsMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderBlockActionsMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","DropdownMenu","_withCtx","_createVNode","DropdownMenuTrigger","Button","_unref","DropdownMenuContent","_createElementBlock","_Fragment","_renderList","DropdownMenuItem","Icon","_createCommentVNode","_createTextVNode","_toDisplayString","DropdownMenuSeparator","Icon_default","Button_default","DropdownMenu_default","DropdownMenuContent_default","DropdownMenuItem_default","DropdownMenuSeparator_default","DropdownMenuTrigger_default","BuilderBlockActionsMenu_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useT","entries","computed","name","enabled","entry","deleteAction","extras","hasMain","openBlock","createBlock","withCtx","createVNode","unref","EllipsisIcon","createElementBlock","Fragment","renderList","createCommentVNode","createTextVNode","toDisplayString","action","_cache"],"sources":["../../../src/components/fields/BuilderBlockActionsMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionSchema, ItemActionName, ItemActionSchema } from '@alfakit/core'\nimport { EllipsisIcon } from '@lucide/vue'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport Button from '../ui/Button.vue'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuItem from '../ui/DropdownMenuItem.vue'\nimport DropdownMenuSeparator from '../ui/DropdownMenuSeparator.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\n\n/**\n * `blockActionsMenu()`: an item's actions in one compact menu (move up / down, duplicate,\n * extra item actions, delete). Built-in actions run in the browser unless customised.\n */\nconst props = defineProps<{\n  label: string\n  resolve: (name: ItemActionName) => ItemActionSchema | null\n  canMoveUp: boolean\n  canMoveDown: boolean\n  canClone: boolean\n  canDelete: boolean\n  extraActions?: ActionSchema[]\n}>()\nconst emit = defineEmits<{\n  action: [name: ItemActionName]\n  extra: [action: ActionSchema]\n}>()\nconst t = useT()\n\nconst entries = computed(() =>\n  (\n    [\n      ['moveUp', props.canMoveUp],\n      ['moveDown', props.canMoveDown],\n      ['clone', props.canClone],\n    ] as const\n  )\n    .map(([name, enabled]) => ({ name, enabled, action: props.resolve(name) }))\n    .filter((entry) => entry.enabled && entry.action !== null),\n)\nconst deleteAction = computed(() => (props.canDelete ? props.resolve('delete') : null))\nconst extras = computed(() => props.extraActions ?? [])\nconst hasMain = computed(() => entries.value.length > 0 || extras.value.length > 0)\n</script>\n\n<template>\n  <DropdownMenu v-if=\"hasMain || deleteAction\">\n    <DropdownMenuTrigger as-child>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-xs\"\n        data-slot=\"builder-item-menu\"\n        :aria-label=\"t('builder.block_actions', { block: props.label }, 'Actions for :block')\"\n      >\n        <EllipsisIcon aria-hidden=\"true\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\" class=\"min-w-44\">\n      <DropdownMenuItem\n        v-for=\"entry in entries\"\n        :key=\"entry.name\"\n        :disabled=\"entry.action?.disabled\"\n        @select=\"emit('action', entry.name)\"\n      >\n        <Icon v-if=\"entry.action?.icon\" :name=\"entry.action.icon\" />\n        {{\n          entry.name === 'clone'\n            ? t('builder.duplicate_block', {}, 'Duplicate')\n            : entry.action?.label\n        }}\n      </DropdownMenuItem>\n      <DropdownMenuItem\n        v-for=\"action in extras\"\n        :key=\"action.name\"\n        :disabled=\"action.disabled\"\n        @select=\"emit('extra', action)\"\n      >\n        <Icon v-if=\"action.icon\" :name=\"action.icon\" />\n        {{ action.label }}\n      </DropdownMenuItem>\n      <DropdownMenuSeparator v-if=\"deleteAction && hasMain\" />\n      <DropdownMenuItem\n        v-if=\"deleteAction\"\n        variant=\"destructive\"\n        :disabled=\"deleteAction.disabled\"\n        @select=\"emit('action', 'delete')\"\n      >\n        <Icon v-if=\"deleteAction.icon\" :name=\"deleteAction.icon\" />\n        {{ deleteAction.label }}\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/BuilderBlockPicker.js

@@ -0,0 +1,7 @@
+import e from "./BuilderBlockPicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/fields/BuilderBlockPicker.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=BuilderBlockPicker.js.map

package/dist/components/fields/BuilderBlockPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderBlockPicker.js","names":["_sfc_main","BuilderBlockPicker_vue_vue_type_script_setup_true_lang_default","BuilderBlockPicker_default"],"sources":["../../../src/components/fields/BuilderBlockPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  stickyCollisionPadding,\n  type BuilderBlockSchema,\n  type BuilderItemState,\n  type BuilderSchema,\n} from '@alfakit/core'\nimport { computed, ref } from 'vue'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport BuilderBlockPickerPanel from './BuilderBlockPickerPanel.vue'\n\n/**\n * The \"Add block\" button (the default slot) and its picker, anchored below the button\n * (above it when there is no room) and never wider or taller than the screen.\n */\nconst props = defineProps<{ component: BuilderSchema; items: BuilderItemState[] }>()\nconst emit = defineEmits<{ pick: [block: BuilderBlockSchema] }>()\nconst t = useT()\nconst open = ref(false)\n// Opening upwards near the top of the page, stay below the sticky topbar.\nconst collisionPadding = computed(() => (open.value ? stickyCollisionPadding() : 16))\n\n/** `blockPickerWidth()`: spelled out so Tailwind generates them. */\nconst PICKER_WIDTHS: Record<string, string> = {\n  '3xs': 'w-3xs',\n  '2xs': 'w-2xs',\n  xs: 'w-xs',\n  sm: 'w-sm',\n  md: 'w-md',\n  lg: 'w-lg',\n  xl: 'w-xl',\n  '2xl': 'w-2xl',\n  '3xl': 'w-3xl',\n  '4xl': 'w-4xl',\n  '5xl': 'w-5xl',\n  '6xl': 'w-6xl',\n  '7xl': 'w-7xl',\n  none: 'w-auto',\n  min: 'w-min',\n  max: 'w-max',\n  fit: 'w-fit',\n  prose: 'w-[65ch]',\n  container: 'container',\n  'screen-sm': 'w-(--breakpoint-sm)',\n  'screen-md': 'w-(--breakpoint-md)',\n  'screen-lg': 'w-(--breakpoint-lg)',\n  'screen-xl': 'w-(--breakpoint-xl)',\n  'screen-2xl': 'w-(--breakpoint-2xl)',\n  full: 'w-(--reka-popover-trigger-width)',\n  screen: 'w-screen',\n}\n\nconst width = computed(() => {\n  if (props.component.blockPickerWidth) {\n    return cn(PICKER_WIDTHS[props.component.blockPickerWidth], 'max-w-[calc(100vw-2rem)]')\n  }\n\n  const columns = Object.values(props.component.blockPickerColumns ?? {}).some(\n    (value) => (value ?? 1) > 1,\n  )\n\n  return columns ? 'w-[min(42rem,calc(100vw-2rem))]' : 'w-[min(22rem,calc(100vw-2rem))]'\n})\n\nconst pick = (block: BuilderBlockSchema) => {\n  open.value = false\n  emit('pick', block)\n}\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <slot />\n    </PopoverTrigger>\n    <PopoverContent\n      align=\"start\"\n      side=\"bottom\"\n      :collision-padding=\"collisionPadding\"\n      :aria-label=\"t('builder.pick_block', {}, 'Choose a block')\"\n      :class=\"\n        cn(\n          'flex max-h-[min(34rem,var(--reka-popover-content-available-height))] flex-col overflow-hidden p-0',\n          width,\n        )\n      \"\n    >\n      <BuilderBlockPickerPanel\n        v-if=\"open\"\n        :component=\"props.component\"\n        :items=\"props.items\"\n        auto-focus\n        @pick=\"pick\"\n      />\n    </PopoverContent>\n  </Popover>\n</template>\n"],"mappings":""}

package/dist/components/fields/BuilderBlockPicker.vue.d.ts

@@ -0,0 +1,26 @@
+import { type BuilderBlockSchema, type BuilderItemState, type BuilderSchema } from '@alfakit/core';
+/**
+ * The "Add block" button (the default slot) and its picker, anchored below the button
+ * (above it when there is no room) and never wider or taller than the screen.
+ */
+type __VLS_Props = {
+    component: BuilderSchema;
+    items: BuilderItemState[];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (block: BuilderBlockSchema) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPick?: ((block: BuilderBlockSchema) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=BuilderBlockPicker.vue.d.ts.map

package/dist/components/fields/BuilderBlockPicker.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderBlockPicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/BuilderBlockPicker.vue"],"names":[],"mappings":"AAuGA,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EACnB,MAAM,eAAe,CAAA;AAStB;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,aAAa,CAAC;IAAC,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC;AA0I3E,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA8B/C,QAAA,MAAM,eAAe;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/fields/BuilderBlockPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,82 @@
+import { useT as e } from "../../context.js";
+import { cn as t } from "../../lib/utils.js";
+import n from "../ui/Popover.js";
+import r from "../ui/PopoverContent.js";
+import i from "../ui/PopoverTrigger.js";
+import a from "./BuilderBlockPickerPanel.js";
+import { stickyCollisionPadding as o } from "@alfakit/core";
+import { computed as s, createBlock as c, createCommentVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, ref as m, renderSlot as h, unref as g, withCtx as _ } from "vue";
+//#region src/components/fields/BuilderBlockPicker.vue?vue&type=script&setup=true&lang.ts
+var v = /*@__PURE__*/ d({
+	__name: "BuilderBlockPicker",
+	props: {
+		component: {},
+		items: {}
+	},
+	emits: ["pick"],
+	setup(d, { emit: v }) {
+		let y = d, b = v, x = e(), S = m(!1), C = s(() => S.value ? o() : 16), w = {
+			"3xs": "w-3xs",
+			"2xs": "w-2xs",
+			xs: "w-xs",
+			sm: "w-sm",
+			md: "w-md",
+			lg: "w-lg",
+			xl: "w-xl",
+			"2xl": "w-2xl",
+			"3xl": "w-3xl",
+			"4xl": "w-4xl",
+			"5xl": "w-5xl",
+			"6xl": "w-6xl",
+			"7xl": "w-7xl",
+			none: "w-auto",
+			min: "w-min",
+			max: "w-max",
+			fit: "w-fit",
+			prose: "w-[65ch]",
+			container: "container",
+			"screen-sm": "w-(--breakpoint-sm)",
+			"screen-md": "w-(--breakpoint-md)",
+			"screen-lg": "w-(--breakpoint-lg)",
+			"screen-xl": "w-(--breakpoint-xl)",
+			"screen-2xl": "w-(--breakpoint-2xl)",
+			full: "w-(--reka-popover-trigger-width)",
+			screen: "w-screen"
+		}, T = s(() => y.component.blockPickerWidth ? t(w[y.component.blockPickerWidth], "max-w-[calc(100vw-2rem)]") : Object.values(y.component.blockPickerColumns ?? {}).some((e) => (e ?? 1) > 1) ? "w-[min(42rem,calc(100vw-2rem))]" : "w-[min(22rem,calc(100vw-2rem))]"), E = (e) => {
+			S.value = !1, b("pick", e);
+		};
+		return (e, o) => (p(), c(n, {
+			open: S.value,
+			"onUpdate:open": o[0] ||= (e) => S.value = e
+		}, {
+			default: _(() => [u(i, { "as-child": "" }, {
+				default: _(() => [h(e.$slots, "default")]),
+				_: 3
+			}), u(r, {
+				align: "start",
+				side: "bottom",
+				"collision-padding": C.value,
+				"aria-label": g(x)("builder.pick_block", {}, "Choose a block"),
+				class: f(g(t)("flex max-h-[min(34rem,var(--reka-popover-content-available-height))] flex-col overflow-hidden p-0", T.value))
+			}, {
+				default: _(() => [S.value ? (p(), c(a, {
+					key: 0,
+					component: y.component,
+					items: y.items,
+					"auto-focus": "",
+					onPick: E
+				}, null, 8, ["component", "items"])) : l("", !0)]),
+				_: 1
+			}, 8, [
+				"collision-padding",
+				"aria-label",
+				"class"
+			])]),
+			_: 3
+		}, 8, ["open"]));
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=BuilderBlockPicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/BuilderBlockPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderBlockPicker.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","Popover","_withCtx","_createVNode","PopoverTrigger","_renderSlot","PopoverContent","_unref","_normalizeClass","BuilderBlockPickerPanel","_createCommentVNode","Popover_default","PopoverContent_default","PopoverTrigger_default","BuilderBlockPickerPanel_default","BuilderBlockPicker_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useT","open","ref","collisionPadding","computed","stickyCollisionPadding","PICKER_WIDTHS","width","cn","value","pick","block","openBlock","createBlock","_cache","$event","withCtx","createVNode","renderSlot","_ctx","unref","normalizeClass","createCommentVNode"],"sources":["../../../src/components/fields/BuilderBlockPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  stickyCollisionPadding,\n  type BuilderBlockSchema,\n  type BuilderItemState,\n  type BuilderSchema,\n} from '@alfakit/core'\nimport { computed, ref } from 'vue'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport BuilderBlockPickerPanel from './BuilderBlockPickerPanel.vue'\n\n/**\n * The \"Add block\" button (the default slot) and its picker, anchored below the button\n * (above it when there is no room) and never wider or taller than the screen.\n */\nconst props = defineProps<{ component: BuilderSchema; items: BuilderItemState[] }>()\nconst emit = defineEmits<{ pick: [block: BuilderBlockSchema] }>()\nconst t = useT()\nconst open = ref(false)\n// Opening upwards near the top of the page, stay below the sticky topbar.\nconst collisionPadding = computed(() => (open.value ? stickyCollisionPadding() : 16))\n\n/** `blockPickerWidth()`: spelled out so Tailwind generates them. */\nconst PICKER_WIDTHS: Record<string, string> = {\n  '3xs': 'w-3xs',\n  '2xs': 'w-2xs',\n  xs: 'w-xs',\n  sm: 'w-sm',\n  md: 'w-md',\n  lg: 'w-lg',\n  xl: 'w-xl',\n  '2xl': 'w-2xl',\n  '3xl': 'w-3xl',\n  '4xl': 'w-4xl',\n  '5xl': 'w-5xl',\n  '6xl': 'w-6xl',\n  '7xl': 'w-7xl',\n  none: 'w-auto',\n  min: 'w-min',\n  max: 'w-max',\n  fit: 'w-fit',\n  prose: 'w-[65ch]',\n  container: 'container',\n  'screen-sm': 'w-(--breakpoint-sm)',\n  'screen-md': 'w-(--breakpoint-md)',\n  'screen-lg': 'w-(--breakpoint-lg)',\n  'screen-xl': 'w-(--breakpoint-xl)',\n  'screen-2xl': 'w-(--breakpoint-2xl)',\n  full: 'w-(--reka-popover-trigger-width)',\n  screen: 'w-screen',\n}\n\nconst width = computed(() => {\n  if (props.component.blockPickerWidth) {\n    return cn(PICKER_WIDTHS[props.component.blockPickerWidth], 'max-w-[calc(100vw-2rem)]')\n  }\n\n  const columns = Object.values(props.component.blockPickerColumns ?? {}).some(\n    (value) => (value ?? 1) > 1,\n  )\n\n  return columns ? 'w-[min(42rem,calc(100vw-2rem))]' : 'w-[min(22rem,calc(100vw-2rem))]'\n})\n\nconst pick = (block: BuilderBlockSchema) => {\n  open.value = false\n  emit('pick', block)\n}\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <slot />\n    </PopoverTrigger>\n    <PopoverContent\n      align=\"start\"\n      side=\"bottom\"\n      :collision-padding=\"collisionPadding\"\n      :aria-label=\"t('builder.pick_block', {}, 'Choose a block')\"\n      :class=\"\n        cn(\n          'flex max-h-[min(34rem,var(--reka-popover-content-available-height))] flex-col overflow-hidden p-0',\n          width,\n        )\n      \"\n    >\n      <BuilderBlockPickerPanel\n        v-if=\"open\"\n        :component=\"props.component\"\n        :items=\"props.items\"\n        auto-focus\n        @pick=\"pick\"\n      />\n    </PopoverContent>\n  </Popover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAmBA,IAAMkB,IAAQC,GACRC,IAAOH,GACPI,IAAIC,EAAK,GACTC,IAAOC,EAAI,EAAK,GAEhBC,IAAmBC,QAAgBH,EAAK,QAAQI,EAAuB,IAAI,EAAG,GAG9EC,IAAwC;GAC5C,OAAO;GACP,OAAO;GACP,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,MAAM;GACN,KAAK;GACL,KAAK;GACL,KAAK;GACL,OAAO;GACP,WAAW;GACX,aAAa;GACb,aAAa;GACb,aAAa;GACb,aAAa;GACb,cAAc;GACd,MAAM;GACN,QAAQ;EACV,GAEMC,IAAQH,QACRR,EAAM,UAAU,mBACXY,EAAGF,EAAcV,EAAM,UAAU,mBAAmB,0BAA0B,IAGvE,OAAO,OAAOA,EAAM,UAAU,sBAAsB,CAAC,CAAC,CAAC,CAAC,MACrE,OAAWa,KAAS,KAAK,CAGrB,IAAU,oCAAoC,iCACtD,GAEKC,KAAQ,MAA8B;GAE1C,AADA,EAAK,QAAQ,IACbZ,EAAK,QAAQa,CAAK;EACpB;oBAIEjC,EAAA,GAAAC,EAwBUC,GAAA;GAxBO,MAAMqB,EAAA;GAAA,iBAAA,AAAAa,EAAA,QAAA,MAAA,EAAI,QAAAC;;GACzB,SAAAlC,QAEiB,CAFjBC,EAEiBC,GAAA,EAFD,YAAA,GAAQ,GAAA;IACtB,SAAAF,QAAQ,CAARG,EAAQmC,EAAA,QAAA,SAAA,CAAA,CAAA;;GAEVrC,CAAAA,GAAAA,EAmBiBG,GAAA;IAlBf,OAAM;IACN,MAAK;IACJ,qBAAmBkB,EAAA;IACnB,cAAYjB,EAAAa,CAAA,CAAC,CAAA,sBAAA,CAAA,GAAA,gBAAA;IACb,OAAKZ,EAAWD,EAAAsB,CAAA,CAAE,CAAA,qGAA2HD,EAAA,KAAA,CAAA;;IAO9I,SAAA1B,QAME,CALMoB,EAAA,SADRvB,EAAA,GAAAC,EAMES,GAAA;;KAJC,WAAWQ,EAAM;KACjB,OAAOA,EAAM;KACd,cAAA;KACC,QAAMc"}

package/dist/components/fields/BuilderBlockPickerPanel.js

@@ -0,0 +1,7 @@
+import e from "./BuilderBlockPickerPanel.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/fields/BuilderBlockPickerPanel.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=BuilderBlockPickerPanel.js.map

package/dist/components/fields/BuilderBlockPickerPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderBlockPickerPanel.js","names":["_sfc_main","BuilderBlockPickerPanel_vue_vue_type_script_setup_true_lang_default","BuilderBlockPickerPanel_default"],"sources":["../../../src/components/fields/BuilderBlockPickerPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BuilderBlockSchema, BuilderItemState, BuilderSchema } from '@alfakit/core'\nimport {\n  builderPickerMove,\n  canAddBuilderBlock,\n  filterBuilderBlocks,\n  gridColumnsClasses,\n  groupBuilderBlocks,\n} from '@alfakit/core'\nimport { BlocksIcon, SearchIcon } from '@lucide/vue'\nimport { computed, onBeforeUnmount, onMounted, ref, useId, watch, type HTMLAttributes } from 'vue'\nimport { useDirection, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Input from '../ui/Input.vue'\n\n/**\n * The block picker's content: an optional search field on top and the blocks as a grid\n * of cards (icon, label, description) under their group headings. Arrow keys move\n * between the cards, Enter in the search field adds the first match, typing on a card\n * goes back to the search field.\n */\nconst props = defineProps<{\n  component: BuilderSchema\n  items: BuilderItemState[]\n  /** Focus the search field (or the first block) when shown. */\n  autoFocus?: boolean\n  class?: HTMLAttributes['class']\n}>()\nconst emit = defineEmits<{ pick: [block: BuilderBlockSchema] }>()\nconst t = useT()\nconst direction = useDirection()\nconst listId = useId()\nconst search = ref('')\nconst query = ref('')\nconst root = ref<HTMLElement | null>(null)\nconst list = ref<HTMLElement | null>(null)\nlet timer: ReturnType<typeof setTimeout> | undefined\nlet frame = 0\n\nconst prompt = computed(\n  () => props.component.blockSearchPrompt ?? t('builder.search_blocks', {}, 'Search blocks…'),\n)\nconst blocks = computed(() =>\n  filterBuilderBlocks(\n    props.component.blocks,\n    props.component.blockSearchDebounce ? query.value : search.value,\n  ),\n)\nconst groups = computed(() => groupBuilderBlocks(blocks.value))\nconst columns = computed(() =>\n  props.component.blockPickerColumns\n    ? gridColumnsClasses(props.component.blockPickerColumns)\n    : 'grid-cols-1',\n)\n\nwatch(search, (term) => {\n  clearTimeout(timer)\n  if (props.component.blockSearchDebounce) {\n    timer = setTimeout(() => (query.value = term), props.component.blockSearchDebounce)\n  }\n})\n\nconst searchInput = () =>\n  root.value?.querySelector<HTMLInputElement>('[data-slot=\"builder-block-search\"]') ?? null\nconst options = () => [\n  ...(list.value?.querySelectorAll<HTMLButtonElement>(\n    '[data-slot=\"builder-block-option\"]:not(:disabled)',\n  ) ?? []),\n]\n\nonMounted(() => {\n  if (!props.autoFocus) return\n\n  frame = requestAnimationFrame(() => {\n    const input = searchInput()\n\n    if (input) input.focus()\n    else options()[0]?.focus()\n  })\n})\nonBeforeUnmount(() => {\n  clearTimeout(timer)\n  cancelAnimationFrame(frame)\n})\n\nconst canPick = (block: BuilderBlockSchema) =>\n  canAddBuilderBlock(props.component, block, props.items)\n\nconst onListKeydown = (event: KeyboardEvent) => {\n  const all = options()\n  const current = all.indexOf(event.target as HTMLButtonElement)\n\n  if (current === -1) return\n\n  const input = searchInput()\n\n  // Typing on a card goes on in the search field.\n  if (\n    input &&\n    event.key.length === 1 &&\n    event.key !== ' ' &&\n    !event.ctrlKey &&\n    !event.metaKey &&\n    !event.altKey\n  ) {\n    input.focus()\n\n    return\n  }\n\n  const rects = all.map((option) => option.getBoundingClientRect())\n  const rtl = direction.value === 'rtl'\n\n  if (\n    event.key === 'ArrowUp' &&\n    input &&\n    builderPickerMove('ArrowUp', current, rects, rtl) === null\n  ) {\n    event.preventDefault()\n    input.focus()\n\n    return\n  }\n\n  const next = builderPickerMove(event.key, current, rects, rtl)\n\n  if (next !== null) {\n    event.preventDefault()\n    all[next]?.focus()\n  }\n}\n\nconst onSearchKeydown = (event: KeyboardEvent) => {\n  if (event.key === 'ArrowDown') {\n    event.preventDefault()\n    options()[0]?.focus()\n  } else if (event.key === 'Enter') {\n    event.preventDefault()\n    const first = blocks.value.find(canPick)\n\n    if (first) emit('pick', first)\n  }\n}\n</script>\n\n<template>\n  <div ref=\"root\" data-slot=\"builder-picker\" :class=\"cn('flex min-h-0 flex-col', props.class)\">\n    <div v-if=\"props.component.blockSearch\" class=\"border-b p-2\">\n      <div class=\"relative\">\n        <SearchIcon\n          class=\"text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2\"\n          aria-hidden=\"true\"\n        />\n        <Input\n          v-model=\"search\"\n          :placeholder=\"prompt\"\n          :aria-label=\"prompt\"\n          :aria-controls=\"listId\"\n          data-slot=\"builder-block-search\"\n          class=\"h-9 ps-8\"\n          @keydown=\"onSearchKeydown\"\n        />\n      </div>\n    </div>\n    <div\n      :id=\"listId\"\n      ref=\"list\"\n      class=\"min-h-0 flex-1 overflow-y-auto p-2\"\n      @keydown=\"onListKeydown\"\n    >\n      <p\n        v-if=\"blocks.length === 0\"\n        role=\"status\"\n        class=\"text-muted-foreground px-2 py-6 text-center text-sm\"\n      >\n        {{ props.component.blockNoSearchResultsMessage ?? t('no_results', {}, 'No results.') }}\n      </p>\n      <div\n        v-for=\"entry in groups\"\n        v-else\n        :key=\"entry.group ?? ''\"\n        role=\"group\"\n        :aria-label=\"entry.group ?? undefined\"\n        data-slot=\"builder-block-group\"\n        class=\"not-first:mt-2\"\n      >\n        <p\n          v-if=\"entry.group !== null\"\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground px-2 pt-1 pb-1.5 text-xs font-medium tracking-wide uppercase\"\n        >\n          {{ entry.group }}\n        </p>\n        <div :class=\"cn('grid gap-1', columns)\">\n          <button\n            v-for=\"block in entry.blocks\"\n            :key=\"block.name\"\n            type=\"button\"\n            data-slot=\"builder-block-option\"\n            :data-block=\"block.name\"\n            :disabled=\"!canPick(block)\"\n            class=\"hover:bg-accent focus-visible:bg-accent focus-visible:ring-ring/50 flex w-full min-w-0 items-start gap-3 rounded-md p-2 text-start outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50\"\n            @click=\"emit('pick', block)\"\n          >\n            <span\n              class=\"bg-muted text-foreground flex size-9 shrink-0 items-center justify-center rounded-md border [&_svg]:size-4\"\n              aria-hidden=\"true\"\n            >\n              <Icon v-if=\"block.icon\" :name=\"block.icon\" />\n              <BlocksIcon v-else />\n            </span>\n            <span class=\"flex min-w-0 flex-col gap-0.5\">\n              <span class=\"text-sm leading-tight font-medium\">{{ block.label }}</span>\n              <span\n                v-if=\"block.description\"\n                class=\"text-muted-foreground text-xs leading-snug\"\n                data-slot=\"builder-block-description\"\n                >{{ block.description }}</span\n              >\n            </span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/fields/BuilderBlockPickerPanel.vue.d.ts

@@ -0,0 +1,22 @@
+import type { BuilderBlockSchema, BuilderItemState, BuilderSchema } from '@alfakit/core';
+import { type HTMLAttributes } from 'vue';
+/**
+ * The block picker's content: an optional search field on top and the blocks as a grid
+ * of cards (icon, label, description) under their group headings. Arrow keys move
+ * between the cards, Enter in the search field adds the first match, typing on a card
+ * goes back to the search field.
+ */
+type __VLS_Props = {
+    component: BuilderSchema;
+    items: BuilderItemState[];
+    /** Focus the search field (or the first block) when shown. */
+    autoFocus?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (block: BuilderBlockSchema) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPick?: ((block: BuilderBlockSchema) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=BuilderBlockPickerPanel.vue.d.ts.map

package/dist/components/fields/BuilderBlockPickerPanel.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderBlockPickerPanel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/BuilderBlockPickerPanel.vue"],"names":[],"mappings":"AAqOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AASxF,OAAO,EAA2D,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAMlG;;;;;GAKG;AACH,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,aAAa,CAAA;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;CAChC,CAAC;;;;;;AAkXF,wBAOG"}

package/dist/components/fields/BuilderBlockPickerPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,134 @@
+import { useDirection as e, useT as t } from "../../context.js";
+import { cn as n } from "../../lib/utils.js";
+import r from "../../lib/Icon.js";
+import i from "../ui/Input.js";
+import { builderPickerMove as a, canAddBuilderBlock as o, filterBuilderBlocks as s, gridColumnsClasses as c, groupBuilderBlocks as l } from "@alfakit/core";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, onBeforeUnmount as ee, onMounted as te, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, useId as w, watch as T } from "vue";
+import { BlocksIcon as E, SearchIcon as D } from "@lucide/vue";
+//#region src/components/fields/BuilderBlockPickerPanel.vue?vue&type=script&setup=true&lang.ts
+var O = {
+	key: 0,
+	class: "border-b p-2"
+}, k = { class: "relative" }, A = ["id"], j = {
+	key: 0,
+	role: "status",
+	class: "text-muted-foreground px-2 py-6 text-center text-sm"
+}, M = ["aria-label"], N = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "text-muted-foreground px-2 pt-1 pb-1.5 text-xs font-medium tracking-wide uppercase"
+}, ne = [
+	"data-block",
+	"disabled",
+	"onClick"
+], re = {
+	class: "bg-muted text-foreground flex size-9 shrink-0 items-center justify-center rounded-md border [&_svg]:size-4",
+	"aria-hidden": "true"
+}, P = { class: "flex min-w-0 flex-col gap-0.5" }, F = { class: "text-sm leading-tight font-medium" }, I = {
+	key: 0,
+	class: "text-muted-foreground text-xs leading-snug",
+	"data-slot": "builder-block-description"
+}, L = /*@__PURE__*/ _({
+	__name: "BuilderBlockPickerPanel",
+	props: {
+		component: {},
+		items: {},
+		autoFocus: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["pick"],
+	setup(_, { emit: L }) {
+		let R = _, z = L, B = t(), V = e(), H = w(), U = b(""), W = b(""), G = b(null), K = b(null), q, J = 0, Y = d(() => R.component.blockSearchPrompt ?? B("builder.search_blocks", {}, "Search blocks…")), X = d(() => s(R.component.blocks, R.component.blockSearchDebounce ? W.value : U.value)), ie = d(() => l(X.value)), ae = d(() => R.component.blockPickerColumns ? c(R.component.blockPickerColumns) : "grid-cols-1");
+		T(U, (e) => {
+			clearTimeout(q), R.component.blockSearchDebounce && (q = setTimeout(() => W.value = e, R.component.blockSearchDebounce));
+		});
+		let Z = () => G.value?.querySelector("[data-slot=\"builder-block-search\"]") ?? null, Q = () => [...K.value?.querySelectorAll("[data-slot=\"builder-block-option\"]:not(:disabled)") ?? []];
+		te(() => {
+			R.autoFocus && (J = requestAnimationFrame(() => {
+				let e = Z();
+				e ? e.focus() : Q()[0]?.focus();
+			}));
+		}), ee(() => {
+			clearTimeout(q), cancelAnimationFrame(J);
+		});
+		let $ = (e) => o(R.component, e, R.items), oe = (e) => {
+			let t = Q(), n = t.indexOf(e.target);
+			if (n === -1) return;
+			let r = Z();
+			if (r && e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey) {
+				r.focus();
+				return;
+			}
+			let i = t.map((e) => e.getBoundingClientRect()), o = V.value === "rtl";
+			if (e.key === "ArrowUp" && r && a("ArrowUp", n, i, o) === null) {
+				e.preventDefault(), r.focus();
+				return;
+			}
+			let s = a(e.key, n, i, o);
+			s !== null && (e.preventDefault(), t[s]?.focus());
+		}, se = (e) => {
+			if (e.key === "ArrowDown") e.preventDefault(), Q()[0]?.focus();
+			else if (e.key === "Enter") {
+				e.preventDefault();
+				let t = X.value.find($);
+				t && z("pick", t);
+			}
+		};
+		return (e, t) => (y(), m("div", {
+			ref_key: "root",
+			ref: G,
+			"data-slot": "builder-picker",
+			class: v(C(n)("flex min-h-0 flex-col", R.class))
+		}, [R.component.blockSearch ? (y(), m("div", O, [h("div", k, [g(C(D), {
+			class: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2",
+			"aria-hidden": "true"
+		}), g(i, {
+			modelValue: U.value,
+			"onUpdate:modelValue": t[0] ||= (e) => U.value = e,
+			placeholder: Y.value,
+			"aria-label": Y.value,
+			"aria-controls": C(H),
+			"data-slot": "builder-block-search",
+			class: "h-9 ps-8",
+			onKeydown: se
+		}, null, 8, [
+			"modelValue",
+			"placeholder",
+			"aria-label",
+			"aria-controls"
+		])])])) : p("", !0), h("div", {
+			id: C(H),
+			ref_key: "list",
+			ref: K,
+			class: "min-h-0 flex-1 overflow-y-auto p-2",
+			onKeydown: oe
+		}, [X.value.length === 0 ? (y(), m("p", j, S(R.component.blockNoSearchResultsMessage ?? C(B)("no_results", {}, "No results.")), 1)) : (y(!0), m(u, { key: 1 }, x(ie.value, (e) => (y(), m("div", {
+			key: e.group ?? "",
+			role: "group",
+			"aria-label": e.group ?? void 0,
+			"data-slot": "builder-block-group",
+			class: "not-first:mt-2"
+		}, [e.group === null ? p("", !0) : (y(), m("p", N, S(e.group), 1)), h("div", { class: v(C(n)("grid gap-1", ae.value)) }, [(y(!0), m(u, null, x(e.blocks, (e) => (y(), m("button", {
+			key: e.name,
+			type: "button",
+			"data-slot": "builder-block-option",
+			"data-block": e.name,
+			disabled: !$(e),
+			class: "hover:bg-accent focus-visible:bg-accent focus-visible:ring-ring/50 flex w-full min-w-0 items-start gap-3 rounded-md p-2 text-start outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50",
+			onClick: (t) => z("pick", e)
+		}, [h("span", re, [e.icon ? (y(), f(C(r), {
+			key: 0,
+			name: e.icon
+		}, null, 8, ["name"])) : (y(), f(C(E), { key: 1 }))]), h("span", P, [h("span", F, S(e.label), 1), e.description ? (y(), m("span", I, S(e.description), 1)) : p("", !0)])], 8, ne))), 128))], 2)], 8, M))), 128))], 40, A)], 2));
+	}
+});
+//#endregion
+export { L as default };
+
+//# sourceMappingURL=BuilderBlockPickerPanel.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/BuilderBlockPickerPanel.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderBlockPickerPanel.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","Input","_createCommentVNode","_toDisplayString","_Fragment","_renderList","_createBlock","Icon","Icon_default","Input_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","BuilderBlockPickerPanel_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useT","direction","useDirection","listId","useId","search","ref","query","root","list","timer","frame","prompt","computed","blocks","filterBuilderBlocks","groups","groupBuilderBlocks","columns","gridColumnsClasses","term","searchInput","options","onMounted","input","onBeforeUnmount","canPick","canAddBuilderBlock","block","onListKeydown","all","current","event","rects","option","rtl","builderPickerMove","next","onSearchKeydown","first","openBlock","createElementBlock","normalizeClass","unref","cn","createElementVNode","createVNode","SearchIcon","_cache","$event","createCommentVNode","toDisplayString","Fragment","renderList","entry","createBlock","BlocksIcon"],"sources":["../../../src/components/fields/BuilderBlockPickerPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BuilderBlockSchema, BuilderItemState, BuilderSchema } from '@alfakit/core'\nimport {\n  builderPickerMove,\n  canAddBuilderBlock,\n  filterBuilderBlocks,\n  gridColumnsClasses,\n  groupBuilderBlocks,\n} from '@alfakit/core'\nimport { BlocksIcon, SearchIcon } from '@lucide/vue'\nimport { computed, onBeforeUnmount, onMounted, ref, useId, watch, type HTMLAttributes } from 'vue'\nimport { useDirection, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Input from '../ui/Input.vue'\n\n/**\n * The block picker's content: an optional search field on top and the blocks as a grid\n * of cards (icon, label, description) under their group headings. Arrow keys move\n * between the cards, Enter in the search field adds the first match, typing on a card\n * goes back to the search field.\n */\nconst props = defineProps<{\n  component: BuilderSchema\n  items: BuilderItemState[]\n  /** Focus the search field (or the first block) when shown. */\n  autoFocus?: boolean\n  class?: HTMLAttributes['class']\n}>()\nconst emit = defineEmits<{ pick: [block: BuilderBlockSchema] }>()\nconst t = useT()\nconst direction = useDirection()\nconst listId = useId()\nconst search = ref('')\nconst query = ref('')\nconst root = ref<HTMLElement | null>(null)\nconst list = ref<HTMLElement | null>(null)\nlet timer: ReturnType<typeof setTimeout> | undefined\nlet frame = 0\n\nconst prompt = computed(\n  () => props.component.blockSearchPrompt ?? t('builder.search_blocks', {}, 'Search blocks…'),\n)\nconst blocks = computed(() =>\n  filterBuilderBlocks(\n    props.component.blocks,\n    props.component.blockSearchDebounce ? query.value : search.value,\n  ),\n)\nconst groups = computed(() => groupBuilderBlocks(blocks.value))\nconst columns = computed(() =>\n  props.component.blockPickerColumns\n    ? gridColumnsClasses(props.component.blockPickerColumns)\n    : 'grid-cols-1',\n)\n\nwatch(search, (term) => {\n  clearTimeout(timer)\n  if (props.component.blockSearchDebounce) {\n    timer = setTimeout(() => (query.value = term), props.component.blockSearchDebounce)\n  }\n})\n\nconst searchInput = () =>\n  root.value?.querySelector<HTMLInputElement>('[data-slot=\"builder-block-search\"]') ?? null\nconst options = () => [\n  ...(list.value?.querySelectorAll<HTMLButtonElement>(\n    '[data-slot=\"builder-block-option\"]:not(:disabled)',\n  ) ?? []),\n]\n\nonMounted(() => {\n  if (!props.autoFocus) return\n\n  frame = requestAnimationFrame(() => {\n    const input = searchInput()\n\n    if (input) input.focus()\n    else options()[0]?.focus()\n  })\n})\nonBeforeUnmount(() => {\n  clearTimeout(timer)\n  cancelAnimationFrame(frame)\n})\n\nconst canPick = (block: BuilderBlockSchema) =>\n  canAddBuilderBlock(props.component, block, props.items)\n\nconst onListKeydown = (event: KeyboardEvent) => {\n  const all = options()\n  const current = all.indexOf(event.target as HTMLButtonElement)\n\n  if (current === -1) return\n\n  const input = searchInput()\n\n  // Typing on a card goes on in the search field.\n  if (\n    input &&\n    event.key.length === 1 &&\n    event.key !== ' ' &&\n    !event.ctrlKey &&\n    !event.metaKey &&\n    !event.altKey\n  ) {\n    input.focus()\n\n    return\n  }\n\n  const rects = all.map((option) => option.getBoundingClientRect())\n  const rtl = direction.value === 'rtl'\n\n  if (\n    event.key === 'ArrowUp' &&\n    input &&\n    builderPickerMove('ArrowUp', current, rects, rtl) === null\n  ) {\n    event.preventDefault()\n    input.focus()\n\n    return\n  }\n\n  const next = builderPickerMove(event.key, current, rects, rtl)\n\n  if (next !== null) {\n    event.preventDefault()\n    all[next]?.focus()\n  }\n}\n\nconst onSearchKeydown = (event: KeyboardEvent) => {\n  if (event.key === 'ArrowDown') {\n    event.preventDefault()\n    options()[0]?.focus()\n  } else if (event.key === 'Enter') {\n    event.preventDefault()\n    const first = blocks.value.find(canPick)\n\n    if (first) emit('pick', first)\n  }\n}\n</script>\n\n<template>\n  <div ref=\"root\" data-slot=\"builder-picker\" :class=\"cn('flex min-h-0 flex-col', props.class)\">\n    <div v-if=\"props.component.blockSearch\" class=\"border-b p-2\">\n      <div class=\"relative\">\n        <SearchIcon\n          class=\"text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2\"\n          aria-hidden=\"true\"\n        />\n        <Input\n          v-model=\"search\"\n          :placeholder=\"prompt\"\n          :aria-label=\"prompt\"\n          :aria-controls=\"listId\"\n          data-slot=\"builder-block-search\"\n          class=\"h-9 ps-8\"\n          @keydown=\"onSearchKeydown\"\n        />\n      </div>\n    </div>\n    <div\n      :id=\"listId\"\n      ref=\"list\"\n      class=\"min-h-0 flex-1 overflow-y-auto p-2\"\n      @keydown=\"onListKeydown\"\n    >\n      <p\n        v-if=\"blocks.length === 0\"\n        role=\"status\"\n        class=\"text-muted-foreground px-2 py-6 text-center text-sm\"\n      >\n        {{ props.component.blockNoSearchResultsMessage ?? t('no_results', {}, 'No results.') }}\n      </p>\n      <div\n        v-for=\"entry in groups\"\n        v-else\n        :key=\"entry.group ?? ''\"\n        role=\"group\"\n        :aria-label=\"entry.group ?? undefined\"\n        data-slot=\"builder-block-group\"\n        class=\"not-first:mt-2\"\n      >\n        <p\n          v-if=\"entry.group !== null\"\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground px-2 pt-1 pb-1.5 text-xs font-medium tracking-wide uppercase\"\n        >\n          {{ entry.group }}\n        </p>\n        <div :class=\"cn('grid gap-1', columns)\">\n          <button\n            v-for=\"block in entry.blocks\"\n            :key=\"block.name\"\n            type=\"button\"\n            data-slot=\"builder-block-option\"\n            :data-block=\"block.name\"\n            :disabled=\"!canPick(block)\"\n            class=\"hover:bg-accent focus-visible:bg-accent focus-visible:ring-ring/50 flex w-full min-w-0 items-start gap-3 rounded-md p-2 text-start outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50\"\n            @click=\"emit('pick', block)\"\n          >\n            <span\n              class=\"bg-muted text-foreground flex size-9 shrink-0 items-center justify-center rounded-md border [&_svg]:size-4\"\n              aria-hidden=\"true\"\n            >\n              <Icon v-if=\"block.icon\" :name=\"block.icon\" />\n              <BlocksIcon v-else />\n            </span>\n            <span class=\"flex min-w-0 flex-col gap-0.5\">\n              <span class=\"text-sm leading-tight font-medium\">{{ block.label }}</span>\n              <span\n                v-if=\"block.description\"\n                class=\"text-muted-foreground text-xs leading-snug\"\n                data-slot=\"builder-block-description\"\n                >{{ block.description }}</span\n              >\n            </span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/BuilderField.js

@@ -0,0 +1,7 @@
+import e from "./BuilderField.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/fields/BuilderField.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=BuilderField.js.map

package/dist/components/fields/BuilderField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderField.js","names":["_sfc_main","BuilderField_vue_vue_type_script_setup_true_lang_default","BuilderField_default"],"sources":["../../../src/components/fields/BuilderField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BuilderBlockSchema, BuilderItemState, BuilderSchema } from '@alfakit/core'\nimport {\n  isDeferredPlaceholder,\n  VIRTUAL_ESTIMATES,\n  builderItemLabel,\n  builderItems,\n  builderItemSchema,\n  canAddBuilderBlock,\n  cloneIndexedState,\n  cloneRepeaterItem,\n  fieldIds,\n  insertBuilderItem,\n  itemActionContext,\n  moveIndexedState,\n  moveRepeaterItem,\n  removeIndexedState,\n  removeRepeaterItem,\n  reorderedItemKeys,\n  resolveItemAction,\n  virtualizeOptions,\n  type ActionSchema,\n  type ItemActionName,\n} from '@alfakit/core'\nimport { PencilIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { useScrollToErroredItem, useVirtualList } from '../../composables/use-virtual-list'\nimport { useActionRunner, useFormatter, useOptionalRegistry, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport DeferredSchema from '../layout/DeferredSchema.vue'\nimport { useField, useOptionalFormStore } from '../form/form-context'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Button from '../ui/Button.vue'\nimport Collapsible from '../ui/Collapsible.vue'\nimport CollapsibleContent from '../ui/CollapsibleContent.vue'\nimport AddActionRow from './AddActionRow.vue'\nimport CollapseAllActions from './CollapseAllActions.vue'\nimport ItemHeaderActions from './ItemHeaderActions.vue'\nimport { useItemActionFallbacks, useItemMoves, useRunItemAction } from './item-actions'\nimport BuilderBlockActionsMenu from './BuilderBlockActionsMenu.vue'\nimport BuilderBlockPicker from './BuilderBlockPicker.vue'\nimport BuilderBlockPickerPanel from './BuilderBlockPickerPanel.vue'\n\n/**\n * A list of blocks, each with its own schema. Items use the server's per-item schema\n * when it describes the same block, else the block's template (fresh, moved or cloned\n * items the server has not seen yet).\n */\nconst props = defineProps<{ component: BuilderSchema }>()\nconst t = useT()\nconst formatter = useFormatter()\nconst registry = useOptionalRegistry()\nconst form = useOptionalFormStore()\nconst context = useFieldActionContext(() => props.component)\nconst runItemAction = useRunItemAction(context)\nconst fallbacks = useItemActionFallbacks()\nconst serverItemOf = (index: number) => {\n  const server = props.component.items[index]\n\n  return server && server.type === items.value[index]?.type ? server : undefined\n}\nconst resolve = (name: ItemActionName, index?: number) =>\n  resolveItemAction(\n    name,\n    props.component,\n    index === undefined ? undefined : serverItemOf(index),\n    name === 'add' ? { ...fallbacks.add, label: props.component.addActionLabel } : fallbacks[name],\n  )\n\nconst {\n  value,\n  setValue,\n  error,\n  id,\n  disabled: fieldDisabled,\n  readOnly,\n  aria,\n} = useField<unknown>(() => props.component)\nconst locked = computed(() => fieldDisabled.value || readOnly.value)\nconst items = computed(() => builderItems(value.value))\nconst collapsed = ref<Record<number, boolean>>({})\nconst editing = ref<Record<number, boolean>>({})\nconst dragIndex = ref<number | null>(null)\n// Long lists render only the visible blocks (plus a few around them).\nconst virtual = useVirtualList(\n  () => items.value.length,\n  () => virtualizeOptions(props.component.virtualize, VIRTUAL_ESTIMATES.item, 12),\n)\nuseScrollToErroredItem(virtual, () => props.component.statePath)\nconst visibleItems = computed(() =>\n  virtual.indexes.value.map((index) => ({ item: items.value[index] as BuilderItemState, index })),\n)\n\nconst blockOf = (type: string) => props.component.blocks.find((block) => block.name === type)\nconst isCollapsed = (index: number) => collapsed.value[index] ?? props.component.collapsed ?? false\nconst canAdd = computed(\n  () =>\n    props.component.addable &&\n    !locked.value &&\n    (props.component.maxItems == null || items.value.length < props.component.maxItems),\n)\nconst canDelete = computed(\n  () =>\n    props.component.deletable &&\n    !locked.value &&\n    (props.component.minItems == null || items.value.length > props.component.minItems),\n)\nconst canClone = (item: BuilderItemState) => {\n  const block = blockOf(item.type)\n\n  return Boolean(\n    props.component.cloneable &&\n    canAdd.value &&\n    block &&\n    canAddBuilderBlock(props.component, block, items.value),\n  )\n}\n\nconst draggable = computed(\n  () =>\n    props.component.reorderable &&\n    props.component.reorderableWithDragAndDrop !== false &&\n    !locked.value &&\n    resolve('reorder') !== null,\n)\nconst buttons = computed(\n  () =>\n    props.component.reorderable &&\n    props.component.reorderableWithButtons !== false &&\n    !locked.value,\n)\nconst addAction = computed(() => resolve('add'))\nconst showEmptyPicker = computed(\n  () =>\n    canAdd.value &&\n    addAction.value !== null &&\n    !addAction.value.disabled &&\n    props.component.blocks.length > 0,\n)\nconst menu = computed(() => Boolean(props.component.blockActionsMenu) && !locked.value)\nconst runner = useActionRunner()\n// `blockActionsMenu()`: built-in actions run in the browser unless customised.\nconst onMenuAction = (name: ItemActionName, index: number) =>\n  runItemAction(resolve(name, index), { item: String(index) }, () => {\n    if (name === 'moveUp') moves.moveWithButton(index, index - 1)\n    else if (name === 'moveDown') moves.moveWithButton(index, index + 1)\n    else if (name === 'clone') cloneItem(index)\n    else if (name === 'delete') removeItem(index)\n  })\nconst onMenuExtra = (action: ActionSchema, index: number) =>\n  void runner.trigger(action, itemActionContext(context.value, { item: String(index) }))\n\nconst update = (next: unknown[]) => setValue(next as BuilderItemState[])\nconst moveItem = (from: number, to: number) => {\n  update(moveRepeaterItem(items.value, from, to))\n  collapsed.value = moveIndexedState(collapsed.value, from, to)\n  editing.value = moveIndexedState(editing.value, from, to)\n}\n// Move buttons: announced, one at a time, focus kept on the moved item.\nconst moves = useItemMoves(\n  value,\n  (from, to) => moveItem(from, to),\n  (index) => builderItemLabel(props.component, items.value, index),\n  () => items.value.length,\n)\nconst moveAnnouncement = moves.announcement\nconst moveContainer = moves.container\nconst removeItem = (index: number) => {\n  update(removeRepeaterItem(items.value, index))\n  collapsed.value = removeIndexedState(collapsed.value, index)\n  editing.value = removeIndexedState(editing.value, index)\n}\nconst cloneItem = (index: number) => {\n  update(cloneRepeaterItem(items.value, index))\n  collapsed.value = cloneIndexedState(collapsed.value, index)\n  editing.value = cloneIndexedState(editing.value, index)\n}\nconst addBlock = (block: BuilderBlockSchema) =>\n  runItemAction(addAction.value, { block: block.name }, () =>\n    update(insertBuilderItem(items.value, block)),\n  )\n// A drop runs the reorder action: in the browser, or on the server when customised.\nconst onDrop = (index: number) => {\n  const from = dragIndex.value\n  dragIndex.value = null\n  if (from === null || from === index) return\n  runItemAction(\n    resolve('reorder'),\n    { items: reorderedItemKeys(items.value.length, from, index) },\n    () => moveItem(from, index),\n  )\n}\nconst setAllCollapsed = (value: boolean) => {\n  collapsed.value = Object.fromEntries(items.value.map((_, index) => [index, value]))\n}\n\n// Previews (`blockPreviews()`): server HTML or a registered `builder-preview:{name}`.\nconst previewComponentOf = (index: number) => {\n  const name =\n    serverItemOf(index)?.previewComponent ??\n    blockOf(items.value[index]?.type ?? '')?.previewComponent\n\n  return name ? registry?.resolve(`builder-preview:${name}`) : undefined\n}\nconst hasPreview = (index: number) =>\n  props.component.blockPreviews === true &&\n  (previewComponentOf(index) !== undefined || Boolean(serverItemOf(index)?.preview))\nconst showPreview = (index: number) => hasPreview(index) && !editing.value[index]\n// Closing the editor re-renders the previews from the server.\nconst toggleEditing = (index: number) => {\n  const open = !editing.value[index]\n  editing.value = { ...editing.value, [index]: open }\n  if (!open) void form?.refresh(props.component.statePath)\n}\nconst openEditor = (index: number) => {\n  if (!locked.value) toggleEditing(index)\n}\nconst previewIsButton = computed(() => !props.component.interactivePreviews && !locked.value)\n</script>\n\n<template>\n  <!-- `deferLoading()`: a skeleton until the field scrolls into view. -->\n  <DeferredSchema\n    v-if=\"isDeferredPlaceholder(props.component)\"\n    v-slot=\"{ component: loaded }\"\n    :component=\"props.component\"\n  >\n    <BuilderField :component=\"loaded\" />\n  </DeferredSchema>\n  <FieldWrapper v-else :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <div ref=\"moveContainer\" class=\"flex flex-col gap-3\" data-slot=\"builder\">\n      <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\" data-slot=\"item-move-status\">{{\n        moveAnnouncement\n      }}</span>\n      <!-- No blocks yet: the picker is right there instead of behind a button. -->\n      <div\n        v-if=\"items.length === 0 && showEmptyPicker\"\n        data-slot=\"builder-empty\"\n        class=\"bg-muted/30 flex flex-col gap-3 rounded-lg border border-dashed p-3 sm:p-4\"\n      >\n        <div class=\"px-1\">\n          <p class=\"text-sm font-medium\">\n            {{ t('builder.empty_heading', {}, 'Add your first block') }}\n          </p>\n          <p class=\"text-muted-foreground text-sm\">\n            {{\n              t(\n                'builder.empty_description',\n                {},\n                'Pick one to start. You can add more, reorder and remove them at any time.',\n              )\n            }}\n          </p>\n        </div>\n        <BuilderBlockPickerPanel\n          :component=\"props.component\"\n          :items=\"items\"\n          class=\"bg-card max-h-[28rem] rounded-md border\"\n          @pick=\"addBlock\"\n        />\n      </div>\n      <p\n        v-else-if=\"items.length === 0\"\n        class=\"text-muted-foreground rounded-lg border border-dashed p-4 text-center text-sm\"\n      >\n        {{ t('builder.empty', {}, 'No blocks yet.') }}\n      </p>\n      <CollapseAllActions\n        v-if=\"props.component.collapsible && items.length > 0\"\n        :context=\"context\"\n        :collapse-all=\"resolve('collapseAll')\"\n        :expand-all=\"resolve('expandAll')\"\n        @collapse-all=\"setAllCollapsed(true)\"\n        @expand-all=\"setAllCollapsed(false)\"\n      />\n      <ul\n        :id=\"id\"\n        :ref=\"virtual.attach\"\n        :aria-labelledby=\"props.component.label ? fieldIds(id).label : undefined\"\n        :aria-describedby=\"aria['aria-describedby']\"\n        :style=\"virtual.style.value\"\n        :class=\"cn('grid gap-3', items.length === 0 && 'hidden')\"\n      >\n        <li\n          v-for=\"{ item, index } in visibleItems\"\n          :key=\"index\"\n          :ref=\"virtual.item\"\n          :data-index=\"index\"\n          :aria-setsize=\"virtual.range.value.active ? items.length : undefined\"\n          :aria-posinset=\"virtual.range.value.active ? index + 1 : undefined\"\n          :data-block=\"item.type\"\n          :draggable=\"draggable\"\n          :class=\"\n            cn('bg-card min-w-0 rounded-lg border shadow-xs', dragIndex === index && 'opacity-50')\n          \"\n          @dragstart=\"dragIndex = index\"\n          @dragover=\"draggable && $event.preventDefault()\"\n          @drop=\"onDrop(index)\"\n          @dragend=\"dragIndex = null\"\n        >\n          <Collapsible :open=\"!isCollapsed(index)\">\n            <div\n              class=\"flex flex-wrap items-center gap-1 border-b px-2 py-1.5\"\n              data-slot=\"item-header\"\n            >\n              <span\n                v-if=\"draggable\"\n                class=\"text-muted-foreground cursor-grab\"\n                :title=\"resolve('reorder')?.label ?? undefined\"\n                aria-hidden=\"true\"\n                ><Icon :name=\"resolve('reorder')?.icon ?? 'grip-vertical'\"\n              /></span>\n              <Icon\n                v-if=\"\n                  props.component.blockIcons &&\n                  (blockOf(item.type)?.icon ?? props.component.items[index]?.icon)\n                \"\n                :name=\"blockOf(item.type)?.icon ?? props.component.items[index]?.icon\"\n                class=\"text-muted-foreground size-4\"\n              />\n              <span\n                v-if=\"props.component.blockNumbers\"\n                class=\"text-muted-foreground text-xs tabular-nums\"\n                >{{ formatter.number(index + 1) }}</span\n              >\n              <span class=\"flex min-w-0 flex-1 items-baseline gap-2\">\n                <span\n                  v-if=\"props.component.blockLabels\"\n                  dir=\"auto\"\n                  class=\"min-w-0 shrink-0 truncate text-sm font-medium sm:max-w-[60%]\"\n                  >{{ builderItemLabel(props.component, items, index) }}</span\n                >\n                <span\n                  v-if=\"serverItemOf(index)?.summary\"\n                  dir=\"auto\"\n                  class=\"text-muted-foreground min-w-0 truncate text-sm\"\n                  data-slot=\"builder-item-summary\"\n                  >{{ serverItemOf(index)?.summary }}</span\n                >\n              </span>\n              <ItemHeaderActions\n                :context=\"context\"\n                :item-key=\"String(index)\"\n                :index=\"index\"\n                :count=\"items.length\"\n                :resolve=\"(name: ItemActionName) => resolve(name, index)\"\n                :extra-actions=\"menu || locked ? undefined : serverItemOf(index)?.actions\"\n                :buttons=\"buttons && !menu\"\n                :can-clone=\"canClone(item) && !menu\"\n                :can-delete=\"canDelete && !menu\"\n                :collapsible=\"Boolean(props.component.collapsible)\"\n                :collapsed=\"isCollapsed(index)\"\n                @move=\"moves.moveWithButton\"\n                @clone=\"cloneItem(index)\"\n                @delete=\"removeItem(index)\"\n                @toggle=\"collapsed = { ...collapsed, [index]: !isCollapsed(index) }\"\n              >\n                <Button\n                  v-if=\"hasPreview(index) && !locked\"\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  :aria-label=\"t('builder.edit_block', {}, 'Edit block')\"\n                  :aria-pressed=\"Boolean(editing[index])\"\n                  @click=\"toggleEditing(index)\"\n                  ><Icon\n                    name=\"alfakit::forms.components.builder.actions.edit\"\n                    :fallback=\"PencilIcon\"\n                /></Button>\n                <BuilderBlockActionsMenu\n                  v-if=\"menu\"\n                  :label=\"builderItemLabel(props.component, items, index) ?? ''\"\n                  :resolve=\"(name: ItemActionName) => resolve(name, index)\"\n                  :can-move-up=\"buttons && index > 0\"\n                  :can-move-down=\"buttons && index < items.length - 1\"\n                  :can-clone=\"canClone(item)\"\n                  :can-delete=\"canDelete\"\n                  :extra-actions=\"serverItemOf(index)?.actions\"\n                  @action=\"(name: ItemActionName) => onMenuAction(name, index)\"\n                  @extra=\"(action: ActionSchema) => onMenuExtra(action, index)\"\n                />\n              </ItemHeaderActions>\n            </div>\n            <CollapsibleContent>\n              <div\n                v-if=\"showPreview(index)\"\n                data-slot=\"builder-preview\"\n                :class=\"cn('p-4', previewIsButton && 'cursor-pointer')\"\n                :role=\"previewIsButton ? 'button' : undefined\"\n                :tabindex=\"previewIsButton ? 0 : undefined\"\n                :aria-label=\"\n                  previewIsButton ? t('builder.edit_block', {}, 'Edit block') : undefined\n                \"\n                @click=\"previewIsButton && openEditor(index)\"\n                @keydown.enter.prevent=\"previewIsButton && openEditor(index)\"\n                @keydown.space.prevent=\"previewIsButton && openEditor(index)\"\n              >\n                <div :class=\"cn(!props.component.interactivePreviews && 'pointer-events-none')\">\n                  <component\n                    :is=\"previewComponentOf(index)\"\n                    v-if=\"previewComponentOf(index)\"\n                    :data=\"item.data\"\n                    :block=\"item.type\"\n                    :index=\"index\"\n                  />\n                  <!-- Server-rendered `Block::preview()` HTML (Blade escapes the data). -->\n                  <!-- eslint-disable-next-line vue/no-v-html -->\n                  <div v-else v-html=\"serverItemOf(index)?.preview ?? ''\" />\n                </div>\n              </div>\n              <div v-else class=\"p-4\">\n                <SchemaRenderer\n                  :components=\"builderItemSchema(props.component, items, index)\"\n                  :columns=\"\n                    blockOf(item.type)?.columns ??\n                    props.component.items[index]?.columns ?? { default: 1 }\n                  \"\n                />\n              </div>\n            </CollapsibleContent>\n          </Collapsible>\n        </li>\n      </ul>\n      <AddActionRow\n        v-if=\"canAdd && addAction && props.component.blocks.length > 0 && items.length > 0\"\n        :alignment=\"props.component.addActionAlignment\"\n      >\n        <BuilderBlockPicker :component=\"props.component\" :items=\"items\" @pick=\"addBlock\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            :disabled=\"addAction?.disabled\"\n            data-slot=\"builder-add\"\n            ><Icon v-if=\"addAction?.icon\" :name=\"addAction.icon\" /> {{ addAction?.label }}</Button\n          >\n        </BuilderBlockPicker>\n      </AddActionRow>\n    </div>\n  </FieldWrapper>\n</template>\n"],"mappings":""}

package/dist/components/fields/BuilderField.vue.d.ts

@@ -0,0 +1,12 @@
+import type { BuilderSchema } from '@alfakit/core';
+/**
+ * A list of blocks, each with its own schema. Items use the server's per-item schema
+ * when it describes the same block, else the block's template (fresh, moved or cloned
+ * items the server has not seen yet).
+ */
+type __VLS_Props = {
+    component: BuilderSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=BuilderField.vue.d.ts.map

package/dist/components/fields/BuilderField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/BuilderField.vue"],"names":[],"mappings":"AA8bA,OAAO,KAAK,EAAwC,aAAa,EAAE,MAAM,eAAe,CAAA;AA6CxF;;;;GAIG;AACH,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,aAAa,CAAA;CAAE,CAAC;;AAq0BhD,wBAMG"}