@cosmicdrift/kumiko-renderer 0.317.0 → 0.319.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.317.0",
+  "version": "0.319.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,9 +15,9 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.317.0",
-    "@cosmicdrift/kumiko-headless": "0.317.0",
-    "@cosmicdrift/kumiko-types": "0.317.0",
+    "@cosmicdrift/kumiko-framework": "0.319.0",
+    "@cosmicdrift/kumiko-headless": "0.319.0",
+    "@cosmicdrift/kumiko-types": "0.319.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -28,7 +28,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "react-dom": "^19.2.6",
-    "@cosmicdrift/kumiko-locale-de": "0.317.0"
+    "@cosmicdrift/kumiko-locale-de": "0.319.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/i18n.test.tsx

@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import {
   createStaticLocaleResolver,
+  FormalityProvider,
   LocaleProvider,
   type TranslationsByLocale,
   translationsByLocaleFromKeys,
@@ -88,6 +89,48 @@ describe("useTranslation — lookup order", () => {
     expect(result.current("greet", { name: "Marc" })).toBe("Hallo Marc!");
   });
 });
+describe("useTranslation — formality", () => {
+  const bundles: TranslationsByLocale[] = [
+    { de: { greet: "Hallo, wie geht es dir?", save: "Speichern" } },
+    { "de-x-formal": { greet: "Guten Tag, wie geht es Ihnen?" } },
+  ];
+  const wrapFormal =
+    (formality: "formal" | "informal", locale = "de") =>
+    ({ children }: { readonly children: ReactNode }): ReactNode => (
+      <LocaleProvider resolver={createStaticLocaleResolver({ locale })} fallbackBundles={bundles}>
+        <FormalityProvider formality={formality}>{children}</FormalityProvider>
+      </LocaleProvider>
+    );
+
+  test("without a FormalityProvider the plain locale wording is used", () => {
+    const { result } = renderHook(() => useTranslation(), {
+      wrapper: wrap(createStaticLocaleResolver({ locale: "de" }), bundles),
+    });
+    expect(result.current("greet")).toBe("Hallo, wie geht es dir?");
+  });
+
+  test("formal prefers a -x-formal entry from any bundle over a plain one, also for de-AT", () => {
+    for (const locale of ["de", "de-AT"]) {
+      const { result } = renderHook(() => useTranslation(), {
+        wrapper: wrapFormal("formal", locale),
+      });
+      expect(result.current("greet")).toBe("Guten Tag, wie geht es Ihnen?");
+    }
+  });
+
+  test("formal falls back to the plain wording for keys without a formal variant", () => {
+    const { result } = renderHook(() => useTranslation(), { wrapper: wrapFormal("formal") });
+    expect(result.current("save")).toBe("Speichern");
+  });
+
+  test("useOptionalTranslation honors formality too", () => {
+    const { result } = renderHook(() => useOptionalTranslation(), {
+      wrapper: wrapFormal("formal"),
+    });
+    expect(result.current?.("greet")).toBe("Guten Tag, wie geht es Ihnen?");
+  });
+});
+
 describe("useTranslation — re-render on locale change", () => {
   test("subscribe fires when setLocale runs, hook returns new value", () => {
     const resolver = makeStatefulResolver("de");

package/src/__tests__/share-links.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, test } from "bun:test";
+import { buildWhatsAppShareUrl } from "../share-links";
+
+describe("buildWhatsAppShareUrl", () => {
+  test("without a phone number the link opens the contact picker with the text prefilled", () => {
+    expect(buildWhatsAppShareUrl("Hallo Welt")).toBe("https://wa.me/?text=Hallo%20Welt");
+  });
+
+  test("encodes line breaks, umlauts and reserved characters so the text arrives unchanged", () => {
+    const text = "Škoda für 17.490 €\nProbefahrt? & mehr #1";
+    const url = new URL(buildWhatsAppShareUrl(text));
+    expect(url.searchParams.get("text")).toBe(text);
+  });
+
+  test("normalizes a formatted international number to digits only", () => {
+    expect(buildWhatsAppShareUrl("x", "+49 (171) 234-5678")).toBe(
+      "https://wa.me/491712345678?text=x",
+    );
+  });
+
+  test("treats a 00 prefix like +", () => {
+    expect(buildWhatsAppShareUrl("x", "0049 171 2345678")).toBe(
+      "https://wa.me/491712345678?text=x",
+    );
+  });
+});

package/src/changes.json

@@ -1,4 +1,22 @@
 [
+  {
+    "version": "0.318.0",
+    "type": "improvement",
+    "title": "App theme as one Tailwind plugin instead of duplicated @theme and :root blocks",
+    "detail": "An app declares its colors (a string, or `{ light, dark }`), base radius, fonts, card shadow and card padding once in `defineAppTheme({...})`, default-exports `createThemePlugin(theme)` from e.g. `src/theme.ts`, and adds `@plugin \"./theme.ts\";` after the renderer-web import in its styles.css. The plugin writes into the same base layer after the framework palette, so the app values win in light and dark mode without repeating them in `:root`/`.dark`; colors the framework does not know get utilities (`bg-brand-soft`). `fonts.sans` also sets the body font. The framework's `--card-padding/--card-radius/--card-shadow` defaults moved into `@layer base` (an app's unlayered `:root` still overrides them, an app `@theme` value still does not). CoreTokens gain `font`, `shadow.card` and `spacing.card`. Apps that already duplicate their palette in unlayered `:root`/`.dark` blocks must drop those blocks when switching to the plugin, since unlayered CSS beats it."
+  },
+  {
+    "version": "0.318.0",
+    "type": "improvement",
+    "title": "Formal or informal address per surface",
+    "detail": "`FormalityProvider` (and `createPublicSurface({ formality: \"formal\" })`) makes `t()` look up `<locale>-x-formal` across all plugin bundles before the plain locale, so public pages can say \"Sie\" while the app keeps \"du\". `formalLocaleTag(locale)` builds the tag. locale-de now ships `de-x-formal` overrides for its framework strings. Only bundle lookups are affected: an app resolver that already knows a key answers first, and an app that overrides a framework key in plain \"de\" needs a matching \"de-x-formal\" entry for formal surfaces."
+  },
+  {
+    "version": "0.318.0",
+    "type": "improvement",
+    "title": "Public-page building blocks (StepBar back navigation, sticky actions, copy/share, promo, photo slots, public shell)",
+    "detail": "StepBar takes `onStepSelect` (completed steps become buttons, so a wizard can jump back) and `narrowLayout` (\"label\" or \"steps\"); wizard forms wire it to jump back without validating. ProgressBar gains `tone: \"success\"`. New optional primitives: StickyActionBar (bottom-pinned action row with safe-area padding and an optional back action), CopyButton (clipboard with a copied state), ShareButton (`target: \"whatsapp\"` opens wa.me, `target: \"system\"` opens the share sheet and renders nothing where the browser has none, so pair it with a CopyButton) plus `buildWhatsAppShareUrl`, and PromoPanel (offer surface on its own `--color-promo*` tokens instead of an info banner). New widgets: PhotoSlots (one tile per required shot with thumbnail, per-slot upload and error, optional camera capture; UploadZone forwards `capture` too) and PublicShell (`variant` \"marketing\", \"focus\" with a progress slot, or \"card\"). The new primitives are optional in CorePrimitives, so existing registries keep compiling."
+  },
   {
     "version": "0.316.0",
     "type": "fix",

package/src/components/render-edit.tsx

@@ -865,7 +865,13 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
   }
 
   function handleWizardBack(): void {
-    const previous = Math.max(currentStep - 1, 0);
+    handleWizardJumpBack(currentStep - 1);
+  }
+
+  // Only backwards: a forward jump would skip the per-step validate() gate.
+  function handleWizardJumpBack(targetStep: number): void {
+    if (targetStep >= currentStep) return;
+    const previous = Math.max(targetStep, 0);
     hasNavigatedRef.current = true;
     if (disabled) {
       setRawStep(previous);
@@ -1356,6 +1362,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
                   steps={filteredSections.map((section) => section.title ?? "")}
                   currentIndex={currentStep}
                   compactLabel={compactLabel}
+                  onStepSelect={handleWizardJumpBack}
                   testId="render-edit-wizard-steps"
                   compactTestId="render-edit-wizard-step-label"
                 />

package/src/i18n-defaults.ts

@@ -96,6 +96,9 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
     "kumiko.widget.drawer.maximize": "Maximize drawer width",
     "kumiko.widget.drawer.resize": "Resize drawer",
 
+    "kumiko.planCard.current": "Current plan",
+    "kumiko.planCard.priceUnavailable": "Price not available",
+
     "kumiko.nav.expand": "Expand",
     "kumiko.nav.collapse": "Collapse",
     "kumiko.nav.search": "Search navigation…",

package/src/i18n.tsx

@@ -14,6 +14,7 @@
 //      resolver's `subscribe()` — app code can switch language mid-session
 //      without a reload.
 
+import { type Formality, formalLocaleTag } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
 import {
   createContext,
@@ -68,6 +69,7 @@ type LocaleContextValue = {
 };
 
 const LocaleContext = createContext<LocaleContextValue | undefined>(undefined);
+const FormalityContext = createContext<Formality>("informal");
 
 // Stabile Referenz statt `fallbackBundles = []` als Default-Parameter:
 // ein Literal-Default wird bei JEDEM Aufruf neu allokiert und würde die
@@ -125,14 +127,13 @@ export function useLocale(): LocaleResolver {
   return ctx.resolver;
 }
 
-/** Primäre API für Feature-UI. `t("key", params)` versucht in dieser
- *  Reihenfolge:
- *    1. App-Resolver (z.B. i18next)
- *    2. Plugin-Fallback-Bundles für current-locale
- *    3. Plugin-Fallback-Bundles für fallbackLocale
- *    4. Key as-is
- *  Interpolation für Platzhalter `{name}` passiert unabhängig von der
- *  Source — auch Fallback-Strings können parameters nutzen. */
+/** `t("key", params)` resolves in this order:
+ *    1. App resolver (e.g. i18next)
+ *    2. Plugin fallback bundles for the current locale (under a "formal"
+ *       FormalityProvider, `<locale>-x-formal` across all bundles first)
+ *    3. Plugin fallback bundles for fallbackLocale
+ *    4. The key as-is
+ *  `{name}` interpolation applies to every source, fallback strings included. */
 export function useTranslation(): (
   key: string,
   params?: Readonly<Record<string, unknown>>,
@@ -155,34 +156,65 @@ export function useTranslation(): (
   // (z.B. um Queries neu zu laden wenn sich die Sprache ändert). Ein neu
   // erzeugtes `t` pro Render führt sonst zu einem Render/Effect-Endlos-
   // Loop (siehe admin-shell Overview-Screens, Prod-Incident 2026-07-07).
+  const formality = useContext(FormalityContext);
   return useCallback(
-    (key: string, params?: Readonly<Record<string, unknown>>): string => {
-      // 1. App-provided resolver zuerst. Convention: wenn der App-Resolver
-      //    den Key nicht kennt, gibt er den Key zurück — das ist die
-      //    Fallback-Einladung an Plugin-Bundles. i18next verhält sich
-      //    exakt so per default.
-      const resolved = ctx.resolver.translate(key, params);
-      if (resolved !== key) return resolved;
+    (key: string, params?: Readonly<Record<string, unknown>>): string =>
+      translateWithFallbacks(ctx, locale, formality, key, params),
+    [ctx, locale, formality],
+  );
+}
 
-      // 2. + 3. Plugin-Bundles durchlaufen für current + fallback-locale.
-      const primaryLookup = locale;
-      // `primaryLookup` könnte z.B. "de-AT" sein — in den Bundles stehen
-      // oft nur die Language-Roots ("de"). Wir versuchen beide.
-      const languageRoot = primaryLookup.split("-")[0] ?? primaryLookup;
-      const localesToTry = [primaryLookup, languageRoot, ctx.fallbackLocale];
+/** Wording for the subtree: `formal` makes `t` prefer the `<locale>-x-formal`
+ *  bundle entries (e.g. "Sie" on public pages) over plain `<locale>`. */
+export function FormalityProvider({
+  formality,
+  children,
+}: {
+  readonly formality: Formality;
+  readonly children: ReactNode;
+}): ReactNode {
+  return <FormalityContext.Provider value={formality}>{children}</FormalityContext.Provider>;
+}
+
+export function useFormality(): Formality {
+  return useContext(FormalityContext);
+}
 
-      for (const bundle of ctx.fallbackBundles) {
-        for (const localeToTry of localesToTry) {
-          const value = bundle[localeToTry]?.[key];
-          if (value !== undefined) return interpolate(value, params);
-        }
+// Lookup order: (1) app resolver — it returns the key itself when it has no
+// entry, which is the invitation to try the plugin bundles; (2) the bundles in
+// array order per locale tier; (3) the key as-is. Under "formal" the formal
+// tier is searched across ALL bundles before any plain tier, so a plain "de"
+// app override never puts "du" on a formal page when locale-de has a formal
+// variant; an app rewording such a key must also ship its "de-x-formal" text.
+function translateWithFallbacks(
+  ctx: LocaleContextValue,
+  locale: string,
+  formality: Formality,
+  key: string,
+  params?: Readonly<Record<string, unknown>>,
+): string {
+  const resolved = ctx.resolver.translate(key, params);
+  if (resolved !== key) return resolved;
+  for (const localesToTry of bundleLocaleTiers(locale, ctx.fallbackLocale, formality)) {
+    for (const bundle of ctx.fallbackBundles) {
+      for (const localeToTry of localesToTry) {
+        const value = bundle[localeToTry]?.[key];
+        if (value !== undefined) return interpolate(value, params);
       }
+    }
+  }
+  return key;
+}
 
-      // 4. Nichts gefunden — key zurück, wie der Default-Resolver auch.
-      return key;
-    },
-    [ctx, locale],
-  );
+function bundleLocaleTiers(
+  locale: string,
+  fallbackLocale: string,
+  formality: Formality,
+): readonly (readonly string[])[] {
+  const languageRoot = locale.split("-")[0] ?? locale;
+  const plainTier = [locale, languageRoot, fallbackLocale];
+  if (formality === "informal") return [plainTier];
+  return [[formalLocaleTag(locale), formalLocaleTag(languageRoot)], plainTier];
 }
 
 function interpolate(template: string, params?: Readonly<Record<string, unknown>>): string {
@@ -226,22 +258,11 @@ export function useOptionalTranslation():
     () => (ctx ? ctx.resolver.locale() : "en"),
     () => (ctx ? ctx.resolver.locale() : "en"),
   );
+  const formality = useContext(FormalityContext);
   const t = useCallback(
-    (key: string, params?: Readonly<Record<string, unknown>>): string => {
-      if (ctx === undefined) return key;
-      const resolved = ctx.resolver.translate(key, params);
-      if (resolved !== key) return resolved;
-      const languageRoot = locale.split("-")[0] ?? locale;
-      const localesToTry = [locale, languageRoot, ctx.fallbackLocale];
-      for (const bundle of ctx.fallbackBundles) {
-        for (const localeToTry of localesToTry) {
-          const value = bundle[localeToTry]?.[key];
-          if (value !== undefined) return interpolate(value, params);
-        }
-      }
-      return key;
-    },
-    [ctx, locale],
+    (key: string, params?: Readonly<Record<string, unknown>>): string =>
+      ctx === undefined ? key : translateWithFallbacks(ctx, locale, formality, key, params),
+    [ctx, locale, formality],
   );
   return ctx === undefined ? undefined : t;
 }

package/src/index.ts

@@ -9,6 +9,7 @@
 // eigenen Bootstrap schreiben will. Normale Samples gehen über
 // @cosmicdrift/kumiko-renderer-web/createKumikoApp, das alle Provider verdrahtet.
 
+export { type Formality, formalLocaleTag } from "@cosmicdrift/kumiko-framework/ui-types";
 export { synthesizeActionFormEntity, synthesizeActionFormScreen } from "./app/action-form-shim";
 export type { AppFeaturesProviderProps } from "./app/app-features-context";
 export { AppFeaturesProvider, useAppFeatures } from "./app/app-features-context";
@@ -176,9 +177,11 @@ export type {
 } from "./i18n";
 export {
   createStaticLocaleResolver,
+  FormalityProvider,
   LocaleProvider,
   mergeTranslations,
   translationsByLocaleFromKeys,
+  useFormality,
   useLocale,
   useOptionalLocale,
   useOptionalTranslation,
@@ -194,6 +197,7 @@ export type {
   CardOptions,
   CardProps,
   CardSlots,
+  CopyButtonProps,
   CorePrimitives,
   DataTableDateRangeFacet,
   DataTableFacet,
@@ -224,13 +228,18 @@ export type {
   PrimitivesProviderProps,
   PrimitivesRegistry,
   ProgressProps,
+  ProgressTone,
+  PromoPanelAction,
+  PromoPanelProps,
   RuntimeRenderer,
   SecretRevealProps,
   SecretRevealValue,
   SectionProps,
+  ShareButtonProps,
   StatusBadgeProps,
   StatusTone,
   StepBarProps,
+  StickyActionBarProps,
   StickyPrimaryActionMarker,
   TabsProps,
   TextProps,
@@ -243,6 +252,7 @@ export {
   statusToneForValue,
   usePrimitives,
 } from "./primitives";
+export { buildWhatsAppShareUrl } from "./share-links";
 export { sortByAccessor } from "./sort-by-accessor";
 export type { LiveEvent, LiveEventSubscriber, LiveEventsProviderProps } from "./sse/live-events";
 export { LiveEventsProvider, useLiveEvents } from "./sse/live-events";
@@ -250,7 +260,10 @@ export type {
   AppTokens,
   ColorTokens,
   CoreTokens,
+  FontTokens,
   RadiusTokens,
+  ShadowTokens,
+  SpacingTokens,
   ThemeMode,
   Tokens,
   TokensApi,

package/src/primitives.tsx

@@ -1096,15 +1096,19 @@ export type CardProps = {
  *  0..1 fraction, not a percentage — implementations scale for display.
  *  `tone` controls the fill color; omitted defaults to "default" (backward
  *  compatible with callers predating this field). */
+export type ProgressTone = "default" | "success" | "warn" | "danger";
+
 export type ProgressProps = {
   readonly value: number;
-  readonly tone?: "default" | "warn" | "danger";
+  readonly tone?: ProgressTone;
   readonly testId?: string;
 };
 
 /** Wizard step overview — numbered chips, one per step label, with the
- *  active step highlighted. Not clickable (step-jump validation is a
- *  separate concern, kumiko-framework#1966). Implementations render a
+ *  active step highlighted. With `onStepSelect`, completed steps (index
+ *  below `currentIndex`) become buttons for going back; forward jumps stay
+ *  impossible because step-jump validation is a separate concern
+ *  (kumiko-framework#1966). Implementations render a
  *  narrow-viewport fallback showing `compactLabel` instead (caller
  *  supplies it pre-translated, e.g. "Step 2 of 5 · Industry") — which of
  *  the two is visible is a responsive layout choice owned by the
@@ -1113,6 +1117,11 @@ export type StepBarProps = {
   readonly steps: readonly string[];
   readonly currentIndex: number;
   readonly compactLabel: string;
+  readonly onStepSelect?: (index: number) => void;
+  /** "label" (default) swaps the step row for `compactLabel` on narrow
+   *  viewports; "steps" keeps the row there too — for short wizards whose
+   *  labels fit a phone and whose done steps must stay tappable. */
+  readonly narrowLayout?: "label" | "steps";
   readonly testId?: string;
   readonly compactTestId?: string;
 };
@@ -1259,6 +1268,59 @@ export type SecretRevealProps = {
   readonly testId?: string;
 };
 
+/** Thumb-reach action row for custom screens: pinned to the bottom edge on
+ *  narrow viewports (above the device's safe-area inset), inline otherwise.
+ *  `children` are the forward actions and share the remaining width; `back`
+ *  renders an icon-only back control in front of them. */
+export type StickyActionBarProps = {
+  readonly children: ReactNode;
+  readonly back?: { readonly onBack: () => void; readonly label: string };
+  readonly testId?: string;
+};
+
+/** Copies `text` to the clipboard; the label flips to `copiedLabel` once
+ *  the platform confirmed the write. */
+export type CopyButtonProps = {
+  readonly text: string;
+  readonly label: string;
+  readonly copiedLabel: string;
+  readonly variant?: "primary" | "secondary";
+  /** Layout extras — web merges via cn(), native impls ignore it. */
+  readonly className?: string;
+  readonly testId?: string;
+};
+
+/** Hands `text` to another app. "whatsapp" opens a WhatsApp chat prefilled
+ *  with the text (to `phone` when given, otherwise the contact picker);
+ *  "system" opens the platform share sheet and renders nothing where the
+ *  platform has none. */
+export type ShareButtonProps = {
+  readonly text: string;
+  readonly label: string;
+  readonly variant?: "primary" | "secondary";
+  /** Layout extras — web merges via cn(), native impls ignore it. */
+  readonly className?: string;
+  readonly testId?: string;
+} & (
+  | { readonly target: "whatsapp"; readonly phone?: string }
+  | { readonly target: "system"; readonly title?: string; readonly url?: string }
+);
+
+export type PromoPanelAction =
+  | { readonly label: string; readonly href: string; readonly testId?: string }
+  | { readonly label: string; readonly onClick: () => void; readonly testId?: string };
+
+/** Offer surface for upsells (e.g. "create an account"): its own tinted
+ *  panel with eyebrow, headline, benefit content and one call to action, so
+ *  an offer never reads like an info or error banner. */
+export type PromoPanelProps = {
+  readonly title: string;
+  readonly eyebrow?: string;
+  readonly children?: ReactNode;
+  readonly action?: PromoPanelAction;
+  readonly testId?: string;
+};
+
 // ---- Core-Registry (Kumiko-eigene Primitives) ----
 
 export type CorePrimitives = {
@@ -1327,6 +1389,16 @@ export type CorePrimitives = {
    *  CorePrimitives mocks in tests keep compiling — additive rollout of
    *  a new primitive shouldn't force every test double to grow a stub. */
   readonly SecretReveal?: ComponentType<SecretRevealProps>;
+  /** Optional (unlike the other Core-Primitives) so existing partial
+   *  CorePrimitives mocks in tests keep compiling — additive rollout of
+   *  a new primitive shouldn't force every test double to grow a stub. */
+  readonly StickyActionBar?: ComponentType<StickyActionBarProps>;
+  /** Optional — additive rollout, see StickyActionBar. */
+  readonly CopyButton?: ComponentType<CopyButtonProps>;
+  /** Optional — additive rollout, see StickyActionBar. */
+  readonly ShareButton?: ComponentType<ShareButtonProps>;
+  /** Optional — additive rollout, see StickyActionBar. */
+  readonly PromoPanel?: ComponentType<PromoPanelProps>;
 };
 
 /** Offene Extension-Zone für App-eigene Primitives. Devs erweitern

package/src/share-links.ts

@@ -0,0 +1,12 @@
+/** wa.me link that opens WhatsApp with `text` prefilled — addressed to
+ *  `phone` when given (any formatting; international form required, a
+ *  leading "+" or "00" is accepted), otherwise WhatsApp's contact picker. */
+export function buildWhatsAppShareUrl(text: string, phone?: string): string {
+  const recipient = phone === undefined ? "" : whatsAppRecipientDigits(phone);
+  return `https://wa.me/${recipient}?text=${encodeURIComponent(text)}`;
+}
+
+function whatsAppRecipientDigits(phone: string): string {
+  const digits = phone.replace(/\D/g, "");
+  return digits.startsWith("00") ? digits.slice(2) : digits;
+}

package/src/tokens.tsx

@@ -46,9 +46,26 @@ export type RadiusTokens = {
   readonly xl: string;
 };
 
+export type FontTokens = {
+  readonly sans: string;
+  readonly heading: string;
+  readonly mono: string;
+};
+
+export type ShadowTokens = {
+  readonly card: string;
+};
+
+export type SpacingTokens = {
+  readonly card: string;
+};
+
 export type CoreTokens = {
   readonly color: ColorTokens;
   readonly radius: RadiusTokens;
+  readonly font: FontTokens;
+  readonly shadow: ShadowTokens;
+  readonly spacing: SpacingTokens;
 };
 
 /** Erweiterung für App-eigene Token-Kategorien. Devs augmentieren:
@@ -139,4 +156,15 @@ export const cssVarTokens: Tokens = {
     lg: "var(--radius-lg)",
     xl: "var(--radius-xl)",
   },
+  font: {
+    sans: "var(--font-sans)",
+    heading: "var(--font-heading)",
+    mono: "var(--font-mono)",
+  },
+  shadow: {
+    card: "var(--card-shadow)",
+  },
+  spacing: {
+    card: "var(--card-padding)",
+  },
 } as Tokens;