@mpfrontend/nx-plugin 0.0.0-stage → 0.1.0

package/templates/next/src/api/server/transfer.ts.template

@@ -0,0 +1,25 @@
+import { createRelay, type RelayOptions } from '@mpfrontend/presentation-server/relay';
+
+/** The context that Next.js passes to the catch-all transfer route. */
+export type TransferContext = { params: Promise<{ path: string[] }> };
+
+/**
+ * The transfer relay: it passes a streamed BFF route between the browser and the BFF, as streams in both
+ * directions, and forwards only what the BFF checks and the content headers. It reads no configuration
+ * itself, so that a test can run it; the route passes the server configuration. Without a session cookie
+ * name the relay is not configured and answers 503.
+ */
+export function transferHandler(options: () => RelayOptions) {
+  return async (request: Request, context: TransferContext): Promise<Response> => {
+    let relay;
+    try {
+      relay = createRelay(options());
+    } catch {
+      return new Response(JSON.stringify({ title: 'TRANSFER_NOT_CONFIGURED' }), {
+        status: 503,
+        headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' },
+      });
+    }
+    return relay(request, (await context.params).path);
+  };
+}

package/templates/next/src/app/api/access/route.ts.template

@@ -0,0 +1,6 @@
+import { visitorAccess } from '../../../config/access';
+
+/** The access snapshot again, for the provider when the window regains focus. */
+export function GET() {
+  return Response.json(visitorAccess(), { headers: { 'Cache-Control': 'no-store' } });
+}

package/templates/next/src/app/api/docs/assets/[file]/route.ts.template

@@ -0,0 +1,23 @@
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+const files = new Set([
+  'swagger-ui.css',
+  'swagger-ui-bundle.js',
+  'swagger-ui-standalone-preset.js',
+]);
+const directory = 'apps/__APP_NAME__/runtime-assets/swagger';
+export async function GET(_request: Request, { params }: { params: Promise<{ file: string }> }) {
+  if (process.env.NODE_ENV === 'production' && process.env.ENABLE_API_DOCS !== 'true')
+    return new Response(null, { status: 404 });
+  const { file } = await params;
+  if (!files.has(file)) return new Response(null, { status: 404 });
+  const content = await readFile(resolve(process.cwd(), directory, file));
+  return new Response(content, {
+    headers: {
+      'Content-Type': file.endsWith('.css')
+        ? 'text/css; charset=utf-8'
+        : 'application/javascript; charset=utf-8',
+      'Cache-Control': 'no-store',
+    },
+  });
+}

package/templates/next/src/app/api/docs/route.ts.template

@@ -0,0 +1,8 @@
+export async function GET() {
+  if (process.env.NODE_ENV === 'production' && process.env.ENABLE_API_DOCS !== 'true')
+    return new Response(null, { status: 404 });
+  return new Response(
+    '<!doctype html><html lang="en"><head><meta charset="utf-8"><title>API documentation</title><link rel="stylesheet" href="/api/docs/assets/swagger-ui.css"></head><body><div id="swagger-ui"></div><script src="/api/docs/assets/swagger-ui-bundle.js"></script><script src="/api/docs/assets/swagger-ui-standalone-preset.js"></script><script>window.onload=function(){SwaggerUIBundle({url:"/api/openapi",dom_id:"#swagger-ui",supportedSubmitMethods:[],presets:[SwaggerUIBundle.presets.apis,SwaggerUIStandalonePreset],layout:"StandaloneLayout"})}</script></body></html>',
+    { headers: { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-store' } },
+  );
+}

package/templates/next/src/app/api/openapi/route.ts.template

@@ -0,0 +1,12 @@
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+const app = '__APP_NAME__';
+export async function GET() {
+  if (process.env.NODE_ENV === 'production' && process.env.ENABLE_API_DOCS !== 'true')
+    return new Response(null, { status: 404 });
+  const path = resolve(process.cwd(), 'contracts/openapi/presentation', app, 'openapi.json');
+  const bytes = await readFile(path, 'utf8');
+  return new Response(bytes, {
+    headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' },
+  });
+}

package/templates/next/src/app/api/transfer/[...path]/route.ts.template

@@ -0,0 +1,22 @@
+import { appId, bffOrigin, bffSessionCookie } from '../../../../config/server';
+import { transferHandler, type TransferContext } from '../../../../api/server/transfer';
+
+/**
+ * Relays the BFF's streamed routes under `/<app>/transfer/`: uploads and downloads pass as streams. The
+ * BFF's allowlist decides which paths, types and sizes exist; this route adds none.
+ */
+const transfer = transferHandler(() => ({
+  bffOrigin,
+  basePath: '/' + appId + '/transfer',
+  sessionCookie: bffSessionCookie ?? '',
+}));
+
+export async function GET(request: Request, context: TransferContext) {
+  return transfer(request, context);
+}
+export async function POST(request: Request, context: TransferContext) {
+  return transfer(request, context);
+}
+export async function PUT(request: Request, context: TransferContext) {
+  return transfer(request, context);
+}

package/templates/next/src/app/components/page.tsx.template

@@ -0,0 +1,32 @@
+import { PageFrame } from '@mpfrontend/app-layout';
+import { Button, Field, Select, Card } from '@mpfrontend/ui';
+import { appMessages } from '../../i18n';
+import { requestLocale } from '../../i18n/server';
+
+export default async function Components() {
+  const t = appMessages.translator(await requestLocale());
+  return (
+    <PageFrame title={t('componentsTitle')}>
+      <Card>
+        <div className="flex flex-wrap items-end gap-4">
+          <Button>{t('continue')}</Button>
+          <Button tone="secondary">{t('continue')}</Button>
+          <Button disabled>{t('continue')}</Button>
+        </div>
+        <div className="mt-8 flex flex-wrap items-end gap-4 [&>.mp-field]:w-[180px]">
+          <Field
+            label={t('fieldLabel')}
+            placeholder={t('fieldPlaceholder')}
+            helper={t('fieldHelper')}
+          />
+          <Select label={t('account')} defaultValue="">
+            <option value="" disabled>
+              {t('selectOption')}
+            </option>
+            <option value="example">{t('exampleAccount')}</option>
+          </Select>
+        </div>
+      </Card>
+    </PageFrame>
+  );
+}

package/templates/next/src/app/globals.css.template

@@ -0,0 +1,32 @@
+/* The global entry: imports and base element rules only. Layout comes from framework components and
+   utility classes; token values come from the theme layer, which loads after the neutral fallback. */
+@import 'tailwindcss';
+@import '@mpfrontend/ui/tailwind.css';
+@import '@mpfrontend/app-layout/tailwind.css';
+@import '@mpfrontend/tokens/styles.css';
+@import '@mpfrontend/ui/styles.css';
+@import '@mpfrontend/app-layout/styles.css';
+@import '../theme/theme.css';
+
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  background: var(--mp-surface-canvas);
+  color: var(--mp-foreground-primary);
+  font-family: var(--mp-font-family);
+}
+a {
+  color: inherit;
+  text-underline-offset: 3px;
+}
+button,
+input,
+select {
+  font: inherit;
+}
+:focus-visible {
+  outline: 2px solid var(--mp-focus-ring);
+  outline-offset: 2px;
+}

package/templates/next/src/app/layout.tsx.template

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+import { cookies } from 'next/headers';
+import { AppFrame, AppHeader, Navigation } from '@mpfrontend/app-layout';
+import { PreferenceControls, readPreferences } from '../features/preferences';
+import { appId, localeRegistry } from '../config/app';
+import { visitorAccess } from '../config/access';
+import { appMessages } from '../i18n';
+import { Providers } from './providers';
+import './globals.css';
+
+export async function generateMetadata() {
+  const saved = await cookies();
+  const t = appMessages.translator(readPreferences((name) => saved.get(name)?.value).locale);
+  return { title: appId + ' | MP Frontend', description: t('description') };
+}
+
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  const saved = await cookies();
+  // The first paint takes language, direction and theme from the preference cookie, so nothing flashes.
+  const preferences = readPreferences((name) => saved.get(name)?.value);
+  const t = appMessages.translator(preferences.locale);
+  // The app passes the items it may show; the shell decides nothing about access.
+  const items = [
+    { href: '/catalog', label: t('catalog') },
+    { href: '/components', label: t('components') },
+    { href: '/api/docs', label: t('docs') },
+  ];
+  return (
+    <html
+      lang={preferences.locale}
+      dir={localeRegistry.direction(preferences.locale)}
+      data-brand={preferences.brand}
+      data-mode={preferences.mode}
+    >
+      <body>
+        <Providers snapshot={visitorAccess()}>
+          <AppFrame
+            skipLinkLabel={t('skipToContent')}
+            header={
+              <AppHeader
+                brand={<a href="/catalog">{appId}</a>}
+                navigation={<Navigation label={t('navigation')} items={items} />}
+                actions={<PreferenceControls initial={preferences} />}
+              />
+            }
+          >
+            {children}
+          </AppFrame>
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/templates/next/src/app/page.tsx.template

@@ -0,0 +1,6 @@
+import { redirect } from 'next/navigation';
+
+/** The home route opens the catalog list screen. */
+export default function Home() {
+  redirect('/catalog');
+}

package/templates/next/src/app/providers.tsx.template

@@ -0,0 +1,31 @@
+'use client';
+import { useState, type ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { NuqsAdapter } from 'nuqs/adapters/next/app';
+import { AccessProvider } from '@mpfrontend/access-react';
+import { QueryScope } from '@mpfrontend/data-react';
+
+const reloadAccess = async (signal: AbortSignal): Promise<unknown> =>
+  (await fetch('/api/access', { signal, cache: 'no-store' })).json();
+
+/**
+ * The client providers of the app: its own query client, the URL state adapter and the access snapshot. Server data
+ * is cached under the access scope only, and a write is never retried automatically.
+ */
+export function Providers({ snapshot, children }: { snapshot: unknown; children: ReactNode }) {
+  const [client] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: { queries: { staleTime: 30000 }, mutations: { retry: false } },
+      }),
+  );
+  return (
+    <QueryClientProvider client={client}>
+      <NuqsAdapter>
+        <AccessProvider snapshot={snapshot} reload={reloadAccess}>
+          <QueryScope>{children}</QueryScope>
+        </AccessProvider>
+      </NuqsAdapter>
+    </QueryClientProvider>
+  );
+}

package/templates/next/src/config/access.ts.template

@@ -0,0 +1,21 @@
+import 'server-only';
+import type { PageAccess } from '@mpfrontend/access-core';
+
+/** How long the provider uses a visitor snapshot before it closes it and asks again. */
+const VISITOR_LIFETIME = 15 * 60 * 1000;
+
+/**
+ * The access snapshot of a visitor who has not signed in: it names the scope of the data the app reads for them and
+ * grants no capability and no field. A product that signs people in loads each person's snapshot instead, with
+ * `createAccessLoader` of `@mpfrontend/access-react/server` from its own access endpoint through the BFF; its
+ * context reference and revision change when the person, the tenant or the grants change.
+ */
+export function visitorAccess(now = Date.now()): PageAccess {
+  return {
+    contextRef: 'visitor',
+    revision: 'visitor-1',
+    expiresAt: now + VISITOR_LIFETIME,
+    capabilities: {},
+    fields: {},
+  };
+}

package/templates/next/src/config/app.ts.template

@@ -0,0 +1,33 @@
+import { createLocaleRegistry, createPreferenceCookie } from '@mpfrontend/i18n';
+
+/** The app id, safe on the client and the server. */
+export const appId = '__APP_NAME__';
+
+/**
+ * The locales of this app; direction comes from here. The default is the first-visit locale. MP Frontend
+ * ships English only: add each locale of the product here with its direction, for example
+ * `'<code>': { direction: 'rtl' }`, and a `messages/<code>.ts` catalog to every catalog set (the catalog
+ * check lists the missing ones). A product locale may also replace English as the default and only locale.
+ */
+export const localeRegistry = createLocaleRegistry({
+  locales: { en: { direction: 'ltr' } },
+  defaultLocale: 'en',
+});
+
+/**
+ * The preference cookie shared with the identity provider's pages: language and theme only, allowlisted
+ * values, never identity or authority. Set `preferenceCookieDomain` to the common parent domain to share it.
+ */
+export const preferenceCookie = createPreferenceCookie({
+  name: 'mp_preferences',
+  locales: localeRegistry.locales,
+  themes: ['light', 'dark', 'system'],
+});
+export const preferenceCookieDomain: string | undefined = undefined;
+/** The app's own brand choice; brands are not part of the shared preference cookie. */
+export const brandCookie = appId + '_brand';
+
+/** The visitor's language from the preference cookie's raw value, or the registry default. */
+export function visitorLocale(cookieValue: string | undefined) {
+  return localeRegistry.locale(preferenceCookie.parse(cookieValue).lang);
+}

package/templates/next/src/config/server.ts.template

@@ -0,0 +1,13 @@
+import 'server-only';
+export const bffOrigin = process.env.BFF_ORIGIN ?? 'http://127.0.0.1:4310';
+const parsed = new URL(bffOrigin);
+if (
+  !['http:', 'https:'].includes(parsed.protocol) ||
+  parsed.username ||
+  parsed.password ||
+  parsed.pathname !== '/'
+)
+  throw new Error('INVALID_BFF_ORIGIN');
+export const appId = '__APP_NAME__';
+/** The name of the BFF's session cookie: the one cookie the transfer relay forwards to the BFF. */
+export const bffSessionCookie = process.env.BFF_SESSION_COOKIE;

package/templates/next/src/features/preferences/api/preference-cookie.ts.template

@@ -0,0 +1,14 @@
+import { brandCookie, preferenceCookie, preferenceCookieDomain } from '../../../config/app';
+import type { Preferences } from '../model/preferences';
+
+const attributes = () =>
+  '; Path=/; SameSite=Lax; Max-Age=31536000' +
+  (location.protocol === 'https:' ? '; Secure' : '') +
+  (preferenceCookieDomain ? '; Domain=' + preferenceCookieDomain : '');
+
+/** Persists validated preferences for the next first paint; the cookies hold no identity. */
+export function persistPreferences(preferences: Preferences): void {
+  const shared = preferenceCookie.value({ lang: preferences.locale, theme: preferences.mode });
+  document.cookie = preferenceCookie.name + '=' + shared + attributes();
+  document.cookie = brandCookie + '=' + encodeURIComponent(preferences.brand) + attributes();
+}

package/templates/next/src/features/preferences/hooks/use-preferences.ts.template

@@ -0,0 +1,30 @@
+'use client';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { validMode } from '@mpfrontend/tokens';
+import { localeRegistry } from '../../../config/app';
+import { validBrand } from '../../../theme/config';
+import { persistPreferences } from '../api/preference-cookie';
+import type { PreferenceKey, Preferences } from '../model/preferences';
+
+/** Applies a changed preference to the document at once, persists it and re-renders the server parts. */
+export function usePreferences(initial: Preferences) {
+  const router = useRouter();
+  const [preferences, setPreferences] = useState(initial);
+  function change(key: PreferenceKey, value: string) {
+    const next: Preferences = {
+      locale: key === 'locale' ? localeRegistry.locale(value) : preferences.locale,
+      brand: key === 'brand' ? validBrand(value) : preferences.brand,
+      mode: key === 'mode' ? validMode(value) : preferences.mode,
+    };
+    setPreferences(next);
+    const root = document.documentElement;
+    root.lang = next.locale;
+    root.dir = localeRegistry.direction(next.locale);
+    root.dataset.brand = next.brand;
+    root.dataset.mode = next.mode;
+    persistPreferences(next);
+    if (key === 'locale') router.refresh();
+  }
+  return { preferences, change };
+}

package/templates/next/src/features/preferences/index.ts.template

@@ -0,0 +1,3 @@
+// The public entry of the feature. Code outside the feature imports only from here.
+export { PreferenceControls } from './ui/preference-controls';
+export { readPreferences, type Preferences } from './model/preferences';

package/templates/next/src/features/preferences/model/messages/en.ts.template

@@ -0,0 +1,10 @@
+import { defineMessages } from '@mpfrontend/i18n';
+
+export default defineMessages({
+  language: 'Language',
+  brand: 'Brand',
+  mode: 'Appearance',
+  light: 'Light',
+  dark: 'Dark',
+  system: 'System',
+});

package/templates/next/src/features/preferences/model/messages.ts.template

@@ -0,0 +1,13 @@
+import { coreMessages, createMessages } from '@mpfrontend/i18n';
+import { localeRegistry } from '../../../config/app';
+import base from './messages/en';
+
+/** The messages of this unit. The base catalog defines the keys and their parameters. */
+export const messages = createMessages({
+  defaultLocale: 'en',
+  base,
+  // Each other locale of the registry: import its catalog and list it here.
+  translations: {},
+  core: coreMessages,
+  numberingSystem: localeRegistry.numberingSystem,
+});

package/templates/next/src/features/preferences/model/preferences.test.ts.template

@@ -0,0 +1,32 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { localeRegistry } from '../../../config/app';
+import { readPreferences } from './preferences';
+
+const jar = (values: Record<string, string>) => (name: string) => values[name];
+// The test follows the app's registry, so it holds when the product adds or replaces locales.
+const chosen = localeRegistry.locales[localeRegistry.locales.length - 1]!;
+
+test('preferences come from the shared preference cookie and the brand cookie', () => {
+  assert.deepEqual(
+    readPreferences(
+      jar({ mp_preferences: 'lang=' + chosen + '&theme=dark', __APP_NAME___brand: 'neutral' }),
+    ),
+    {
+      locale: chosen,
+      brand: 'neutral',
+      mode: 'dark',
+    },
+  );
+});
+
+test('missing or invalid values fall back to the defaults and are never echoed', () => {
+  const defaults = { locale: localeRegistry.defaultLocale, brand: 'neutral', mode: 'system' };
+  assert.deepEqual(readPreferences(jar({})), defaults);
+  assert.deepEqual(
+    readPreferences(
+      jar({ mp_preferences: 'lang=<x>&theme=bright&role=admin', __APP_NAME___brand: 'other' }),
+    ),
+    defaults,
+  );
+});

package/templates/next/src/features/preferences/model/preferences.ts.template

@@ -0,0 +1,22 @@
+import { validMode, type Mode } from '@mpfrontend/tokens';
+import { brandCookie, localeRegistry, preferenceCookie } from '../../../config/app';
+import { validBrand, type Brand } from '../../../theme/config';
+
+export type AppLocale = (typeof localeRegistry.locales)[number];
+/** The presentation preferences of a visitor. They change presentation only, never authority. */
+export type Preferences = Readonly<{ locale: AppLocale; brand: Brand; mode: Mode }>;
+export type PreferenceKey = keyof Preferences;
+export const modes = ['light', 'dark', 'system'] as const;
+
+/**
+ * Reads the shared preference cookie (language and theme) and the app's brand cookie by name. Every value is
+ * validated; an unknown or missing value is the default, and an invalid cookie is ignored.
+ */
+export function readPreferences(cookie: (name: string) => string | undefined): Preferences {
+  const shared = preferenceCookie.parse(cookie(preferenceCookie.name));
+  return {
+    locale: localeRegistry.locale(shared.lang),
+    brand: validBrand(cookie(brandCookie)),
+    mode: validMode(shared.theme),
+  };
+}

package/templates/next/src/features/preferences/ui/preference-controls.tsx.template

@@ -0,0 +1,50 @@
+'use client';
+import { Select } from '@mpfrontend/ui';
+import { localeRegistry } from '../../../config/app';
+import { brands } from '../../../theme/config';
+import { usePreferences } from '../hooks/use-preferences';
+import { messages } from '../model/messages';
+import { modes, type Preferences } from '../model/preferences';
+
+/** The language, brand and appearance controls. The view renders choices and emits changes. */
+export function PreferenceControls({ initial }: { initial: Preferences }) {
+  const { preferences, change } = usePreferences(initial);
+  const t = messages.translator(preferences.locale);
+  return (
+    <div className="flex flex-wrap items-end gap-4 [&>.mp-field]:w-[180px]">
+      <Select
+        label={t('language')}
+        value={preferences.locale}
+        onChange={(event) => change('locale', event.target.value)}
+      >
+        {localeRegistry.locales.map((code) => (
+          <option key={code} value={code} lang={code}>
+            {new Intl.DisplayNames([code], { type: 'language' }).of(code)}
+          </option>
+        ))}
+      </Select>
+      <Select
+        label={t('brand')}
+        value={preferences.brand}
+        onChange={(event) => change('brand', event.target.value)}
+      >
+        {brands.map((value) => (
+          <option key={value} value={value}>
+            {value}
+          </option>
+        ))}
+      </Select>
+      <Select
+        label={t('mode')}
+        value={preferences.mode}
+        onChange={(event) => change('mode', event.target.value)}
+      >
+        {modes.map((value) => (
+          <option key={value} value={value}>
+            {t(value)}
+          </option>
+        ))}
+      </Select>
+    </div>
+  );
+}

package/templates/next/src/i18n/index.ts.template

@@ -0,0 +1,13 @@
+import { coreMessages, createMessages } from '@mpfrontend/i18n';
+import { localeRegistry } from '../config/app';
+import base from './messages/en';
+
+/** The app-wide messages: the layout and app-level screens. Each feature has its own catalog set. */
+export const appMessages = createMessages({
+  defaultLocale: 'en',
+  base,
+  // Each other locale of the registry: import its catalog and list it here.
+  translations: {},
+  core: coreMessages,
+  numberingSystem: localeRegistry.numberingSystem,
+});

package/templates/next/src/i18n/messages/en.ts.template

@@ -0,0 +1,18 @@
+import { defineMessages } from '@mpfrontend/i18n';
+
+export default defineMessages({
+  description: 'Independent MP Frontend consumer',
+  skipToContent: 'Skip to content',
+  navigation: 'Main navigation',
+  catalog: 'Catalog',
+  components: 'Components',
+  docs: 'API documentation',
+  componentsTitle: 'MP Frontend component foundation',
+  continue: 'Continue',
+  fieldLabel: 'Field label',
+  fieldPlaceholder: 'Enter value',
+  fieldHelper: 'Helper text',
+  account: 'Account',
+  selectOption: 'Select an option',
+  exampleAccount: 'Example account',
+});

package/templates/next/src/i18n/server.ts.template

@@ -0,0 +1,8 @@
+import 'server-only';
+import { cookies } from 'next/headers';
+import { preferenceCookie, visitorLocale } from '../config/app';
+
+/** The locale of the current request: the visitor's validated preference, or the registry default. */
+export async function requestLocale() {
+  return visitorLocale((await cookies()).get(preferenceCookie.name)?.value);
+}

package/templates/next/src/theme/config.test.ts.template

@@ -0,0 +1,9 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { brands, validBrand } from './config';
+
+test('the brand registry accepts its own brands and falls back to its default', () => {
+  for (const brand of brands) assert.equal(validBrand(brand), brand);
+  assert.equal(validBrand('unregistered'), 'neutral');
+  assert.equal(validBrand(undefined), 'neutral');
+});

package/templates/next/src/theme/config.ts.template

@@ -0,0 +1,7 @@
+import { validBrand as validateBrand } from '@mpfrontend/tokens';
+// The app owns its approved theme registry. Core never inserts a product DLS.
+export const brands = ['neutral'] as const;
+export type Brand = (typeof brands)[number];
+export function validBrand(value: unknown): Brand {
+  return validateBrand(value, brands, 'neutral');
+}

package/templates/next/src/theme/theme.css.template

@@ -0,0 +1,8 @@
+/* The app theme: the one file of this app that sets design-token values. globals.css loads it after the
+   neutral fallback of @mpfrontend/tokens, so a value here wins. Scope values to a brand of the registry in
+   config.ts. With an attached design source, import its generated tokens instead of writing values:
+   @import '../../../../themes/<id>/generated/tokens.gen.css'; */
+:root[data-brand='neutral'] {
+  --mp-shell-content-max: 75rem;
+  --mp-shell-gutter: 2rem;
+}

package/templates/next/tsconfig.json.template

@@ -0,0 +1,11 @@
+{
+  "extends": "@mpfrontend/workspace-config/tsconfig/next.json",
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/templates/package/README.md.template

@@ -0,0 +1,10 @@
+# @__SCOPE__/__name__
+
+A shared package of this workspace for code that two or more apps need. Runtime: `__runtime__`. Its public
+API is `src/index.ts`, compiled to `dist/`; apps and other packages import only `@__SCOPE__/__name__`.
+
+- Tags: `type:package`, `scope:shared` and `runtime:__runtime__`. Lint refuses an import of an app from
+  this package and a dependency that crosses a runtime tag.
+- An app uses it by adding `"@__SCOPE__/__name__": "workspace:*"` to the dependencies of its
+  `package.json` and running `pnpm install`; the app build then builds this package first.
+- Targets: `build`, `typecheck`, `format`, `format:check`, `lint` and `test`.

package/templates/package/eslint.config.mjs.template

@@ -0,0 +1,4 @@
+import workspace from '../../eslint.config.mjs';
+
+// The workspace profile applies unchanged; package-specific additions go after it.
+export default [...workspace];

package/templates/package/package.json.template

@@ -0,0 +1,15 @@
+{
+  "name": "@__SCOPE__/__name__",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ]
+}