@salesforce/templates 66.17.4 → 66.18.0

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/select/SelectContent.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import {
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/lib/utils';
+import SelectScrollDownButton from './SelectScrollDownButton.vue';
+import SelectScrollUpButton from './SelectScrollUpButton.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'item-aligned',
+    align: 'center',
+  }
+);
+const emits = defineEmits<SelectContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      data-slot="select-content"
+      :data-align-trigger="position === 'item-aligned'"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          props.class
+        )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport
+        :data-position="position"
+        :class="
+          cn(
+            'data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)'
+          )
+        "
+      >
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/select/SelectGroup.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { SelectGroup } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectGroupProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectGroup
+    data-slot="select-group"
+    v-bind="delegatedProps"
+    :class="cn('scroll-my-1 p-1', props.class)"
+  >
+    <slot />
+  </SelectGroup>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/select/SelectItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { SelectItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { CheckIcon } from '@lucide/vue';
+import { SelectItem, SelectItemIndicator, SelectItemText } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectItemProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectItem
+    data-slot="select-item"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,
+        props.class
+      )
+    "
+  >
+    <span
+      class="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
+    >
+      <SelectItemIndicator>
+        <CheckIcon class="pointer-events-none" />
+      </SelectItemIndicator>
+    </span>
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/select/SelectLabel.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { SelectLabel } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectLabelProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectLabel
+    data-slot="select-label"
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground px-1.5 py-1 text-xs', props.class)"
+  >
+    <slot />
+  </SelectLabel>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/select/SelectScrollDownButton.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { ChevronDownIcon } from '@lucide/vue';
+import { SelectScrollDownButton } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectScrollDownButton
+    data-slot="select-scroll-down-button"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        `bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4`,
+        props.class
+      )
+    "
+  >
+    <ChevronDownIcon />
+  </SelectScrollDownButton>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/select/SelectScrollUpButton.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { ChevronUpIcon } from '@lucide/vue';
+import { SelectScrollUpButton } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectScrollUpButton
+    data-slot="select-scroll-up-button"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        `bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4`,
+        props.class
+      )
+    "
+  >
+    <ChevronUpIcon />
+  </SelectScrollUpButton>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { SelectSeparator } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectSeparatorProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectSeparator
+    data-slot="select-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px pointer-events-none', props.class)"
+  />
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/select/SelectTrigger.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { ChevronDownIcon } from '@lucide/vue';
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+  defineProps<
+    SelectTriggerProps & {
+      class?: HTMLAttributes['class'];
+      size?: 'sm' | 'default';
+    }
+  >(),
+  { size: 'default' }
+);
+
+const delegatedProps = computed(() => {
+  const { class: _class, size: _size, ...rest } = props;
+  return rest;
+});
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        `border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0`,
+        props.class
+      )
+    "
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDownIcon
+        class="text-muted-foreground size-4 pointer-events-none"
+      />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/select/SelectValue.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'reka-ui';
+import { SelectValue } from 'reka-ui';
+
+const props = defineProps<SelectValueProps>();
+</script>
+
+<template>
+  <SelectValue data-slot="select-value" v-bind="props">
+    <slot />
+  </SelectValue>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/select/index.ts

@@ -0,0 +1,10 @@
+export { default as Select } from './Select.vue';
+export { default as SelectContent } from './SelectContent.vue';
+export { default as SelectGroup } from './SelectGroup.vue';
+export { default as SelectItem } from './SelectItem.vue';
+export { default as SelectLabel } from './SelectLabel.vue';
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';
+export { default as SelectSeparator } from './SelectSeparator.vue';
+export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as SelectValue } from './SelectValue.vue';

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/separator/Separator.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { Separator } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+  defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    orientation: 'horizontal',
+    decorative: true,
+  }
+);
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class
+      )
+    "
+  />
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue';

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('bg-accent animate-pulse rounded-md', props.class)"
+  />
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue';

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/sonner/Sonner.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Toaster as Sonner } from 'vue-sonner';
+import type { ToasterProps } from 'vue-sonner';
+
+/**
+ * Renders the toast container. Use with `toast()` from `vue-sonner` for
+ * messages with title, description, actions, and variants (success, error,
+ * warning).
+ *
+ * @example
+ * import { toast } from 'vue-sonner';
+ * toast('Event has been created', {
+ *   description: 'Sunday, December 03, 2023 at 9:00 AM',
+ *   action: { label: 'Undo', onClick: () => {} },
+ * });
+ * toast.success('Saved!');
+ * toast.error('Something went wrong');
+ * toast.warning('Please review');
+ */
+// Defaults for position/richColors; callers can still override via props.
+const props = withDefaults(defineProps<ToasterProps>(), {
+  position: 'top-right',
+  richColors: true,
+});
+</script>
+
+<template>
+  <Sonner v-bind="props" />
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/sonner/index.ts

@@ -0,0 +1,3 @@
+export { default as Sonner } from './Sonner.vue';
+export { default as Toaster } from './Sonner.vue';
+export { toast } from 'vue-sonner';

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/spinner/Spinner.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { Loader2Icon } from '@lucide/vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <Loader2Icon
+    role="status"
+    aria-label="Loading"
+    :class="cn('size-4 animate-spin', props.class)"
+  />
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.vue';

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/composables/useAsyncData.ts

@@ -0,0 +1,69 @@
+import type { Ref, WatchSource } from 'vue';
+import { ref, shallowRef, watch } from 'vue';
+
+/** Reactive async-data snapshot: current data, loading, and error. */
+export interface AsyncData<T> {
+  /** Latest successful result. Kept visible during a refetch. */
+  data: Ref<T | null>;
+  /** True while a fetch for the current args is in flight. */
+  loading: Ref<boolean>;
+  /** Error message from the most recent failed fetch, else null. */
+  error: Ref<string | null>;
+}
+
+/**
+ * Runs an async `fetcher` immediately and again whenever `source` changes,
+ * exposing the result as reactive refs. Stale responses (the source changed
+ * during a fetch, or the component unmounted) are dropped via a generation
+ * counter, so only the latest in-flight request can write state.
+ *
+ * The Vue analogue of the React `useAsyncData` hook and the Angular
+ * `createAsyncData` helper: the state shape (`data` / `loading` / `error`) is
+ * identical so pages port across frameworks unchanged.
+ *
+ * @typeParam TArgs - The reactive arguments passed to the fetcher.
+ * @typeParam T - The fetched result type.
+ * @param source - Reactive source (ref, getter, or array of them) whose value
+ *                 is forwarded to `fetcher`. Re-runs on change.
+ * @param fetcher - Async function producing the data for the current args.
+ * @returns Reactive `{ data, loading, error }` refs.
+ */
+export function useAsyncData<TArgs, T>(
+  source: WatchSource<TArgs>,
+  fetcher: (args: TArgs) => Promise<T>
+): AsyncData<T> {
+  const data = shallowRef<T | null>(null);
+  const loading = ref<boolean>(true);
+  const error = ref<string | null>(null);
+
+  let generation = 0;
+
+  const run = (args: TArgs): void => {
+    const current = ++generation;
+    loading.value = true;
+    error.value = null;
+
+    fetcher(args)
+      .then(result => {
+        if (current === generation) {
+          data.value = result;
+        }
+      })
+      .catch((err: unknown) => {
+        console.error(err);
+        if (current === generation) {
+          error.value =
+            err instanceof Error ? err.message : 'An error occurred';
+        }
+      })
+      .finally(() => {
+        if (current === generation) {
+          loading.value = false;
+        }
+      });
+  };
+
+  watch(source, args => run(args), { immediate: true, deep: true });
+
+  return { data, loading, error };
+}

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * feature-vue-agentforce-conversation-client – ACC Conversation Client
+ */
+
+export { default as AgentforceConversationClient } from "./components/AgentforceConversationClient.vue";
+export type {
+	AgentforceConversationClientProps,
+	ResolvedEmbedOptions,
+	StyleTokens,
+} from "./types/conversation";

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import App from '@/App.vue';
+import { router } from '@/router';
+import './styles/global.css';
+
+createApp(App).use(router).mount('#app');

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/pages/AccountObjectDetailPage.vue

@@ -0,0 +1,98 @@
+<!--
+  Copyright (c) 2026, Salesforce, Inc.,
+  All rights reserved.
+  For full license text, see the LICENSE.txt file
+-->
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { createDataSDK } from "@salesforce/platform-sdk";
+import GET_ACCOUNT_DETAIL from "../api/account/query/getAccountDetail.graphql?raw";
+import { fieldValue } from "../utils/accountFields";
+import { useAsyncData } from "../composables/useAsyncData";
+import AccountDetailContent from "../components/account/AccountDetailContent.vue";
+import AccountDetailError from "../components/account/AccountDetailError.vue";
+import AccountDetailNotFound from "../components/account/AccountDetailNotFound.vue";
+import AccountDetailSkeleton from "../components/account/AccountDetailSkeleton.vue";
+import type { AccountNode, GetAccountDetailResponse } from "../components/account/types";
+
+async function fetchAccountDetail(recordId: string): Promise<AccountNode | null | undefined> {
+	const data = await createDataSDK();
+	const result = await data.graphql!.query<GetAccountDetailResponse, { id: string }>({
+		query: GET_ACCOUNT_DETAIL,
+		variables: { id: recordId },
+	});
+
+	if (result.errors?.length) {
+		throw new Error(result.errors.map((e) => e.message).join("; "));
+	}
+
+	return result.data?.uiapi?.query?.Account?.edges?.[0]?.node;
+}
+
+const route = useRoute();
+const router = useRouter();
+const recordId = computed(() => route.params.recordId as string);
+const mainRef = ref<HTMLElement | null>(null);
+const completionAnnouncement = ref("");
+
+const { data: account, loading, error } = useAsyncData(recordId, (id) => fetchAccountDetail(id));
+
+const pageTitle = computed(() =>
+	loading.value
+		? "Loading Account | MyApp"
+		: error.value
+			? "Error | MyApp"
+			: account.value
+				? `${fieldValue(account.value.Name) ?? "Account"} | MyApp`
+				: "Account Not Found | MyApp",
+);
+
+watch(
+	pageTitle,
+	(title) => {
+		document.title = title;
+	},
+	{ immediate: true },
+);
+
+// Once loading settles, move focus to the page's h1 — unless the user has
+// already moved focus elsewhere outside <main>, in which case announce the
+// heading through the live region instead of stealing focus.
+const settleFocus = () => {
+	if (loading.value) {
+		completionAnnouncement.value = "";
+		return;
+	}
+	const main = mainRef.value;
+	const heading = main?.querySelector<HTMLElement>("h1");
+	if (heading) {
+		const active = document.activeElement;
+		if (active && active !== document.body && !main?.contains(active)) {
+			completionAnnouncement.value = heading.textContent ?? "";
+			return;
+		}
+		completionAnnouncement.value = "";
+		if (!heading.hasAttribute("tabindex")) heading.setAttribute("tabindex", "-1");
+		heading.focus();
+	}
+};
+
+// Deferred a tick so the page is attached to the document before focusing.
+onMounted(() => nextTick(settleFocus));
+watch([loading, error, account, recordId], settleFocus, { flush: "post" });
+
+const goBack = () => router.back();
+</script>
+
+<template>
+	<main ref="mainRef" class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+		<div role="status" aria-live="polite" class="sr-only">
+			{{ loading ? "Loading account" : completionAnnouncement }}
+		</div>
+		<AccountDetailSkeleton v-if="loading" />
+		<AccountDetailError v-if="error" @back="goBack" />
+		<AccountDetailNotFound v-if="!loading && !error && !account" @back="goBack" />
+		<AccountDetailContent v-if="!loading && !error && account" :account="account" />
+	</main>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/pages/Home.vue

@@ -0,0 +1,20 @@
+<!--
+  Copyright (c) 2026, Salesforce, Inc.,
+  All rights reserved.
+  For full license text, see the LICENSE.txt file
+-->
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { GlobalSearchBox } from "../features/search";
+
+onMounted(() => {
+	document.title = "Home | MyApp";
+});
+</script>
+
+<template>
+	<main class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+		<h1 class="text-2xl font-bold mb-6">Home</h1>
+		<GlobalSearchBox placeholder="Search accounts, contacts, opportunities..." />
+	</main>
+</template>