@alfakit/vue 0.1.8 → 0.1.10

package/dist/components/form/FormBlock.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormBlock.vue"],"names":[],"mappings":"AAgRA,OAAO,KAAK,EAA+B,SAAS,IAAI,eAAe,EAAE,MAAM,eAAe,CAAA;AA2B9F;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,eAAe,CAAA;CAAE,CAAC;;AA+S9C,wBAMG"}
+{"version":3,"file":"FormBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormBlock.vue"],"names":[],"mappings":"AA6RA,OAAO,KAAK,EAA+B,SAAS,IAAI,eAAe,EAAE,MAAM,eAAe,CAAA;AAmC9F;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,eAAe,CAAA;CAAE,CAAC;;AAoT9C,wBAMG"}

package/dist/components/form/FormBlock.vue_vue_type_script_setup_true_lang.js

@@ -1,106 +1,107 @@
-import { useActionRunner as e, useAlfakitProps as t, usePageSchema as ee, usePanel as n, useT as r } from "../../context.js";
-import { useStore as i } from "../../composables/use-store.js";
-import te from "../actions/ActionList.js";
-import { provideForm as ne } from "./form-context.js";
-import re from "../schema/SchemaRenderer.js";
-import { showToast as ie } from "../notifications/flash-toasts.js";
-import { FormStore as ae, applyFormRefresh as oe, formActionsVisible as a, formIdentity as o, formRefreshFor as s, isImplicitSubmit as c, isLeavingVisit as l, pageFlash as u, pageFormName as d, registerConflictForm as f, registerFormSubmitter as p, registerPageForm as m, resolvePartialProps as h, shouldResyncForm as se, wizardProgressStore as g } from "@alfakit/core";
-import { router as _ } from "@inertiajs/vue3";
-import { computed as v, createCommentVNode as ce, createElementBlock as y, createElementVNode as le, createVNode as b, defineComponent as x, onBeforeUnmount as S, onMounted as C, onScopeDispose as ue, openBlock as w, unref as T, watch as E, withModifiers as D } from "vue";
+import { useActionRunner as e, useAlfakitProps as t, usePageSchema as ee, usePanel as n, useStandalone as te, useT as ne } from "../../context.js";
+import { useStore as r } from "../../composables/use-store.js";
+import re from "../actions/ActionList.js";
+import { provideForm as ie } from "./form-context.js";
+import ae from "../schema/SchemaRenderer.js";
+import { showToast as oe } from "../notifications/flash-toasts.js";
+import { FormStore as i, applyFormRefresh as a, formActionsVisible as o, formIdPrefix as s, formIdentity as c, formRefreshFor as l, isImplicitSubmit as u, isLeavingVisit as d, pageFlash as f, pageFormName as p, registerConflictForm as m, registerFormSubmitter as se, registerPageForm as ce, resolvePartialProps as le, shouldResyncForm as ue, wizardProgressStore as de } from "@alfakit/core";
+import { router as h } from "@inertiajs/vue3";
+import { computed as g, createCommentVNode as fe, createElementBlock as _, createElementVNode as pe, createVNode as v, defineComponent as y, onBeforeUnmount as b, onMounted as x, onScopeDispose as me, openBlock as S, unref as C, useId as w, watch as T, withModifiers as E } from "vue";
 //#region src/components/form/FormBlock.vue?vue&type=script&setup=true&lang.ts
-var O = ["disabled"], k = {
+var D = ["disabled"], O = {
 	key: 0,
 	"data-slot": "form-actions",
 	class: "border-t pt-6"
-}, A = /*@__PURE__*/ x({
+}, k = /*@__PURE__*/ y({
 	__name: "FormBlock",
 	props: { block: {} },
-	setup(x) {
-		let A = x, j = n(), M = ee(), N = t(), P = e(), F = r(), I = v(() => M.value?.token ?? ""), L = new ae(A.block, {
-			token: I.value,
-			component: A.block.component,
-			refreshUrl: j.value.endpoints.schemaRefresh,
-			optionsUrl: j.value.endpoints.schemaOptions,
-			validateUrl: j.value.endpoints.schemaValidate,
-			onNotifications: (e) => e.forEach((e) => ie(e)),
+	setup(y) {
+		let k = y, A = n(), j = ee(), M = t(), N = e(), P = ne(), F = g(() => j.value?.token ?? ""), I = te(), L = w(), R = new i(k.block, {
+			token: F.value,
+			component: k.block.component,
+			idPrefix: I ? s(`form-${L}`) : void 0,
+			refreshUrl: A.value.endpoints.schemaRefresh,
+			optionsUrl: A.value.endpoints.schemaOptions,
+			validateUrl: A.value.endpoints.schemaValidate,
+			onNotifications: (e) => e.forEach((e) => oe(e)),
 			onRefreshed: () => {
-				A.block.liveFilters && _.reload({ only: h(["page"]) });
+				k.block.liveFilters && h.reload({ only: le(["page"]) });
 			}
 		});
-		ne(L);
-		let R;
-		C(() => {
-			let e = d(A.block.component);
-			e && (R = m(e, L));
-		});
+		ie(R);
 		let z;
-		C(() => {
-			A.block.component === "form" && (z = f(L));
-		}), S(() => z?.());
+		x(() => {
+			let e = p(k.block.component);
+			e && (z = ce(e, R));
+		});
 		let B;
-		C(() => {
-			B = p(A.block.component, (e, t) => Z(e, t));
-		}), S(() => {
-			R?.(), B?.();
-		}), E(() => o(M.value, A.block), () => L.fill(A.block)), E(I, (e) => L.setToken(e));
-		let V = null, H = !1, U = !1, W = null;
-		E(() => A.block, (e) => {
-			H && (H = !1, L.fill(e)), U && (U = !1, L.isDirty || L.fill(e));
-		}), E(() => N.value.errors, (e) => L.setErrors(e ?? {}), { immediate: !0 });
-		let G = i(L.store), K = v(() => ({
-			token: I.value,
+		x(() => {
+			k.block.component === "form" && (B = m(R));
+		}), b(() => B?.());
+		let V;
+		x(() => {
+			V = se(k.block.component, (e, t) => Q(e, t));
+		}), b(() => {
+			z?.(), V?.();
+		}), T(() => c(j.value, k.block), () => R.fill(k.block)), T(F, (e) => R.setToken(e));
+		let H = null, U = !1, W = !1, G = null;
+		T(() => k.block, (e) => {
+			U && (U = !1, R.fill(e)), W && (W = !1, R.isDirty || R.fill(e));
+		}), T(() => M.value.errors, (e) => R.setErrors(e ?? {}), { immediate: !0 });
+		let K = r(R.store), q = g(() => ({
+			token: F.value,
 			component: "page"
-		})), q = !1, J = v(() => A.block.actions.map((e) => ({
+		})), J = !1, Y = g(() => k.block.actions.map((e) => ({
 			...e,
 			hasModal: !1
-		}))), Y = v(() => J.value[0]), de = i(g(L)), X = v(() => a(A.block, de.value)), Z = async (e, t) => {
-			if (e.url && !e.hasAction) return P.trigger(e, t);
-			q = !0, V = A.block, L.setProcessing(!0), L.whenSettled(() => P.execute(e, t, L.state.values));
-		}, Q = null, fe = _.on("start", (e) => {
+		}))), X = g(() => Y.value[0]), he = r(de(R)), Z = g(() => o(k.block, he.value)), Q = async (e, t) => {
+			if (e.url && !e.hasAction) return N.trigger(e, t);
+			J = !0, H = k.block, R.setProcessing(!0), R.whenSettled(() => N.execute(e, t, R.state.values));
+		}, $ = null, ge = h.on("start", (e) => {
 			let t = e.detail.visit;
-			q && !Q && t.method !== "get" && (Q = t.id), t.method !== "get" && (W = A.block);
-		}), pe = _.on("success", (e) => {
-			let t = Q;
-			if (!t && se(u(e.detail.page), L)) {
-				A.block === W ? U = !0 : L.fill(A.block);
+			J && !$ && t.method !== "get" && ($ = t.id), t.method !== "get" && (G = k.block);
+		}), _e = h.on("success", (e) => {
+			let t = $;
+			if (!t && ue(f(e.detail.page), R)) {
+				k.block === G ? W = !0 : R.fill(k.block);
 				return;
 			}
-			t && (e.detail.visitId ?? t) === t && u(e.detail.page).alfakitAction?.status !== "halted" && (A.block === V ? H = !0 : L.fill(A.block));
-		}), me = _.on("success", (e) => {
-			let t = s(u(e.detail.page), A.block.component);
-			t && oe(L, t);
-		}), he = _.on("finish", (e) => {
-			Q && e.detail.visit.id !== Q || (L.setProcessing(!1), q = !1, Q = null);
-		}), ge = _.on("before", (e) => {
-			j.value.unsavedChangesAlerts && L.isDirty && !q && l(e.detail.visit) && !window.confirm(F("unsaved_changes", {}, "You have unsaved changes. Leave anyway?")) && e.preventDefault();
+			t && (e.detail.visitId ?? t) === t && f(e.detail.page).alfakitAction?.status !== "halted" && (k.block === H ? U = !0 : R.fill(k.block));
+		}), ve = h.on("success", (e) => {
+			let t = l(f(e.detail.page), k.block.component);
+			t && a(R, t);
+		}), ye = h.on("finish", (e) => {
+			$ && e.detail.visit.id !== $ || (R.setProcessing(!1), J = !1, $ = null);
+		}), be = h.on("before", (e) => {
+			A.value.unsavedChangesAlerts && R.isDirty && !J && d(e.detail.visit) && !window.confirm(P("unsaved_changes", {}, "You have unsaved changes. Leave anyway?")) && e.preventDefault();
 		});
-		ue(() => {
-			fe(), pe(), me(), he(), ge(), L.destroy();
+		me(() => {
+			ge(), _e(), ve(), ye(), be(), R.destroy();
 		});
-		let $ = () => {
-			Y.value && X.value && Z(Y.value, K.value);
-		}, _e = (e) => {
-			Y.value && X.value && c(e, e.currentTarget) && (e.preventDefault(), Z(Y.value, K.value));
+		let xe = () => {
+			X.value && Z.value && Q(X.value, q.value);
+		}, Se = (e) => {
+			X.value && Z.value && u(e, e.currentTarget) && (e.preventDefault(), Q(X.value, q.value));
 		};
-		return (e, t) => (w(), y("form", {
+		return (e, t) => (S(), _("form", {
 			"data-slot": "form-block",
 			class: "flex flex-col gap-6",
-			onSubmit: D($, ["prevent"]),
-			onKeydown: _e
-		}, [le("fieldset", {
-			disabled: T(G).processing || A.block.operation === "view",
+			onSubmit: E(xe, ["prevent"]),
+			onKeydown: Se
+		}, [pe("fieldset", {
+			disabled: C(K).processing || k.block.operation === "view",
 			class: "contents"
-		}, [b(re, {
-			components: T(G).components,
-			columns: T(G).columns
-		}, null, 8, ["components", "columns"])], 8, O), J.value.length > 0 && X.value ? (w(), y("div", k, [b(te, {
-			actions: J.value,
-			context: K.value,
-			"on-trigger": Z
-		}, null, 8, ["actions", "context"])])) : ce("", !0)], 32));
+		}, [v(ae, {
+			components: C(K).components,
+			columns: C(K).columns
+		}, null, 8, ["components", "columns"])], 8, D), Y.value.length > 0 && Z.value ? (S(), _("div", O, [v(re, {
+			actions: Y.value,
+			context: q.value,
+			"on-trigger": Q
+		}, null, 8, ["actions", "context"])])) : fe("", !0)], 32));
 	}
 });
 //#endregion
-export { A as default };
+export { k as default };
 
 //# sourceMappingURL=FormBlock.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/form/FormBlock.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormBlock.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createElementVNode","_unref","_createVNode","SchemaRenderer","ActionList","_createCommentVNode","ActionList_default","SchemaRenderer_default","_hoisted_1","_hoisted_2","FormBlock_vue_vue_type_script_setup_true_lang_default","props","__props","panel","usePanel","page","usePageSchema","pageProps","useAlfakitProps","runner","useActionRunner","t","useT","token","computed","store","FormStore","notifications","showToast","n","router","resolvePartialProps","unregisterPageForm","name","pageFormName","registerPageForm","unregisterConflictForm","onMounted","registerConflictForm","onBeforeUnmount","unregisterSubmitter","registerFormSubmitter","trigger","action","ctx","watch","formIdentity","value","submittedBlock","refillPending","resyncPending","visitBlock","block","errors","state","useStore","context","submitting","actions","primary","progress","wizardProgressStore","showActions","formActionsVisible","submitVisit","offStart","visit","event","offSuccess","id","shouldResyncForm","pageFlash","offRefresh","refresh","formRefreshFor","applyFormRefresh","offFinish","offBefore","isLeavingVisit","onSubmit","onKeydown","isImplicitSubmit","openBlock","createElementBlock","withModifiers","createElementVNode","unref","createVNode","createCommentVNode"],"sources":["../../../src/components/form/FormBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionContext, ActionSchema, FormBlock as FormBlockSchema } from '@alfakit/core'\nimport {\n  FormStore,\n  applyFormRefresh,\n  formActionsVisible,\n  formIdentity,\n  formRefreshFor,\n  isImplicitSubmit,\n  isLeavingVisit,\n  pageFlash,\n  pageFormName,\n  registerConflictForm,\n  registerFormSubmitter,\n  registerPageForm,\n  resolvePartialProps,\n  shouldResyncForm,\n  wizardProgressStore,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { computed, onBeforeUnmount, onMounted, onScopeDispose, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useActionRunner, useAlfakitProps, usePageSchema, usePanel, useT } from '../../context'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport { showToast } from '../notifications/flash-toasts'\nimport { provideForm } from './form-context'\n\n/**\n * A page form: its state lives in a FormStore, and its buttons are actions that post the\n * current values through the action endpoint.\n */\nconst props = defineProps<{ block: FormBlockSchema }>()\n\nconst panel = usePanel()\nconst page = usePageSchema()\nconst pageProps = useAlfakitProps()\nconst runner = useActionRunner()\nconst t = useT()\nconst token = computed(() => page.value?.token ?? '')\n\nconst store = new FormStore(props.block, {\n  token: token.value,\n  component: props.block.component,\n  refreshUrl: panel.value.endpoints.schemaRefresh,\n  optionsUrl: panel.value.endpoints.schemaOptions,\n  validateUrl: panel.value.endpoints.schemaValidate,\n  // A halted wizard step shows what its hook sent.\n  onNotifications: (notifications) => notifications.forEach((n) => showToast(n)),\n  // Live dashboard filters are applied by the refresh; the widgets reload to follow.\n  onRefreshed: () => {\n    if (props.block.liveFilters) router.reload({ only: resolvePartialProps(['page']) })\n  },\n})\n\nprovideForm(store)\n\n// Named forms of custom pages (`<PageForm name>`) publish their store for page method calls\n// (browser only: mounted hooks never run during a server render).\nlet unregisterPageForm: (() => void) | undefined\n\nonMounted(() => {\n  const name = pageFormName(props.block.component)\n\n  if (name) unregisterPageForm = registerPageForm(name, store)\n})\n\n// Edit pages: the conflict banner diffs and merges the main form (`detectConflicts()`).\nlet unregisterConflictForm: (() => void) | undefined\n\nonMounted(() => {\n  if (props.block.component === 'form') unregisterConflictForm = registerConflictForm(store)\n})\n\nonBeforeUnmount(() => unregisterConflictForm?.())\n\n// Buttons elsewhere with `formId('form')` (a header \"Save\") submit through this form.\nlet unregisterSubmitter: (() => void) | undefined\n\nonMounted(() => {\n  unregisterSubmitter = registerFormSubmitter(props.block.component, (action, ctx) =>\n    trigger(action, ctx),\n  )\n})\n\nonBeforeUnmount(() => {\n  unregisterPageForm?.()\n  unregisterSubmitter?.()\n})\n\n// The store survives reloads of the same form (table sorting/paging, polling,\n// relation-manager actions all deliver a new `block` object); only a different form\n// identity starts from server state again. The token is re-issued per response, so it\n// is swapped in place instead of being part of the identity.\nwatch(\n  () => formIdentity(page.value, props.block),\n  () => store.fill(props.block),\n)\n\nwatch(token, (value) => store.setToken(value))\n\n// After this form's own successful submit, refill from the server's new state. The new\n// block may arrive before or after Inertia's `success` event, so handle both orders.\nlet submittedBlock: FormBlockSchema | null = null\nlet refillPending = false\n// Another action succeeded and its new block has not arrived yet.\nlet resyncPending = false\n// The block when the latest non-GET visit started, to tell whether its response arrived.\nlet visitBlock: FormBlockSchema | null = null\n\nwatch(\n  () => props.block,\n  (block) => {\n    if (refillPending) {\n      refillPending = false\n      store.fill(block)\n    }\n\n    if (resyncPending) {\n      resyncPending = false\n\n      if (!store.isDirty) store.fill(block)\n    }\n  },\n)\n\nwatch(\n  () => pageProps.value.errors,\n  (errors) => store.setErrors((errors as Record<string, string>) ?? {}),\n  { immediate: true },\n)\n\nconst state = useStore(store.store)\nconst context = computed<ActionContext>(() => ({ token: token.value, component: 'page' }))\nlet submitting = false\n\nconst actions = computed<ActionSchema[]>(() =>\n  props.block.actions.map((action) => ({ ...action, hasModal: false })),\n)\nconst primary = computed(() => actions.value[0])\n\n// Wizard forms (`HasWizard` pages) show their buttons on the last step only.\nconst progress = useStore(wizardProgressStore(store))\nconst showActions = computed(() => formActionsVisible(props.block, progress.value))\n\nconst trigger = async (action: ActionSchema, ctx: ActionContext) => {\n  if (action.url && !action.hasAction) {\n    return runner.trigger(action, ctx)\n  }\n\n  submitting = true\n  submittedBlock = props.block\n  store.setProcessing(true)\n  // A click that blurred a live field started a refresh: send the state it returns.\n  store.whenSettled(() => runner.execute(action, ctx, store.state.values))\n}\n\n// Track this form's own submit visit so unrelated reloads finishing meanwhile (polling,\n// relation-manager paging) neither end its processing state nor count as its success.\nlet submitVisit: string | null = null\n\nconst offStart = router.on('start', (event) => {\n  const visit = event.detail.visit\n\n  if (submitting && !submitVisit && visit.method !== 'get') {\n    submitVisit = visit.id\n  }\n\n  if (visit.method !== 'get') visitBlock = props.block\n})\n\nconst offSuccess = router.on('success', (event) => {\n  const id = submitVisit\n\n  // Another action changed the record: show the server's new form unless it holds edits.\n  if (!id && shouldResyncForm(pageFlash(event.detail.page), store)) {\n    if (props.block !== visitBlock) {\n      store.fill(props.block)\n    } else {\n      resyncPending = true\n    }\n\n    return\n  }\n\n  if (!id || (event.detail.visitId ?? id) !== id) return\n\n  // A halted action (rate limit, `halt()`) saved nothing: keep what the user typed.\n  if (pageFlash(event.detail.page).alfakitAction?.status === 'halted') return\n\n  if (props.block !== submittedBlock) {\n    store.fill(props.block)\n  } else {\n    refillPending = true\n  }\n})\n\n// `refreshFormData([...])`: an action changed the record; copy those fields in.\nconst offRefresh = router.on('success', (event) => {\n  const refresh = formRefreshFor(pageFlash(event.detail.page), props.block.component)\n\n  if (refresh) applyFormRefresh(store, refresh)\n})\n\nconst offFinish = router.on('finish', (event) => {\n  if (submitVisit && event.detail.visit.id !== submitVisit) return\n\n  store.setProcessing(false)\n  submitting = false\n  submitVisit = null\n})\n\nconst offBefore = router.on('before', (event) => {\n  if (!panel.value.unsavedChangesAlerts) {\n    return\n  }\n\n  if (\n    store.isDirty &&\n    !submitting &&\n    isLeavingVisit(event.detail.visit) &&\n    !window.confirm(t('unsaved_changes', {}, 'You have unsaved changes. Leave anyway?'))\n  ) {\n    event.preventDefault()\n  }\n})\n\nonScopeDispose(() => {\n  offStart()\n  offSuccess()\n  offRefresh()\n  offFinish()\n  offBefore()\n  store.destroy()\n})\n\nconst onSubmit = () => {\n  if (primary.value && showActions.value) {\n    void trigger(primary.value, context.value)\n  }\n}\n\n// Enter in a text field runs the primary action (actions are type=\"button\").\nconst onKeydown = (event: KeyboardEvent) => {\n  if (\n    primary.value &&\n    showActions.value &&\n    isImplicitSubmit(event, event.currentTarget as HTMLFormElement)\n  ) {\n    event.preventDefault()\n    void trigger(primary.value, context.value)\n  }\n}\n</script>\n\n<template>\n  <form\n    data-slot=\"form-block\"\n    class=\"flex flex-col gap-6\"\n    @submit.prevent=\"onSubmit\"\n    @keydown=\"onKeydown\"\n  >\n    <fieldset :disabled=\"state.processing || props.block.operation === 'view'\" class=\"contents\">\n      <SchemaRenderer :components=\"state.components\" :columns=\"state.columns\" />\n    </fieldset>\n    <div v-if=\"actions.length > 0 && showActions\" data-slot=\"form-actions\" class=\"border-t pt-6\">\n      <ActionList :actions=\"actions\" :context=\"context\" :on-trigger=\"trigger\" />\n    </div>\n  </form>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"FormBlock.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createElementVNode","_unref","_createVNode","SchemaRenderer","ActionList","_createCommentVNode","ActionList_default","SchemaRenderer_default","_hoisted_1","_hoisted_2","FormBlock_vue_vue_type_script_setup_true_lang_default","props","__props","panel","usePanel","page","usePageSchema","pageProps","useAlfakitProps","runner","useActionRunner","t","useT","token","computed","standalone","useStandalone","instanceId","useId","store","FormStore","formIdPrefix","notifications","showToast","n","router","resolvePartialProps","unregisterPageForm","name","pageFormName","registerPageForm","unregisterConflictForm","onMounted","registerConflictForm","onBeforeUnmount","unregisterSubmitter","registerFormSubmitter","trigger","action","ctx","watch","formIdentity","value","submittedBlock","refillPending","resyncPending","visitBlock","block","errors","state","useStore","context","submitting","actions","primary","progress","wizardProgressStore","showActions","formActionsVisible","submitVisit","offStart","visit","event","offSuccess","id","shouldResyncForm","pageFlash","offRefresh","refresh","formRefreshFor","applyFormRefresh","offFinish","offBefore","isLeavingVisit","onSubmit","onKeydown","isImplicitSubmit","openBlock","createElementBlock","withModifiers","createElementVNode","unref","createVNode","createCommentVNode"],"sources":["../../../src/components/form/FormBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ActionContext, ActionSchema, FormBlock as FormBlockSchema } from '@alfakit/core'\nimport {\n  FormStore,\n  applyFormRefresh,\n  formActionsVisible,\n  formIdPrefix,\n  formIdentity,\n  formRefreshFor,\n  isImplicitSubmit,\n  isLeavingVisit,\n  pageFlash,\n  pageFormName,\n  registerConflictForm,\n  registerFormSubmitter,\n  registerPageForm,\n  resolvePartialProps,\n  shouldResyncForm,\n  wizardProgressStore,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { computed, onBeforeUnmount, onMounted, onScopeDispose, useId, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport {\n  useActionRunner,\n  useAlfakitProps,\n  usePageSchema,\n  usePanel,\n  useStandalone,\n  useT,\n} from '../../context'\nimport ActionList from '../actions/ActionList.vue'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport { showToast } from '../notifications/flash-toasts'\nimport { provideForm } from './form-context'\n\n/**\n * A page form: its state lives in a FormStore, and its buttons are actions that post the\n * current values through the action endpoint.\n */\nconst props = defineProps<{ block: FormBlockSchema }>()\n\nconst panel = usePanel()\nconst page = usePageSchema()\nconst pageProps = useAlfakitProps()\nconst runner = useActionRunner()\nconst t = useT()\nconst token = computed(() => page.value?.token ?? '')\n\n// Several standalone components can share a page (and field names): each form gets its own\n// field id prefix, so labels and errors point at their own inputs.\nconst standalone = useStandalone()\nconst instanceId = useId()\nconst store = new FormStore(props.block, {\n  token: token.value,\n  component: props.block.component,\n  idPrefix: standalone ? formIdPrefix(`form-${instanceId}`) : undefined,\n  refreshUrl: panel.value.endpoints.schemaRefresh,\n  optionsUrl: panel.value.endpoints.schemaOptions,\n  validateUrl: panel.value.endpoints.schemaValidate,\n  // A halted wizard step shows what its hook sent.\n  onNotifications: (notifications) => notifications.forEach((n) => showToast(n)),\n  // Live dashboard filters are applied by the refresh; the widgets reload to follow.\n  onRefreshed: () => {\n    if (props.block.liveFilters) router.reload({ only: resolvePartialProps(['page']) })\n  },\n})\n\nprovideForm(store)\n\n// Named forms of custom pages (`<PageForm name>`) publish their store for page method calls\n// (browser only: mounted hooks never run during a server render).\nlet unregisterPageForm: (() => void) | undefined\n\nonMounted(() => {\n  const name = pageFormName(props.block.component)\n\n  if (name) unregisterPageForm = registerPageForm(name, store)\n})\n\n// Edit pages: the conflict banner diffs and merges the main form (`detectConflicts()`).\nlet unregisterConflictForm: (() => void) | undefined\n\nonMounted(() => {\n  if (props.block.component === 'form') unregisterConflictForm = registerConflictForm(store)\n})\n\nonBeforeUnmount(() => unregisterConflictForm?.())\n\n// Buttons elsewhere with `formId('form')` (a header \"Save\") submit through this form.\nlet unregisterSubmitter: (() => void) | undefined\n\nonMounted(() => {\n  unregisterSubmitter = registerFormSubmitter(props.block.component, (action, ctx) =>\n    trigger(action, ctx),\n  )\n})\n\nonBeforeUnmount(() => {\n  unregisterPageForm?.()\n  unregisterSubmitter?.()\n})\n\n// The store survives reloads of the same form (table sorting/paging, polling,\n// relation-manager actions all deliver a new `block` object); only a different form\n// identity starts from server state again. The token is re-issued per response, so it\n// is swapped in place instead of being part of the identity.\nwatch(\n  () => formIdentity(page.value, props.block),\n  () => store.fill(props.block),\n)\n\nwatch(token, (value) => store.setToken(value))\n\n// After this form's own successful submit, refill from the server's new state. The new\n// block may arrive before or after Inertia's `success` event, so handle both orders.\nlet submittedBlock: FormBlockSchema | null = null\nlet refillPending = false\n// Another action succeeded and its new block has not arrived yet.\nlet resyncPending = false\n// The block when the latest non-GET visit started, to tell whether its response arrived.\nlet visitBlock: FormBlockSchema | null = null\n\nwatch(\n  () => props.block,\n  (block) => {\n    if (refillPending) {\n      refillPending = false\n      store.fill(block)\n    }\n\n    if (resyncPending) {\n      resyncPending = false\n\n      if (!store.isDirty) store.fill(block)\n    }\n  },\n)\n\nwatch(\n  () => pageProps.value.errors,\n  (errors) => store.setErrors((errors as Record<string, string>) ?? {}),\n  { immediate: true },\n)\n\nconst state = useStore(store.store)\nconst context = computed<ActionContext>(() => ({ token: token.value, component: 'page' }))\nlet submitting = false\n\nconst actions = computed<ActionSchema[]>(() =>\n  props.block.actions.map((action) => ({ ...action, hasModal: false })),\n)\nconst primary = computed(() => actions.value[0])\n\n// Wizard forms (`HasWizard` pages) show their buttons on the last step only.\nconst progress = useStore(wizardProgressStore(store))\nconst showActions = computed(() => formActionsVisible(props.block, progress.value))\n\nconst trigger = async (action: ActionSchema, ctx: ActionContext) => {\n  if (action.url && !action.hasAction) {\n    return runner.trigger(action, ctx)\n  }\n\n  submitting = true\n  submittedBlock = props.block\n  store.setProcessing(true)\n  // A click that blurred a live field started a refresh: send the state it returns.\n  store.whenSettled(() => runner.execute(action, ctx, store.state.values))\n}\n\n// Track this form's own submit visit so unrelated reloads finishing meanwhile (polling,\n// relation-manager paging) neither end its processing state nor count as its success.\nlet submitVisit: string | null = null\n\nconst offStart = router.on('start', (event) => {\n  const visit = event.detail.visit\n\n  if (submitting && !submitVisit && visit.method !== 'get') {\n    submitVisit = visit.id\n  }\n\n  if (visit.method !== 'get') visitBlock = props.block\n})\n\nconst offSuccess = router.on('success', (event) => {\n  const id = submitVisit\n\n  // Another action changed the record: show the server's new form unless it holds edits.\n  if (!id && shouldResyncForm(pageFlash(event.detail.page), store)) {\n    if (props.block !== visitBlock) {\n      store.fill(props.block)\n    } else {\n      resyncPending = true\n    }\n\n    return\n  }\n\n  if (!id || (event.detail.visitId ?? id) !== id) return\n\n  // A halted action (rate limit, `halt()`) saved nothing: keep what the user typed.\n  if (pageFlash(event.detail.page).alfakitAction?.status === 'halted') return\n\n  if (props.block !== submittedBlock) {\n    store.fill(props.block)\n  } else {\n    refillPending = true\n  }\n})\n\n// `refreshFormData([...])`: an action changed the record; copy those fields in.\nconst offRefresh = router.on('success', (event) => {\n  const refresh = formRefreshFor(pageFlash(event.detail.page), props.block.component)\n\n  if (refresh) applyFormRefresh(store, refresh)\n})\n\nconst offFinish = router.on('finish', (event) => {\n  if (submitVisit && event.detail.visit.id !== submitVisit) return\n\n  store.setProcessing(false)\n  submitting = false\n  submitVisit = null\n})\n\nconst offBefore = router.on('before', (event) => {\n  if (!panel.value.unsavedChangesAlerts) {\n    return\n  }\n\n  if (\n    store.isDirty &&\n    !submitting &&\n    isLeavingVisit(event.detail.visit) &&\n    !window.confirm(t('unsaved_changes', {}, 'You have unsaved changes. Leave anyway?'))\n  ) {\n    event.preventDefault()\n  }\n})\n\nonScopeDispose(() => {\n  offStart()\n  offSuccess()\n  offRefresh()\n  offFinish()\n  offBefore()\n  store.destroy()\n})\n\nconst onSubmit = () => {\n  if (primary.value && showActions.value) {\n    void trigger(primary.value, context.value)\n  }\n}\n\n// Enter in a text field runs the primary action (actions are type=\"button\").\nconst onKeydown = (event: KeyboardEvent) => {\n  if (\n    primary.value &&\n    showActions.value &&\n    isImplicitSubmit(event, event.currentTarget as HTMLFormElement)\n  ) {\n    event.preventDefault()\n    void trigger(primary.value, context.value)\n  }\n}\n</script>\n\n<template>\n  <form\n    data-slot=\"form-block\"\n    class=\"flex flex-col gap-6\"\n    @submit.prevent=\"onSubmit\"\n    @keydown=\"onKeydown\"\n  >\n    <fieldset :disabled=\"state.processing || props.block.operation === 'view'\" class=\"contents\">\n      <SchemaRenderer :components=\"state.components\" :columns=\"state.columns\" />\n    </fieldset>\n    <div v-if=\"actions.length > 0 && showActions\" data-slot=\"form-actions\" class=\"border-t pt-6\">\n      <ActionList :actions=\"actions\" :context=\"context\" :on-trigger=\"trigger\" />\n    </div>\n  </form>\n</template>\n"],"mappings":"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"}

package/dist/components/layout/CalloutComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalloutComponent.js","names":["_sfc_main","CalloutComponent_vue_vue_type_script_setup_true_lang_default","CalloutComponent_default"],"sources":["../../../src/components/layout/CalloutComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CalloutSchema } from '@alfakit/core'\nimport { actionsAlignmentClass } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport ActionList from '../actions/ActionList.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst CALLOUT_COLORS: Record<string, string> = {\n  primary: 'border-primary/30 bg-primary/5 [&_[data-slot=callout-icon]]:text-primary',\n  secondary: 'border-border bg-secondary [&_[data-slot=callout-icon]]:text-secondary-foreground',\n  success: 'border-success/30 bg-success/5 [&_[data-slot=callout-icon]]:text-success',\n  warning: 'border-warning/40 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning',\n  danger: 'border-destructive/30 bg-destructive/5 [&_[data-slot=callout-icon]]:text-destructive',\n  info: 'border-info/30 bg-info/5 [&_[data-slot=callout-icon]]:text-info',\n  gray: 'border-border bg-muted/40 [&_[data-slot=callout-icon]]:text-muted-foreground',\n}\n\nconst CALLOUT_ICON_SIZES: Record<string, string> = {\n  xs: 'size-4',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-7',\n  '2xl': 'size-8',\n}\n\nconst props = defineProps<{ component: CalloutSchema }>()\nconst context = usePageActionContext()\nconst tone = computed(() => props.component.color ?? props.component.status)\n// `iconColor()`, or the status colour once `color(null)` removed the background.\nconst iconColor = computed(\n  () => props.component.iconColor ?? (props.component.color ? undefined : props.component.status),\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"callout\"\n    :data-color=\"props.component.color ?? 'gray'\"\n    :data-status=\"props.component.status\"\n    :role=\"tone === 'danger' || tone === 'warning' ? 'alert' : 'note'\"\n    :class=\"\n      cn(\n        'flex items-start gap-3 rounded-lg border p-4 text-sm',\n        colorClass(CALLOUT_COLORS, props.component.color),\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <span v-if=\"props.component.icon\" data-slot=\"callout-icon\" class=\"mt-0.5 shrink-0\">\n      <Icon\n        :name=\"props.component.icon\"\n        :class=\"\n          cn(\n            (props.component.iconSize && CALLOUT_ICON_SIZES[props.component.iconSize]) || 'size-5',\n            iconColor && colorClass(textColorClasses, iconColor),\n          )\n        \"\n      />\n    </span>\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n      <p v-if=\"props.component.heading\" class=\"leading-6 font-semibold\">\n        {{ props.component.heading }}\n      </p>\n      <div\n        v-if=\"props.component.description\"\n        class=\"text-muted-foreground alfakit-prose\"\n        v-html=\"props.component.description\"\n      />\n      <ActionList\n        v-if=\"props.component.actions && props.component.actions.length > 0\"\n        :actions=\"props.component.actions\"\n        :context=\"context\"\n        size=\"sm\"\n        :class=\"cn('mt-2', actionsAlignmentClass(props.component.footerActionsAlignment))\"\n      />\n      <MixedContent :items=\"props.component.footer\" name=\"callout-footer\" class=\"mt-2\" />\n    </div>\n    <MixedContent\n      :items=\"props.component.controls\"\n      name=\"callout-controls\"\n      class=\"-me-1 -mt-1 shrink-0 gap-1\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"CalloutComponent.js","names":["_sfc_main","CalloutComponent_vue_vue_type_script_setup_true_lang_default","CalloutComponent_default"],"sources":["../../../src/components/layout/CalloutComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CalloutSchema } from '@alfakit/core'\nimport { actionsAlignmentClass } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport ActionList from '../actions/ActionList.vue'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport MixedContent from './MixedContent.vue'\n\nconst CALLOUT_COLORS: Record<string, string> = {\n  primary: 'border-primary/30 bg-primary/5 [&_[data-slot=callout-icon]]:text-primary',\n  secondary: 'border-border bg-secondary [&_[data-slot=callout-icon]]:text-secondary-foreground',\n  success: 'border-success/30 bg-success/5 [&_[data-slot=callout-icon]]:text-success',\n  warning: 'border-warning/40 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning',\n  danger: 'border-destructive/30 bg-destructive/5 [&_[data-slot=callout-icon]]:text-destructive',\n  info: 'border-info/30 bg-info/5 [&_[data-slot=callout-icon]]:text-info',\n  gray: 'border-border bg-muted/40 [&_[data-slot=callout-icon]]:text-muted-foreground',\n}\n\nconst CALLOUT_ICON_SIZES: Record<string, string> = {\n  xs: 'size-4',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-7',\n  '2xl': 'size-8',\n}\n\nconst props = defineProps<{ component: CalloutSchema }>()\n// Inside a form the actions run as field actions of this component, so `$get` / `$set`\n// reach the form (like a section's header actions).\nconst form = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (form ? fieldContext.value : pageContext))\nconst tone = computed(() => props.component.color ?? props.component.status)\n// `iconColor()`, or the status colour once `color(null)` removed the background.\nconst iconColor = computed(\n  () => props.component.iconColor ?? (props.component.color ? undefined : props.component.status),\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"callout\"\n    :data-color=\"props.component.color ?? 'gray'\"\n    :data-status=\"props.component.status\"\n    :role=\"tone === 'danger' || tone === 'warning' ? 'alert' : 'note'\"\n    :class=\"\n      cn(\n        'flex items-start gap-3 rounded-lg border p-4 text-sm',\n        colorClass(CALLOUT_COLORS, props.component.color),\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <span v-if=\"props.component.icon\" data-slot=\"callout-icon\" class=\"mt-0.5 shrink-0\">\n      <Icon\n        :name=\"props.component.icon\"\n        :class=\"\n          cn(\n            (props.component.iconSize && CALLOUT_ICON_SIZES[props.component.iconSize]) || 'size-5',\n            iconColor && colorClass(textColorClasses, iconColor),\n          )\n        \"\n      />\n    </span>\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n      <p v-if=\"props.component.heading\" class=\"leading-6 font-semibold\">\n        {{ props.component.heading }}\n      </p>\n      <div\n        v-if=\"props.component.description\"\n        class=\"text-muted-foreground alfakit-prose\"\n        v-html=\"props.component.description\"\n      />\n      <ActionList\n        v-if=\"props.component.actions && props.component.actions.length > 0\"\n        :actions=\"props.component.actions\"\n        :context=\"context\"\n        size=\"sm\"\n        :class=\"cn('mt-2', actionsAlignmentClass(props.component.footerActionsAlignment))\"\n      />\n      <MixedContent\n        :items=\"props.component.footer\"\n        :context=\"context\"\n        name=\"callout-footer\"\n        class=\"mt-2\"\n      />\n    </div>\n    <MixedContent\n      :items=\"props.component.controls\"\n      :context=\"context\"\n      name=\"callout-controls\"\n      class=\"-me-1 -mt-1 shrink-0 gap-1\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/layout/CalloutComponent.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalloutComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/CalloutComponent.vue"],"names":[],"mappings":"AA2FA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AA6BlD,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,aAAa,CAAA;CAAE,CAAC;;AA+JhD,wBAMG"}
+{"version":3,"file":"CalloutComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/CalloutComponent.vue"],"names":[],"mappings":"AAwGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AA+BlD,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,aAAa,CAAA;CAAE,CAAC;;AAwKhD,wBAMG"}

package/dist/components/layout/CalloutComponent.vue_vue_type_script_setup_true_lang.js

@@ -3,26 +3,28 @@ import { cn as t } from "../../lib/utils.js";
 import { colorClass as n, textColorClasses as r } from "../../lib/colors.js";
 import i from "../../lib/Icon.js";
 import a from "../actions/ActionList.js";
-import o from "./MixedContent.js";
-import { actionsAlignmentClass as s } from "@alfakit/core";
-import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, openBlock as _, toDisplayString as v, unref as y } from "vue";
+import { useOptionalFormStore as o } from "../form/form-context.js";
+import { useFieldActionContext as s } from "../schema/field-actions.js";
+import c from "./MixedContent.js";
+import { actionsAlignmentClass as l } from "@alfakit/core";
+import { computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, mergeProps as _, normalizeClass as v, openBlock as y, toDisplayString as b, unref as x } from "vue";
 //#region src/components/layout/CalloutComponent.vue?vue&type=script&setup=true&lang.ts
-var b = [
+var S = [
 	"data-color",
 	"data-status",
 	"role"
-], x = {
+], C = {
 	key: 0,
 	"data-slot": "callout-icon",
 	class: "mt-0.5 shrink-0"
-}, S = { class: "flex min-w-0 flex-1 flex-col gap-1" }, C = {
+}, w = { class: "flex min-w-0 flex-1 flex-col gap-1" }, T = {
 	key: 0,
 	class: "leading-6 font-semibold"
-}, w = ["innerHTML"], T = /*@__PURE__*/ m({
+}, E = ["innerHTML"], D = /*@__PURE__*/ g({
 	__name: "CalloutComponent",
 	props: { component: {} },
-	setup(m) {
-		let T = {
+	setup(g) {
+		let D = {
 			primary: "border-primary/30 bg-primary/5 [&_[data-slot=callout-icon]]:text-primary",
 			secondary: "border-border bg-secondary [&_[data-slot=callout-icon]]:text-secondary-foreground",
 			success: "border-success/30 bg-success/5 [&_[data-slot=callout-icon]]:text-success",
@@ -30,58 +32,60 @@ var b = [
 			danger: "border-destructive/30 bg-destructive/5 [&_[data-slot=callout-icon]]:text-destructive",
 			info: "border-info/30 bg-info/5 [&_[data-slot=callout-icon]]:text-info",
 			gray: "border-border bg-muted/40 [&_[data-slot=callout-icon]]:text-muted-foreground"
-		}, E = {
+		}, O = {
 			xs: "size-4",
 			sm: "size-4",
 			md: "size-5",
 			lg: "size-6",
 			xl: "size-7",
 			"2xl": "size-8"
-		}, D = m, O = e(), k = c(() => D.component.color ?? D.component.status), A = c(() => D.component.iconColor ?? (D.component.color ? void 0 : D.component.status));
-		return (e, c) => (_(), d("div", h({
+		}, k = g, A = o(), j = e(), M = s(() => k.component), N = u(() => A ? M.value : j), P = u(() => k.component.color ?? k.component.status), F = u(() => k.component.iconColor ?? (k.component.color ? void 0 : k.component.status));
+		return (e, o) => (y(), p("div", _({
 			"data-slot": "callout",
-			"data-color": D.component.color ?? "gray",
-			"data-status": D.component.status,
-			role: k.value === "danger" || k.value === "warning" ? "alert" : "note",
-			class: y(t)("flex items-start gap-3 rounded-lg border p-4 text-sm", y(n)(T, D.component.color))
-		}, D.component.extraAttributes), [
-			D.component.icon ? (_(), d("span", x, [p(y(i), {
-				name: D.component.icon,
-				class: g(y(t)(D.component.iconSize && E[D.component.iconSize] || "size-5", A.value && y(n)(y(r), A.value)))
-			}, null, 8, ["name", "class"])])) : u("", !0),
-			f("div", S, [
-				D.component.heading ? (_(), d("p", C, v(D.component.heading), 1)) : u("", !0),
-				D.component.description ? (_(), d("div", {
+			"data-color": k.component.color ?? "gray",
+			"data-status": k.component.status,
+			role: P.value === "danger" || P.value === "warning" ? "alert" : "note",
+			class: x(t)("flex items-start gap-3 rounded-lg border p-4 text-sm", x(n)(D, k.component.color))
+		}, k.component.extraAttributes), [
+			k.component.icon ? (y(), p("span", C, [h(x(i), {
+				name: k.component.icon,
+				class: v(x(t)(k.component.iconSize && O[k.component.iconSize] || "size-5", F.value && x(n)(x(r), F.value)))
+			}, null, 8, ["name", "class"])])) : f("", !0),
+			m("div", w, [
+				k.component.heading ? (y(), p("p", T, b(k.component.heading), 1)) : f("", !0),
+				k.component.description ? (y(), p("div", {
 					key: 1,
 					class: "text-muted-foreground alfakit-prose",
-					innerHTML: D.component.description
-				}, null, 8, w)) : u("", !0),
-				D.component.actions && D.component.actions.length > 0 ? (_(), l(a, {
+					innerHTML: k.component.description
+				}, null, 8, E)) : f("", !0),
+				k.component.actions && k.component.actions.length > 0 ? (y(), d(a, {
 					key: 2,
-					actions: D.component.actions,
-					context: y(O),
+					actions: k.component.actions,
+					context: N.value,
 					size: "sm",
-					class: g(y(t)("mt-2", y(s)(D.component.footerActionsAlignment)))
+					class: v(x(t)("mt-2", x(l)(k.component.footerActionsAlignment)))
 				}, null, 8, [
 					"actions",
 					"context",
 					"class"
-				])) : u("", !0),
-				p(o, {
-					items: D.component.footer,
+				])) : f("", !0),
+				h(c, {
+					items: k.component.footer,
+					context: N.value,
 					name: "callout-footer",
 					class: "mt-2"
-				}, null, 8, ["items"])
+				}, null, 8, ["items", "context"])
 			]),
-			p(o, {
-				items: D.component.controls,
+			h(c, {
+				items: k.component.controls,
+				context: N.value,
 				name: "callout-controls",
 				class: "-me-1 -mt-1 shrink-0 gap-1"
-			}, null, 8, ["items"])
-		], 16, b));
+			}, null, 8, ["items", "context"])
+		], 16, S));
 	}
 });
 //#endregion
-export { T as default };
+export { D as default };
 
 //# sourceMappingURL=CalloutComponent.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/layout/CalloutComponent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalloutComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","Icon","_normalizeClass","_createCommentVNode","_createElementVNode","_toDisplayString","_createBlock","ActionList","MixedContent","Icon_default","ActionList_default","MixedContent_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","CalloutComponent_vue_vue_type_script_setup_true_lang_default","CALLOUT_COLORS","CALLOUT_ICON_SIZES","props","__props","context","usePageActionContext","tone","computed","iconColor","openBlock","createElementBlock","mergeProps","unref","cn","colorClass","createVNode","normalizeClass","textColorClasses","createCommentVNode","createElementVNode","toDisplayString","createBlock","actionsAlignmentClass"],"sources":["../../../src/components/layout/CalloutComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CalloutSchema } from '@alfakit/core'\nimport { actionsAlignmentClass } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport ActionList from '../actions/ActionList.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst CALLOUT_COLORS: Record<string, string> = {\n  primary: 'border-primary/30 bg-primary/5 [&_[data-slot=callout-icon]]:text-primary',\n  secondary: 'border-border bg-secondary [&_[data-slot=callout-icon]]:text-secondary-foreground',\n  success: 'border-success/30 bg-success/5 [&_[data-slot=callout-icon]]:text-success',\n  warning: 'border-warning/40 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning',\n  danger: 'border-destructive/30 bg-destructive/5 [&_[data-slot=callout-icon]]:text-destructive',\n  info: 'border-info/30 bg-info/5 [&_[data-slot=callout-icon]]:text-info',\n  gray: 'border-border bg-muted/40 [&_[data-slot=callout-icon]]:text-muted-foreground',\n}\n\nconst CALLOUT_ICON_SIZES: Record<string, string> = {\n  xs: 'size-4',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-7',\n  '2xl': 'size-8',\n}\n\nconst props = defineProps<{ component: CalloutSchema }>()\nconst context = usePageActionContext()\nconst tone = computed(() => props.component.color ?? props.component.status)\n// `iconColor()`, or the status colour once `color(null)` removed the background.\nconst iconColor = computed(\n  () => props.component.iconColor ?? (props.component.color ? undefined : props.component.status),\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"callout\"\n    :data-color=\"props.component.color ?? 'gray'\"\n    :data-status=\"props.component.status\"\n    :role=\"tone === 'danger' || tone === 'warning' ? 'alert' : 'note'\"\n    :class=\"\n      cn(\n        'flex items-start gap-3 rounded-lg border p-4 text-sm',\n        colorClass(CALLOUT_COLORS, props.component.color),\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <span v-if=\"props.component.icon\" data-slot=\"callout-icon\" class=\"mt-0.5 shrink-0\">\n      <Icon\n        :name=\"props.component.icon\"\n        :class=\"\n          cn(\n            (props.component.iconSize && CALLOUT_ICON_SIZES[props.component.iconSize]) || 'size-5',\n            iconColor && colorClass(textColorClasses, iconColor),\n          )\n        \"\n      />\n    </span>\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n      <p v-if=\"props.component.heading\" class=\"leading-6 font-semibold\">\n        {{ props.component.heading }}\n      </p>\n      <div\n        v-if=\"props.component.description\"\n        class=\"text-muted-foreground alfakit-prose\"\n        v-html=\"props.component.description\"\n      />\n      <ActionList\n        v-if=\"props.component.actions && props.component.actions.length > 0\"\n        :actions=\"props.component.actions\"\n        :context=\"context\"\n        size=\"sm\"\n        :class=\"cn('mt-2', actionsAlignmentClass(props.component.footerActionsAlignment))\"\n      />\n      <MixedContent :items=\"props.component.footer\" name=\"callout-footer\" class=\"mt-2\" />\n    </div>\n    <MixedContent\n      :items=\"props.component.controls\"\n      name=\"callout-controls\"\n      class=\"-me-1 -mt-1 shrink-0 gap-1\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAMsB,IAAyC;GAC7C,SAAS;GACT,WAAW;GACX,SAAS;GACT,SAAS;GACT,QAAQ;GACR,MAAM;GACN,MAAM;EACR,GAEMC,IAA6C;GACjD,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT,GAEMC,IAAQC,GACRC,IAAUC,EAAqB,GAC/BC,IAAOC,QAAeL,EAAM,UAAU,SAASA,EAAM,UAAU,MAAM,GAErEM,IAAYD,QACVL,EAAM,UAAU,cAAcA,EAAM,UAAU,QAAQ,KAAA,IAAYA,EAAM,UAAU,OAC1F;oBAIExB,EAAA,GAAAC,EA+CM,OA/CNC,EA+CM;GA9CJ,aAAU;GACT,cAAYsB,EAAM,UAAU,SAAK;GACjC,eAAaA,EAAM,UAAU;GAC7B,MAAMI,EAAA,UAAI,YAAiBA,EAAA,UAAI,YAAA,UAAA;GAC/B,OAAczB,EAAAgC,CAAA,CAAE,CAAA,wDAA0EhC,EAAAiC,CAAA,CAAU,CAACd,GAAgBE,EAAM,UAAU,KAAK,CAAA;EAMnI,GAAAA,EAAM,UAAU,eAAe,GAAA;GAE3BA,EAAM,UAAU,QAA5BxB,EAAA,GAAAC,EAUO,QAVPgB,GAUO,CATLb,EAQED,EAAAE,CAAA,GAAA;IAPC,MAAMmB,EAAM,UAAU;IACtB,OAAKlB,EAAaH,EAAAgC,CAAA,CAAE,CAAeX,EAAM,UAAU,YAAYD,EAAmBC,EAAM,UAAU,aAAQ,UAA4BM,EAAA,SAAa3B,EAAAiC,CAAA,CAAU,CAACjC,EAAAoC,CAAA,GAAkBT,EAAA,KAAS,CAAA,CAAA;;GAQ9LtB,EAiBM,OAjBNU,GAiBM;IAhBKM,EAAM,UAAU,WAAzBxB,EAAA,GAAAC,EAEI,KAFJkB,GAEIV,EADCe,EAAM,UAAU,OAAO,GAAA,CAAA,KAAAgB,EAAA,IAAA,EAAA;IAGpBhB,EAAM,UAAU,eADxBxB,EAAA,GAAAC,EAIE,OAAA;;KAFA,OAAM;KACN,WAAQuB,EAAM,UAAU;;IAGlBA,EAAM,UAAU,WAAWA,EAAM,UAAU,QAAQ,SAAM,KADjExB,EAAA,GAAAU,EAMEC,GAAA;;KAJC,SAASa,EAAM,UAAU;KACzB,SAASrB,EAAAuB,CAAA;KACV,MAAK;KACJ,OAAKpB,EAAEH,EAAAgC,CAAA,CAAE,CAAA,QAAShC,EAAAyC,CAAA,CAAqB,CAACpB,EAAM,UAAU,sBAAsB,CAAA,CAAA;;;;;;IAEjFpB,EAAmFQ,GAAA;KAApE,OAAOY,EAAM,UAAU;KAAQ,MAAK;KAAiB,OAAM;;;GAE5EpB,EAIEQ,GAAA;IAHC,OAAOY,EAAM,UAAU;IACxB,MAAK;IACL,OAAM"}
+{"version":3,"file":"CalloutComponent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","Icon","_normalizeClass","_createCommentVNode","_createElementVNode","_toDisplayString","_createBlock","ActionList","MixedContent","Icon_default","ActionList_default","MixedContent_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","CalloutComponent_vue_vue_type_script_setup_true_lang_default","CALLOUT_COLORS","CALLOUT_ICON_SIZES","props","__props","form","useOptionalFormStore","pageContext","usePageActionContext","fieldContext","useFieldActionContext","context","computed","tone","iconColor","openBlock","createElementBlock","mergeProps","unref","cn","colorClass","createVNode","normalizeClass","textColorClasses","createCommentVNode","createElementVNode","toDisplayString","createBlock","actionsAlignmentClass"],"sources":["../../../src/components/layout/CalloutComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CalloutSchema } from '@alfakit/core'\nimport { actionsAlignmentClass } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport ActionList from '../actions/ActionList.vue'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport MixedContent from './MixedContent.vue'\n\nconst CALLOUT_COLORS: Record<string, string> = {\n  primary: 'border-primary/30 bg-primary/5 [&_[data-slot=callout-icon]]:text-primary',\n  secondary: 'border-border bg-secondary [&_[data-slot=callout-icon]]:text-secondary-foreground',\n  success: 'border-success/30 bg-success/5 [&_[data-slot=callout-icon]]:text-success',\n  warning: 'border-warning/40 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning',\n  danger: 'border-destructive/30 bg-destructive/5 [&_[data-slot=callout-icon]]:text-destructive',\n  info: 'border-info/30 bg-info/5 [&_[data-slot=callout-icon]]:text-info',\n  gray: 'border-border bg-muted/40 [&_[data-slot=callout-icon]]:text-muted-foreground',\n}\n\nconst CALLOUT_ICON_SIZES: Record<string, string> = {\n  xs: 'size-4',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-7',\n  '2xl': 'size-8',\n}\n\nconst props = defineProps<{ component: CalloutSchema }>()\n// Inside a form the actions run as field actions of this component, so `$get` / `$set`\n// reach the form (like a section's header actions).\nconst form = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (form ? fieldContext.value : pageContext))\nconst tone = computed(() => props.component.color ?? props.component.status)\n// `iconColor()`, or the status colour once `color(null)` removed the background.\nconst iconColor = computed(\n  () => props.component.iconColor ?? (props.component.color ? undefined : props.component.status),\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"callout\"\n    :data-color=\"props.component.color ?? 'gray'\"\n    :data-status=\"props.component.status\"\n    :role=\"tone === 'danger' || tone === 'warning' ? 'alert' : 'note'\"\n    :class=\"\n      cn(\n        'flex items-start gap-3 rounded-lg border p-4 text-sm',\n        colorClass(CALLOUT_COLORS, props.component.color),\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <span v-if=\"props.component.icon\" data-slot=\"callout-icon\" class=\"mt-0.5 shrink-0\">\n      <Icon\n        :name=\"props.component.icon\"\n        :class=\"\n          cn(\n            (props.component.iconSize && CALLOUT_ICON_SIZES[props.component.iconSize]) || 'size-5',\n            iconColor && colorClass(textColorClasses, iconColor),\n          )\n        \"\n      />\n    </span>\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n      <p v-if=\"props.component.heading\" class=\"leading-6 font-semibold\">\n        {{ props.component.heading }}\n      </p>\n      <div\n        v-if=\"props.component.description\"\n        class=\"text-muted-foreground alfakit-prose\"\n        v-html=\"props.component.description\"\n      />\n      <ActionList\n        v-if=\"props.component.actions && props.component.actions.length > 0\"\n        :actions=\"props.component.actions\"\n        :context=\"context\"\n        size=\"sm\"\n        :class=\"cn('mt-2', actionsAlignmentClass(props.component.footerActionsAlignment))\"\n      />\n      <MixedContent\n        :items=\"props.component.footer\"\n        :context=\"context\"\n        name=\"callout-footer\"\n        class=\"mt-2\"\n      />\n    </div>\n    <MixedContent\n      :items=\"props.component.controls\"\n      :context=\"context\"\n      name=\"callout-controls\"\n      class=\"-me-1 -mt-1 shrink-0 gap-1\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAaA,IAAMsB,IAAyC;GAC7C,SAAS;GACT,WAAW;GACX,SAAS;GACT,SAAS;GACT,QAAQ;GACR,MAAM;GACN,MAAM;EACR,GAEMC,IAA6C;GACjD,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT,GAEMC,IAAQC,GAGRC,IAAOC,EAAqB,GAC5BC,IAAcC,EAAqB,GACnCC,IAAeC,QAA4BP,EAAM,SAAS,GAC1DQ,IAAUC,QAAgBP,IAAOI,EAAa,QAAQF,CAAY,GAClEM,IAAOD,QAAeT,EAAM,UAAU,SAASA,EAAM,UAAU,MAAM,GAErEW,IAAYF,QACVT,EAAM,UAAU,cAAcA,EAAM,UAAU,QAAQ,KAAA,IAAYA,EAAM,UAAU,OAC1F;oBAIExB,EAAA,GAAAC,EAqDM,OArDNC,EAqDM;GApDJ,aAAU;GACT,cAAYsB,EAAM,UAAU,SAAK;GACjC,eAAaA,EAAM,UAAU;GAC7B,MAAMU,EAAA,UAAI,YAAiBA,EAAA,UAAI,YAAA,UAAA;GAC/B,OAAc/B,EAAAqC,CAAA,CAAE,CAAA,wDAA0ErC,EAAAsC,CAAA,CAAU,CAACnB,GAAgBE,EAAM,UAAU,KAAK,CAAA;EAMnI,GAAAA,EAAM,UAAU,eAAe,GAAA;GAE3BA,EAAM,UAAU,QAA5BxB,EAAA,GAAAC,EAUO,QAVPgB,GAUO,CATLb,EAQED,EAAAE,CAAA,GAAA;IAPC,MAAMmB,EAAM,UAAU;IACtB,OAAKlB,EAAaH,EAAAqC,CAAA,CAAE,CAAehB,EAAM,UAAU,YAAYD,EAAmBC,EAAM,UAAU,aAAQ,UAA4BW,EAAA,SAAahC,EAAAsC,CAAA,CAAU,CAACtC,EAAAyC,CAAA,GAAkBT,EAAA,KAAS,CAAA,CAAA;;GAQ9L3B,EAsBM,OAtBNU,GAsBM;IArBKM,EAAM,UAAU,WAAzBxB,EAAA,GAAAC,EAEI,KAFJkB,GAEIV,EADCe,EAAM,UAAU,OAAO,GAAA,CAAA,KAAAqB,EAAA,IAAA,EAAA;IAGpBrB,EAAM,UAAU,eADxBxB,EAAA,GAAAC,EAIE,OAAA;;KAFA,OAAM;KACN,WAAQuB,EAAM,UAAU;;IAGlBA,EAAM,UAAU,WAAWA,EAAM,UAAU,QAAQ,SAAM,KADjExB,EAAA,GAAAU,EAMEC,GAAA;;KAJC,SAASa,EAAM,UAAU;KACzB,SAASQ,EAAA;KACV,MAAK;KACJ,OAAK1B,EAAEH,EAAAqC,CAAA,CAAE,CAAA,QAASrC,EAAA8C,CAAA,CAAqB,CAACzB,EAAM,UAAU,sBAAsB,CAAA,CAAA;;;;;;IAEjFpB,EAKEQ,GAAA;KAJC,OAAOY,EAAM,UAAU;KACvB,SAASQ,EAAA;KACV,MAAK;KACL,OAAM;;;GAGV5B,EAKEQ,GAAA;IAJC,OAAOY,EAAM,UAAU;IACvB,SAASQ,EAAA;IACV,MAAK;IACL,OAAM"}

package/dist/components/layout/EmptyStateComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateComponent.js","names":["_sfc_main","EmptyStateComponent_vue_vue_type_script_setup_true_lang_default","EmptyStateComponent_default"],"sources":["../../../src/components/layout/EmptyStateComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EmptyStateComponentSchema } from '@alfakit/core'\nimport { colorClass, iconBackgroundColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport ActionList from '../actions/ActionList.vue'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: EmptyStateComponentSchema }>()\nconst context = usePageActionContext()\n</script>\n\n<template>\n  <div\n    data-slot=\"empty-state\"\n    :class=\"\n      cn(\n        'flex flex-col items-center justify-center gap-3 px-6 py-10 text-center',\n        props.component.contained && 'rounded-xl border border-dashed',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <div\n      v-if=\"props.component.icon\"\n      :class=\"\n        cn(\n          'flex size-12 items-center justify-center rounded-full',\n          colorClass(iconBackgroundColorClasses, props.component.color),\n        )\n      \"\n    >\n      <Icon :name=\"props.component.icon\" class=\"size-6\" />\n    </div>\n    <h3 v-if=\"props.component.heading\" class=\"text-base font-semibold\">\n      {{ props.component.heading }}\n    </h3>\n    <div\n      v-if=\"props.component.description\"\n      class=\"text-muted-foreground max-w-md text-sm\"\n      v-html=\"props.component.description\"\n    />\n    <ActionList\n      v-if=\"props.component.actions && props.component.actions.length > 0\"\n      :actions=\"props.component.actions\"\n      :context=\"context\"\n      class=\"mt-2 justify-center\"\n    />\n    <MixedContent\n      :items=\"props.component.footer\"\n      name=\"empty-state-footer\"\n      class=\"justify-center\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"EmptyStateComponent.js","names":["_sfc_main","EmptyStateComponent_vue_vue_type_script_setup_true_lang_default","EmptyStateComponent_default"],"sources":["../../../src/components/layout/EmptyStateComponent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EmptyStateComponentSchema } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { colorClass, iconBackgroundColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport ActionList from '../actions/ActionList.vue'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport MixedContent from './MixedContent.vue'\n\nconst props = defineProps<{ component: EmptyStateComponentSchema }>()\n// Inside a form the actions run as field actions of this component, so `$get` / `$set`\n// reach the form (like a section's header actions).\nconst form = useOptionalFormStore()\nconst pageContext = usePageActionContext()\nconst fieldContext = useFieldActionContext(() => props.component)\nconst context = computed(() => (form ? fieldContext.value : pageContext))\n</script>\n\n<template>\n  <div\n    data-slot=\"empty-state\"\n    :class=\"\n      cn(\n        'flex flex-col items-center justify-center gap-3 px-6 py-10 text-center',\n        props.component.contained && 'rounded-xl border border-dashed',\n      )\n    \"\n    v-bind=\"props.component.extraAttributes\"\n  >\n    <div\n      v-if=\"props.component.icon\"\n      :class=\"\n        cn(\n          'flex size-12 items-center justify-center rounded-full',\n          colorClass(iconBackgroundColorClasses, props.component.color),\n        )\n      \"\n    >\n      <Icon :name=\"props.component.icon\" class=\"size-6\" />\n    </div>\n    <h3 v-if=\"props.component.heading\" class=\"text-base font-semibold\">\n      {{ props.component.heading }}\n    </h3>\n    <div\n      v-if=\"props.component.description\"\n      class=\"text-muted-foreground max-w-md text-sm\"\n      v-html=\"props.component.description\"\n    />\n    <ActionList\n      v-if=\"props.component.actions && props.component.actions.length > 0\"\n      :actions=\"props.component.actions\"\n      :context=\"context\"\n      class=\"mt-2 justify-center\"\n    />\n    <MixedContent\n      :items=\"props.component.footer\"\n      :context=\"context\"\n      name=\"empty-state-footer\"\n      class=\"justify-center\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/layout/EmptyStateComponent.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/EmptyStateComponent.vue"],"names":[],"mappings":"AA0DA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAQ9D,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,yBAAyB,CAAA;CAAE,CAAC;;AAoH5D,wBAMG"}
+{"version":3,"file":"EmptyStateComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/EmptyStateComponent.vue"],"names":[],"mappings":"AAmEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAW9D,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,yBAAyB,CAAA;CAAE,CAAC;;AA2H5D,wBAMG"}

package/dist/components/layout/EmptyStateComponent.vue_vue_type_script_setup_true_lang.js

@@ -3,49 +3,52 @@ import { cn as t } from "../../lib/utils.js";
 import { colorClass as n, iconBackgroundColorClasses as r } from "../../lib/colors.js";
 import i from "../../lib/Icon.js";
 import a from "../actions/ActionList.js";
-import o from "./MixedContent.js";
-import { createBlock as s, createCommentVNode as c, createElementBlock as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, toDisplayString as h, unref as g } from "vue";
+import { useOptionalFormStore as o } from "../form/form-context.js";
+import { useFieldActionContext as s } from "../schema/field-actions.js";
+import c from "./MixedContent.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, openBlock as _, toDisplayString as v, unref as y } from "vue";
 //#region src/components/layout/EmptyStateComponent.vue?vue&type=script&setup=true&lang.ts
-var _ = {
+var b = {
 	key: 1,
 	class: "text-base font-semibold"
-}, v = ["innerHTML"], y = /*@__PURE__*/ d({
+}, x = ["innerHTML"], S = /*@__PURE__*/ m({
 	__name: "EmptyStateComponent",
 	props: { component: {} },
-	setup(d) {
-		let y = d, b = e();
-		return (e, d) => (m(), l("div", f({
+	setup(m) {
+		let S = m, C = o(), w = e(), T = s(() => S.component), E = l(() => C ? T.value : w);
+		return (e, o) => (_(), f("div", h({
 			"data-slot": "empty-state",
-			class: g(t)("flex flex-col items-center justify-center gap-3 px-6 py-10 text-center", y.component.contained && "rounded-xl border border-dashed")
-		}, y.component.extraAttributes), [
-			y.component.icon ? (m(), l("div", {
+			class: y(t)("flex flex-col items-center justify-center gap-3 px-6 py-10 text-center", S.component.contained && "rounded-xl border border-dashed")
+		}, S.component.extraAttributes), [
+			S.component.icon ? (_(), f("div", {
 				key: 0,
-				class: p(g(t)("flex size-12 items-center justify-center rounded-full", g(n)(g(r), y.component.color)))
-			}, [u(g(i), {
-				name: y.component.icon,
+				class: g(y(t)("flex size-12 items-center justify-center rounded-full", y(n)(y(r), S.component.color)))
+			}, [p(y(i), {
+				name: S.component.icon,
 				class: "size-6"
-			}, null, 8, ["name"])], 2)) : c("", !0),
-			y.component.heading ? (m(), l("h3", _, h(y.component.heading), 1)) : c("", !0),
-			y.component.description ? (m(), l("div", {
+			}, null, 8, ["name"])], 2)) : d("", !0),
+			S.component.heading ? (_(), f("h3", b, v(S.component.heading), 1)) : d("", !0),
+			S.component.description ? (_(), f("div", {
 				key: 2,
 				class: "text-muted-foreground max-w-md text-sm",
-				innerHTML: y.component.description
-			}, null, 8, v)) : c("", !0),
-			y.component.actions && y.component.actions.length > 0 ? (m(), s(a, {
+				innerHTML: S.component.description
+			}, null, 8, x)) : d("", !0),
+			S.component.actions && S.component.actions.length > 0 ? (_(), u(a, {
 				key: 3,
-				actions: y.component.actions,
-				context: g(b),
+				actions: S.component.actions,
+				context: E.value,
 				class: "mt-2 justify-center"
-			}, null, 8, ["actions", "context"])) : c("", !0),
-			u(o, {
-				items: y.component.footer,
+			}, null, 8, ["actions", "context"])) : d("", !0),
+			p(c, {
+				items: S.component.footer,
+				context: E.value,
 				name: "empty-state-footer",
 				class: "justify-center"
-			}, null, 8, ["items"])
+			}, null, 8, ["items", "context"])
 		], 16));
 	}
 });
 //#endregion
-export { y as default };
+export { S as default };
 
 //# sourceMappingURL=EmptyStateComponent.vue_vue_type_script_setup_true_lang.js.map