@revenexx/cover 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Revenexx GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# @revenexx/cover
+
+The Cover design system, distributed as a **Nuxt layer**.
+
+## Usage
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  extends: ["@revenexx/cover"],
+});
+```
+
+The consuming app must provide the modules the layer relies on:
+`@nuxt/ui`, `@pinia/nuxt` and `@nuxtjs/i18n` (register the `de` and `en`
+locales so the layer's messages merge).
+
+## What the layer contributes
+
+| Area | Contents |
+|---|---|
+| `app/components/ui/**` | Generic UI components, auto-imported as `Ui*` (`UiFormsPasswordInput`, `UiFeedbackEmptyState`, `UiFeedbackErrorBoundary`, `UiFeedbackNotFound`, `UiFormsCountrySelection`, `UiDebugPiniaStateCard`, `UiAppShell`) |
+| `app/config/` | `themes.ts` (theme definitions), `palette.ts` (color tokens), `countries.ts` |
+| `app/composables/useThemeStore.ts` | Pinia store applying Nuxt UI color tokens + `--ui-radius`, persisted under `cover-theme` |
+| `i18n/locales/{de,en}/cover.json` | Component messages, merged into the consuming app by @nuxtjs/i18n layer support |
+
+Non-auto-imported files are reachable via package exports:
+
+```ts
+import type { Theme } from "@revenexx/cover/config/themes";
+```
+
+## Authoring rules
+
+- **Internal imports must be relative** — `~/` resolves to the consuming app's
+  `srcDir`, not the layer.
+- Components must not depend on app domain composables (`useProducts` etc.);
+  domain-coupled components stay in their app.
+- New user-visible strings go into `i18n/locales/{de,en}/cover.json`.

package/app/api/account.ts

@@ -0,0 +1,8 @@
+export const accountApi = {
+	profile: () => "/api/account/profile",
+	orders: () => "/api/account/orders",
+	addresses: () => "/api/account/addresses",
+	addressUpdate: (id: string) => `/api/account/address/${id}`,
+	addressCreate: () => "/api/account/address",
+	addressDelete: (id: string) => `/api/account/address/${id}`,
+};

package/app/api/categories.ts

@@ -0,0 +1,3 @@
+export const categoriesApi = {
+	list: () => "/api/categories",
+};

package/app/api/checkout.ts

@@ -0,0 +1,6 @@
+export const checkoutApi = {
+	session: () => "/api/checkout/session",
+	schema: (key: string) => `/api/checkout/schema/${key}`,
+	profile: () => "/api/checkout/profile",
+	orders: () => "/api/orders",
+};

package/app/api/images.ts

@@ -0,0 +1,4 @@
+export const imagesApi = {
+	list: (name: string) => `/api/images/list/${name}`,
+	detail: (filename: string) => `/api/images/detail/${filename}`,
+};

package/app/api/markets.ts

@@ -0,0 +1,3 @@
+export const marketsApi = {
+	list: () => "/api/markets",
+};

package/app/api/product.ts

@@ -0,0 +1,3 @@
+export const productApi = {
+	detail: (id: string) => `/api/product/${id}`,
+};

package/app/api/products.ts

@@ -0,0 +1,4 @@
+export const productsApi = {
+	list: () => "/api/products",
+	byId: (id: string) => `/api/products/${id}`,
+};

package/app/api/search.ts

@@ -0,0 +1,4 @@
+export const searchApi = {
+	search: () => "/api/typesense/search",
+	suggest: () => "/api/typesense/suggest",
+};

package/app/app.config.ts

@@ -0,0 +1,29 @@
+import { DEFAULT_ICON_WEIGHT, nuxtUiIcons } from "./config/icons";
+
+/**
+ * Layer defaults for the BFF service registry. Every server data domain is
+ * resolved through a registry key — `mock` serves the bundled demo data.
+ * Consuming apps override individual keys in their own app.config.ts to
+ * switch a domain to a live implementation (e.g. accountService: "sdk").
+ *
+ * `ui.icons` maps Nuxt UI's built-in icons to Solar in the default weight;
+ * the theme store re-applies them with the active theme's weight at runtime.
+ */
+export default defineAppConfig({
+	schemaService: "local-file",
+	accountService: "mock",
+	authService: "mock",
+	productService: "mock",
+	categoryService: "mock",
+	marketService: "mock",
+	cartService: "mock",
+	paymentService: "mock",
+	shippingService: "mock",
+	priceService: "mock",
+	orderService: "mock",
+	inventoryService: "mock",
+	themeService: "mock",
+	ui: {
+		icons: nuxtUiIcons(DEFAULT_ICON_WEIGHT),
+	},
+});

package/app/assets/css/cover.css

@@ -0,0 +1,25 @@
+/*
+ * Cover design system base styles, shipped with the layer.
+ *
+ * Container width: the storefront uses a wide layout on large screens
+ * (adopted from the relation prototype). --ui-container drives Nuxt UI's
+ * <UContainer>; the header bars reference the same variable.
+ */
+:root {
+	--ui-container: 1536px;
+	/* Main header bar: roomier than the Nuxt UI default (4rem) — raised
+	   to 5rem, then +15% breathing room top/bottom (Michael, 2026-06-10). */
+	--ui-header-height: 5.75rem;
+}
+
+/* Warning text on light surfaces needs a darker shade than the Nuxt UI
+   default (500) — yellow-500 text on a yellow-tinted badge is barely
+   readable. 600 keeps the hue, fixes the contrast. The doubled selector
+   outweighs Nuxt UI's own :root declaration regardless of CSS order. */
+:root:root {
+	--ui-warning: var(--ui-color-warning-600);
+}
+
+.dark.dark {
+	--ui-warning: var(--ui-color-warning-400);
+}

package/app/components/account/AccountMenu.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { icon } = useIcons();
+
+/**
+ * Header account action. Logged in it links straight to the account
+ * dashboard (logout and the full navigation live in the account area);
+ * logged out it links to the login page.
+ */
+const { t } = useI18n();
+const { user } = useAccount();
+const auth = useAuthStore();
+const localePath = useLocalePath();
+</script>
+
+<template>
+	<LayoutHeaderActionItem
+		v-if="auth.isLoggedIn"
+		:icon="icon('users')"
+		:label="user.name"
+		:aria-label="t('menu.accountAriaLabel')"
+		:to="localePath('/account')"
+	/>
+
+	<LayoutHeaderActionItem
+		v-else
+		:icon="icon('users')"
+		:label="t('header.signIn')"
+		:to="localePath('/login')"
+	/>
+</template>

package/app/components/account/AccountShell.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/**
+ * Account area shell: sidebar with the full B2B navigation tree next to the
+ * page content. Account pages wrap their content in this component.
+ */
+defineSlots<{ default(): unknown }>();
+</script>
+
+<template>
+	<UContainer class="py-6 lg:py-8">
+		<div class="flex flex-col lg:flex-row gap-6">
+			<AccountSidebar />
+			<div class="flex-1 min-w-0">
+				<slot />
+			</div>
+		</div>
+	</UContainer>
+</template>

package/app/components/account/AccountSidebar.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { accountNavigation } from "../../config/navigation";
+
+const { icon } = useIcons();
+
+/**
+ * The full B2B account navigation tree (structure from the relation
+ * prototype). Implemented entries route to real pages, the rest leads to the
+ * coming-soon catch-all — making the product roadmap explorable.
+ */
+const { t } = useI18n();
+const localePath = useLocalePath();
+const route = useRoute();
+const auth = useAuthStore();
+const toast = useToast();
+
+async function onLogout(): Promise<void> {
+	await auth.logout();
+	toast.add({
+		title: t("auth.logout.success"),
+		color: "primary",
+		icon: icon("check"),
+		duration: 1000,
+	});
+	await navigateTo(localePath("/login"));
+}
+
+function isActive(to: string): boolean {
+	const localized = localePath(to);
+	if (to === "/account") {
+		return route.path === localized;
+	}
+	return route.path === localized || route.path.startsWith(`${localized}/`);
+}
+</script>
+
+<template>
+	<nav
+		:aria-label="t('account.nav.groups.account')"
+		class="w-full lg:w-72 shrink-0 bg-elevated rounded-lg px-6 py-2"
+	>
+		<ul class="divide-y divide-default">
+			<li
+				v-for="group in accountNavigation"
+				:key="group.labelKey"
+				class="py-4"
+			>
+				<div class="font-semibold text-highlighted pb-1">
+					{{ t(group.labelKey) }}
+				</div>
+				<ul>
+					<li
+						v-for="link in group.links"
+						:key="link.to"
+					>
+						<NuxtLink
+							:to="localePath(link.to)"
+							class="flex items-center gap-2.5 py-1.5 text-sm transition-colors"
+							:class="isActive(link.to)
+								? 'text-primary font-medium'
+								: 'text-muted hover:text-highlighted'"
+						>
+							<UIcon
+								:name="icon(link.icon)"
+								class="size-4 shrink-0"
+								:class="isActive(link.to) ? 'text-primary' : 'text-primary/70'"
+							/>
+							{{ t(link.labelKey) }}
+						</NuxtLink>
+					</li>
+				</ul>
+			</li>
+			<li class="py-4">
+				<button
+					type="button"
+					tabindex="0"
+					class="flex items-center gap-2 py-1 text-sm text-error
+					hover:text-highlighted transition-colors cursor-pointer"
+					@click="onLogout"
+				>
+					<UIcon
+						:name="icon('logout')"
+						class="size-4 shrink-0"
+					/>
+					{{ t('menu.logout') }}
+				</button>
+			</li>
+		</ul>
+	</nav>
+</template>

package/app/components/account/address/AccountAddressCard.vue

@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import type { AccountAddress, AccountAddressFormState } from "../../../interfaces/account/address-list";
+
+const { icon } = useIcons();
+
+const props = defineProps<{
+	address: AccountAddress;
+	isDefaultLocked: boolean;
+	isDeleteDisabled: boolean;
+	isEditing: boolean;
+	isSaving: boolean;
+	saveError: string | null;
+	typeOptions: { label: string; value: string }[];
+}>();
+
+const formState = defineModel<AccountAddressFormState>("formState", { required: true });
+
+const emit = defineEmits<{
+	"toggle-edit": [];
+	"submit": [];
+	"is-default-change": [value: boolean];
+	"delete": [];
+}>();
+
+const { t } = useI18n();
+const { validate: validateAddress } = useFormValidation<AccountAddressFormState>("accountAddress");
+
+const confirmDeleteOpen = ref(false);
+
+const typeLabel = computed(() =>
+	props.address.type === "billing"
+		? t("addresses.type.billing")
+		: t("addresses.type.shipping"),
+);
+
+function confirmDelete() {
+	confirmDeleteOpen.value = false;
+	emit("delete");
+}
+</script>
+
+<template>
+	<UCard>
+		<template #header>
+			<div class="flex items-start justify-between">
+				<div>
+					<div class="inline-flex items-center gap-1.5">
+						<p class="text-base font-semibold text-highlighted">
+							{{ address.label }}
+						</p>
+						<UTooltip
+							v-if="address.isDefault"
+							:text="t('addresses.defaultTooltip')"
+						>
+							<UIcon
+								:name="icon('success')"
+								class="size-4 text-success"
+								:aria-label="t('addresses.defaultAriaLabel')"
+							/>
+						</UTooltip>
+					</div>
+					<p class="mt-1 text-xs uppercase tracking-wide text-muted">
+						{{ typeLabel }}
+					</p>
+				</div>
+				<div class="flex items-center gap-1">
+					<UTooltip :text="t('actions.edit')">
+						<UButton
+							:icon="icon('edit')"
+							variant="ghost"
+							color="primary"
+							:aria-label="t('actions.edit')"
+							@click="emit('toggle-edit')"
+						/>
+					</UTooltip>
+					<UTooltip
+						v-if="!isDeleteDisabled"
+						:text="t('addresses.actions.delete')"
+					>
+						<UButton
+							:icon="icon('delete')"
+							variant="ghost"
+							color="error"
+							:aria-label="t('addresses.actions.delete')"
+							@click="confirmDeleteOpen = true"
+						/>
+					</UTooltip>
+					<UButton
+						v-else
+						:icon="icon('delete')"
+						variant="ghost"
+						color="neutral"
+						disabled
+						class="text-gray-300 dark:text-gray-600"
+						:aria-label="t('addresses.actions.delete')"
+					/>
+				</div>
+			</div>
+		</template>
+
+		<address
+			v-if="!isEditing"
+			class="not-italic text-sm text-toned leading-6"
+		>
+			<div
+				v-if="address.company"
+				class="font-medium text-highlighted"
+			>
+				{{ address.company }}
+			</div>
+			<div
+				v-else
+				aria-hidden="true"
+			>
+&nbsp;
+			</div>
+			<div>{{ address.firstName }} {{ address.lastName }}</div>
+			<div>{{ address.street }} {{ address.streetNumber }}</div>
+			<div>{{ address.zip }} {{ address.city }}</div>
+			<div>{{ address.country }}</div>
+		</address>
+
+		<UForm
+			v-else
+			:state="formState"
+			:validate="validateAddress"
+			class="space-y-4"
+			@submit="emit('submit')"
+		>
+			<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+				<UFormField
+					:label="t('addresses.fields.label')"
+					name="label"
+					class="sm:col-span-2"
+				>
+					<UInput
+						v-model="formState.label"
+						class="w-full"
+					/>
+				</UFormField>
+				<UFormField
+					:label="t('addresses.fields.company')"
+					name="company"
+					class="sm:col-span-2"
+				>
+					<UInput
+						v-model="formState.company"
+						autocomplete="organization"
+						class="w-full"
+					/>
+				</UFormField>
+				<UFormField
+					:label="t('addresses.fields.firstName')"
+					name="firstName"
+				>
+					<UInput
+						v-model="formState.firstName"
+						autocomplete="given-name"
+						class="w-full"
+					/>
+				</UFormField>
+				<UFormField
+					:label="t('addresses.fields.lastName')"
+					name="lastName"
+				>
+					<UInput
+						v-model="formState.lastName"
+						autocomplete="family-name"
+						class="w-full"
+					/>
+				</UFormField>
+				<UFormField
+					:label="t('addresses.fields.street')"
+					name="street"
+				>
+					<UInput
+						v-model="formState.street"
+						autocomplete="street-address"
+						class="w-full"
+					/>
+				</UFormField>
+				<UFormField
+					:label="t('addresses.fields.streetNumber')"
+					name="streetNumber"
+				>
+					<UInput
+						v-model="formState.streetNumber"
+						class="w-full"
+					/>
+				</UFormField>
+				<UFormField
+					:label="t('addresses.fields.zip')"
+					name="zip"
+				>
+					<UInput
+						v-model="formState.zip"
+						autocomplete="postal-code"
+						class="w-full"
+					/>
+				</UFormField>
+				<UFormField
+					:label="t('addresses.fields.city')"
+					name="city"
+				>
+					<UInput
+						v-model="formState.city"
+						autocomplete="address-level2"
+						class="w-full"
+					/>
+				</UFormField>
+				<UFormField
+					:label="t('addresses.fields.country')"
+					name="country"
+					class="sm:col-span-2"
+				>
+					<UiFormsCountrySelection
+						v-model="formState.country"
+						class="w-full"
+					/>
+				</UFormField>
+				<UFormField
+					:label="t('addresses.fields.type')"
+					name="type"
+					class="sm:col-span-2"
+				>
+					<USelect
+						v-model="formState.type"
+						:items="typeOptions"
+						value-key="value"
+						class="w-full"
+					/>
+				</UFormField>
+				<div class="sm:col-span-2">
+					<UCheckbox
+						:model-value="formState.isDefault"
+						:disabled="isDefaultLocked"
+						:label="isDefaultLocked
+							? t('addresses.fields.isDefaultSet')
+							: t('addresses.fields.isDefault')"
+						@update:model-value="emit('is-default-change', $event)"
+					/>
+				</div>
+			</div>
+
+			<UAlert
+				v-if="saveError"
+				color="error"
+				variant="soft"
+				:title="saveError"
+			/>
+
+			<div class="flex justify-end">
+				<UButton
+					type="submit"
+					:loading="isSaving"
+					:label="t('addresses.actions.save')"
+				/>
+			</div>
+		</UForm>
+	</UCard>
+
+	<UModal
+		v-model:open="confirmDeleteOpen"
+		:title="t('addresses.delete.title')"
+	>
+		<template #body>
+			<p class="text-sm text-muted">
+				{{ t('addresses.delete.confirm', { label: address.label }) }}
+			</p>
+		</template>
+		<template #footer>
+			<UButton
+				color="neutral"
+				variant="ghost"
+				@click="confirmDeleteOpen = false"
+			>
+				{{ t('addresses.delete.cancel') }}
+			</UButton>
+			<UButton
+				color="error"
+				@click="confirmDelete"
+			>
+				{{ t('addresses.delete.submit') }}
+			</UButton>
+		</template>
+	</UModal>
+</template>