@web-my-money/preset-wmm 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { AppShellProps } from '@web-my-money/blocks/app';
+import { DesignStudioProps } from '@web-my-money/blocks/fx';
+
+interface WmmAppShellProps extends Omit<AppShellProps, "logo"> {
+    /** Show the "WMM OS" link at the bottom of the sidebar. Default true. */
+    showOsLink?: boolean;
+    /** Show the light/dark toggle in the header. Default true. */
+    showThemeToggle?: boolean;
+    /** Show the sidebar⇄top layout toggle in the header. Default false. */
+    showLayoutToggle?: boolean;
+    osHref?: string;
+}
+/**
+ * The WMM-branded mini-app shell — `AppShell` (generic) pre-wired with the WMM
+ * mark, a link back to the OS, and the theme toggle. This is the opinionated
+ * "preset" layer: generic packages (tokens/blocks/primitives) stay brand-agnostic,
+ * `@web-my-money/preset-wmm` is where WMM's specific defaults live. A client brand
+ * gets its own `preset-<client>` package following this exact shape.
+ *
+ *   <WmmAppShell appName="Brain" nav={nav}>{children}</WmmAppShell>
+ */
+declare function WmmAppShell({ showOsLink, showThemeToggle, showLayoutToggle, osHref, sidebarFooter, headerActions, ...rest }: WmmAppShellProps): React.JSX.Element;
+
+interface WmmLandingShellProps {
+    children: React.ReactNode;
+    /** "wmm" = dark marketing brand (default). "light" = navy-on-white (med-spa / local-service). */
+    theme?: "wmm" | "light";
+    /** Sticky top nav content (left side, next to the logo). */
+    nav?: React.ReactNode;
+    /** Override the footer links (defaults to the standard WMM set). */
+    footerLinks?: readonly {
+        label: string;
+        href: string;
+    }[];
+    className?: string;
+}
+/**
+ * The WMM-branded landing/funnel shell — wraps page content with the WMM logo
+ * header + standard footer, defaulting to the dark `wmm` marketing theme (or
+ * `light` for a med-spa / local-service lead-gen page). Compose page sections
+ * from `@web-my-money/blocks/site` + `/funnel` + `/fx` inside `children`.
+ *
+ *   <WmmLandingShell>
+ *     <HeroSection ... /> ... <OfferStack ... />
+ *   </WmmLandingShell>
+ */
+declare function WmmLandingShell({ children, theme, nav, footerLinks, className, }: WmmLandingShellProps): React.JSX.Element;
+
+interface WmmSplashProps {
+    /** Optional line under the logo. */
+    tagline?: string;
+    /** Play the animated logo video (motionUrl("mark")) instead of the static mark. */
+    motionSrc?: string;
+    /** Fill the viewport (default) or just the parent box. */
+    fullscreen?: boolean;
+    /** Logo height in px. Default 72. */
+    size?: number;
+    className?: string;
+}
+/**
+ * The WMM branded splash / boot / loading screen — the signature "WMM feel" on app start.
+ * Deep-navy field with an aqua glow and the WMM mark (white on dark). Pass `motionSrc`
+ * (e.g. `motionUrl("mark")`) to play the animated logo; falls back to the animated static
+ * mark, so it always renders. Drop it in while the app authenticates / hydrates.
+ */
+declare function WmmSplash({ tagline, motionSrc, fullscreen, size, className, }: WmmSplashProps): React.JSX.Element;
+
+interface WmmFxStudioProps extends Pick<DesignStudioProps, "position" | "defaultOpen" | "showThemes" | "showBackgrounds"> {
+    children: React.ReactNode;
+    /** Render a live DynamicBackground behind children (aurora/mesh/grid/…). Default false —
+     * app dashboards usually want a solid surface; landing/marketing pages want this on. */
+    withBackground?: boolean;
+    className?: string;
+}
+/**
+ * Drop-in "WMM feel" layer — the live theme + background + logo picker (DesignStudio),
+ * pre-wired with the real WMM marks (mono, full-colour gradient, interactive 3D). Wrap any
+ * page or the whole app shell; end users get a floating panel (bottom-right sparkle button)
+ * to switch light/dark/wmm, pick a dynamic background, and choose how the logo renders —
+ * persisted to localStorage.
+ *
+ *   <WmmFxStudio withBackground>
+ *     <WmmAppShell appName="Brain" nav={nav}>{children}</WmmAppShell>
+ *   </WmmFxStudio>
+ */
+declare function WmmFxStudio({ children, withBackground, className, ...studioProps }: WmmFxStudioProps): React.JSX.Element;
+
+declare const WMM_OS_URL = "https://os.webmymoney.com";
+declare const WMM_WEBSITE_URL = "https://webmymoney.com";
+declare const WMM_LANDING_FOOTER_LINKS: readonly [{
+    readonly label: "Case Studies";
+    readonly href: "https://webmymoney.com/#work";
+}, {
+    readonly label: "Book a Call";
+    readonly href: "https://webmymoney.com/#book";
+}, {
+    readonly label: "Privacy";
+    readonly href: "https://webmymoney.com/privacy";
+}];
+declare const WMM_COPYRIGHT: string;
+
+export { WMM_COPYRIGHT, WMM_LANDING_FOOTER_LINKS, WMM_OS_URL, WMM_WEBSITE_URL, WmmAppShell, type WmmAppShellProps, WmmFxStudio, type WmmFxStudioProps, WmmLandingShell, type WmmLandingShellProps, WmmSplash, type WmmSplashProps };

package/dist/index.d.ts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { AppShellProps } from '@web-my-money/blocks/app';
+import { DesignStudioProps } from '@web-my-money/blocks/fx';
+
+interface WmmAppShellProps extends Omit<AppShellProps, "logo"> {
+    /** Show the "WMM OS" link at the bottom of the sidebar. Default true. */
+    showOsLink?: boolean;
+    /** Show the light/dark toggle in the header. Default true. */
+    showThemeToggle?: boolean;
+    /** Show the sidebar⇄top layout toggle in the header. Default false. */
+    showLayoutToggle?: boolean;
+    osHref?: string;
+}
+/**
+ * The WMM-branded mini-app shell — `AppShell` (generic) pre-wired with the WMM
+ * mark, a link back to the OS, and the theme toggle. This is the opinionated
+ * "preset" layer: generic packages (tokens/blocks/primitives) stay brand-agnostic,
+ * `@web-my-money/preset-wmm` is where WMM's specific defaults live. A client brand
+ * gets its own `preset-<client>` package following this exact shape.
+ *
+ *   <WmmAppShell appName="Brain" nav={nav}>{children}</WmmAppShell>
+ */
+declare function WmmAppShell({ showOsLink, showThemeToggle, showLayoutToggle, osHref, sidebarFooter, headerActions, ...rest }: WmmAppShellProps): React.JSX.Element;
+
+interface WmmLandingShellProps {
+    children: React.ReactNode;
+    /** "wmm" = dark marketing brand (default). "light" = navy-on-white (med-spa / local-service). */
+    theme?: "wmm" | "light";
+    /** Sticky top nav content (left side, next to the logo). */
+    nav?: React.ReactNode;
+    /** Override the footer links (defaults to the standard WMM set). */
+    footerLinks?: readonly {
+        label: string;
+        href: string;
+    }[];
+    className?: string;
+}
+/**
+ * The WMM-branded landing/funnel shell — wraps page content with the WMM logo
+ * header + standard footer, defaulting to the dark `wmm` marketing theme (or
+ * `light` for a med-spa / local-service lead-gen page). Compose page sections
+ * from `@web-my-money/blocks/site` + `/funnel` + `/fx` inside `children`.
+ *
+ *   <WmmLandingShell>
+ *     <HeroSection ... /> ... <OfferStack ... />
+ *   </WmmLandingShell>
+ */
+declare function WmmLandingShell({ children, theme, nav, footerLinks, className, }: WmmLandingShellProps): React.JSX.Element;
+
+interface WmmSplashProps {
+    /** Optional line under the logo. */
+    tagline?: string;
+    /** Play the animated logo video (motionUrl("mark")) instead of the static mark. */
+    motionSrc?: string;
+    /** Fill the viewport (default) or just the parent box. */
+    fullscreen?: boolean;
+    /** Logo height in px. Default 72. */
+    size?: number;
+    className?: string;
+}
+/**
+ * The WMM branded splash / boot / loading screen — the signature "WMM feel" on app start.
+ * Deep-navy field with an aqua glow and the WMM mark (white on dark). Pass `motionSrc`
+ * (e.g. `motionUrl("mark")`) to play the animated logo; falls back to the animated static
+ * mark, so it always renders. Drop it in while the app authenticates / hydrates.
+ */
+declare function WmmSplash({ tagline, motionSrc, fullscreen, size, className, }: WmmSplashProps): React.JSX.Element;
+
+interface WmmFxStudioProps extends Pick<DesignStudioProps, "position" | "defaultOpen" | "showThemes" | "showBackgrounds"> {
+    children: React.ReactNode;
+    /** Render a live DynamicBackground behind children (aurora/mesh/grid/…). Default false —
+     * app dashboards usually want a solid surface; landing/marketing pages want this on. */
+    withBackground?: boolean;
+    className?: string;
+}
+/**
+ * Drop-in "WMM feel" layer — the live theme + background + logo picker (DesignStudio),
+ * pre-wired with the real WMM marks (mono, full-colour gradient, interactive 3D). Wrap any
+ * page or the whole app shell; end users get a floating panel (bottom-right sparkle button)
+ * to switch light/dark/wmm, pick a dynamic background, and choose how the logo renders —
+ * persisted to localStorage.
+ *
+ *   <WmmFxStudio withBackground>
+ *     <WmmAppShell appName="Brain" nav={nav}>{children}</WmmAppShell>
+ *   </WmmFxStudio>
+ */
+declare function WmmFxStudio({ children, withBackground, className, ...studioProps }: WmmFxStudioProps): React.JSX.Element;
+
+declare const WMM_OS_URL = "https://os.webmymoney.com";
+declare const WMM_WEBSITE_URL = "https://webmymoney.com";
+declare const WMM_LANDING_FOOTER_LINKS: readonly [{
+    readonly label: "Case Studies";
+    readonly href: "https://webmymoney.com/#work";
+}, {
+    readonly label: "Book a Call";
+    readonly href: "https://webmymoney.com/#book";
+}, {
+    readonly label: "Privacy";
+    readonly href: "https://webmymoney.com/privacy";
+}];
+declare const WMM_COPYRIGHT: string;
+
+export { WMM_COPYRIGHT, WMM_LANDING_FOOTER_LINKS, WMM_OS_URL, WMM_WEBSITE_URL, WmmAppShell, type WmmAppShellProps, WmmFxStudio, type WmmFxStudioProps, WmmLandingShell, type WmmLandingShellProps, WmmSplash, type WmmSplashProps };

package/dist/index.js

@@ -0,0 +1,198 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  WMM_COPYRIGHT: () => WMM_COPYRIGHT,
+  WMM_LANDING_FOOTER_LINKS: () => WMM_LANDING_FOOTER_LINKS,
+  WMM_OS_URL: () => WMM_OS_URL,
+  WMM_WEBSITE_URL: () => WMM_WEBSITE_URL,
+  WmmAppShell: () => WmmAppShell,
+  WmmFxStudio: () => WmmFxStudio,
+  WmmLandingShell: () => WmmLandingShell,
+  WmmSplash: () => WmmSplash
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/wmm-app-shell.tsx
+var import_app = require("@web-my-money/blocks/app");
+var import_react = require("@web-my-money/tokens/react");
+var import_brand = require("@web-my-money/brand");
+
+// src/constants.ts
+var WMM_OS_URL = "https://os.webmymoney.com";
+var WMM_WEBSITE_URL = "https://webmymoney.com";
+var WMM_LANDING_FOOTER_LINKS = [
+  { label: "Case Studies", href: `${WMM_WEBSITE_URL}/#work` },
+  { label: "Book a Call", href: `${WMM_WEBSITE_URL}/#book` },
+  { label: "Privacy", href: `${WMM_WEBSITE_URL}/privacy` }
+];
+var WMM_COPYRIGHT = `\xA9 ${(/* @__PURE__ */ new Date()).getUTCFullYear()} Web My Money. All rights reserved.`;
+
+// src/wmm-app-shell.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function WmmAppShell({
+  showOsLink = true,
+  showThemeToggle = true,
+  showLayoutToggle = false,
+  osHref = WMM_OS_URL,
+  sidebarFooter,
+  headerActions,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_app.AppShell,
+    {
+      ...rest,
+      logo: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_brand.WmmLogo, { variant: "mark", size: 22 }),
+      headerActions: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        headerActions,
+        showLayoutToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_app.LayoutToggle, {}),
+        showThemeToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.ThemeToggle, {})
+      ] }),
+      sidebarFooter: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        sidebarFooter,
+        showOsLink && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "a",
+          {
+            href: osHref,
+            className: "flex items-center gap-2 rounded-md px-2.5 py-2 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_brand.WmmLogo, { variant: "mark", size: 14 }),
+              "WMM OS"
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/wmm-landing-shell.tsx
+var import_site = require("@web-my-money/blocks/site");
+var import_brand2 = require("@web-my-money/brand");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function WmmLandingShell({
+  children,
+  theme = "wmm",
+  nav,
+  footerLinks = WMM_LANDING_FOOTER_LINKS,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-theme": theme, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { className: "sticky top-0 z-40 flex h-16 items-center gap-6 border-b border-border bg-background/80 px-6 backdrop-blur", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: "/", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_brand2.WmmLogo, { variant: "lockup", size: 24 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("nav", { className: "ml-auto flex items-center gap-6", children: nav })
+    ] }),
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_site.Footer, { copyrightText: WMM_COPYRIGHT, links: [...footerLinks], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_brand2.WmmLogo, { variant: "mark", size: 20, tone: theme === "light" ? "navy" : "white" }) })
+  ] });
+}
+
+// src/wmm-splash.tsx
+var import_brand3 = require("@web-my-money/brand");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var KEYFRAMES = `
+@keyframes wmm-splash-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
+@keyframes wmm-splash-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
+@keyframes wmm-splash-glow { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.08); } }
+`;
+function WmmSplash({
+  tagline,
+  motionSrc,
+  fullscreen = true,
+  size = 72,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      "data-theme": "wmm",
+      className,
+      style: {
+        position: fullscreen ? "fixed" : "relative",
+        inset: fullscreen ? 0 : void 0,
+        minHeight: fullscreen ? void 0 : 320,
+        zIndex: fullscreen ? 60 : void 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 20,
+        background: "var(--background, #080b14)",
+        color: "var(--foreground, #f8fafc)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { dangerouslySetInnerHTML: { __html: KEYFRAMES } }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              width: 480,
+              height: 480,
+              borderRadius: "50%",
+              background: "radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 70%)",
+              animation: "wmm-splash-glow 3.4s ease-in-out infinite",
+              filter: "blur(8px)"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { position: "relative", animation: "wmm-splash-in 0.5s ease-out both" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { animation: "wmm-splash-float 4s ease-in-out infinite" }, children: motionSrc ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_brand3.WmmLogoMotion, { src: motionSrc, size }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_brand3.WmmLogo, { variant: "mark", tone: "white", size }) }) }),
+        tagline && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { position: "relative", margin: 0, fontSize: 14, color: "var(--muted-foreground, #94a3b8)", animation: "wmm-splash-in 0.6s ease-out 0.1s both" }, children: tagline })
+      ]
+    }
+  );
+}
+
+// src/wmm-fx-studio.tsx
+var import_fx = require("@web-my-money/blocks/fx");
+var import_brand4 = require("@web-my-money/brand");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var WMM_LOGO_OPTIONS = [
+  { id: "mono", label: "Mono", node: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_brand4.WmmLogo, { variant: "mark", size: 40 }) },
+  { id: "full", label: "Colour", node: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_brand4.WmmLogo, { variant: "mark", tone: "full", size: 40 }) },
+  { id: "3d", label: "3D", node: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_brand4.WmmLogo3D, { size: 44 }) }
+];
+function WmmFxStudio({
+  children,
+  withBackground = false,
+  className,
+  ...studioProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_fx.FxPreferencesProvider, { defaultBackground: withBackground ? "aurora" : "none", children: [
+    withBackground && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "aria-hidden": true, className: "pointer-events-none fixed inset-0 -z-10", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fx.DynamicBackground, { noise: true }) }),
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fx.DesignStudio, { className, logos: WMM_LOGO_OPTIONS, ...studioProps })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WMM_COPYRIGHT,
+  WMM_LANDING_FOOTER_LINKS,
+  WMM_OS_URL,
+  WMM_WEBSITE_URL,
+  WmmAppShell,
+  WmmFxStudio,
+  WmmLandingShell,
+  WmmSplash
+});

package/dist/index.mjs

@@ -0,0 +1,168 @@
+// src/wmm-app-shell.tsx
+import { AppShell, LayoutToggle } from "@web-my-money/blocks/app";
+import { ThemeToggle } from "@web-my-money/tokens/react";
+import { WmmLogo } from "@web-my-money/brand";
+
+// src/constants.ts
+var WMM_OS_URL = "https://os.webmymoney.com";
+var WMM_WEBSITE_URL = "https://webmymoney.com";
+var WMM_LANDING_FOOTER_LINKS = [
+  { label: "Case Studies", href: `${WMM_WEBSITE_URL}/#work` },
+  { label: "Book a Call", href: `${WMM_WEBSITE_URL}/#book` },
+  { label: "Privacy", href: `${WMM_WEBSITE_URL}/privacy` }
+];
+var WMM_COPYRIGHT = `\xA9 ${(/* @__PURE__ */ new Date()).getUTCFullYear()} Web My Money. All rights reserved.`;
+
+// src/wmm-app-shell.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function WmmAppShell({
+  showOsLink = true,
+  showThemeToggle = true,
+  showLayoutToggle = false,
+  osHref = WMM_OS_URL,
+  sidebarFooter,
+  headerActions,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    AppShell,
+    {
+      ...rest,
+      logo: /* @__PURE__ */ jsx(WmmLogo, { variant: "mark", size: 22 }),
+      headerActions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        headerActions,
+        showLayoutToggle && /* @__PURE__ */ jsx(LayoutToggle, {}),
+        showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {})
+      ] }),
+      sidebarFooter: /* @__PURE__ */ jsxs(Fragment, { children: [
+        sidebarFooter,
+        showOsLink && /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: osHref,
+            className: "flex items-center gap-2 rounded-md px-2.5 py-2 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(WmmLogo, { variant: "mark", size: 14 }),
+              "WMM OS"
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/wmm-landing-shell.tsx
+import { Footer } from "@web-my-money/blocks/site";
+import { WmmLogo as WmmLogo2 } from "@web-my-money/brand";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function WmmLandingShell({
+  children,
+  theme = "wmm",
+  nav,
+  footerLinks = WMM_LANDING_FOOTER_LINKS,
+  className
+}) {
+  return /* @__PURE__ */ jsxs2("div", { "data-theme": theme, className, children: [
+    /* @__PURE__ */ jsxs2("header", { className: "sticky top-0 z-40 flex h-16 items-center gap-6 border-b border-border bg-background/80 px-6 backdrop-blur", children: [
+      /* @__PURE__ */ jsx2("a", { href: "/", "aria-label": "Home", children: /* @__PURE__ */ jsx2(WmmLogo2, { variant: "lockup", size: 24 }) }),
+      /* @__PURE__ */ jsx2("nav", { className: "ml-auto flex items-center gap-6", children: nav })
+    ] }),
+    children,
+    /* @__PURE__ */ jsx2(Footer, { copyrightText: WMM_COPYRIGHT, links: [...footerLinks], children: /* @__PURE__ */ jsx2(WmmLogo2, { variant: "mark", size: 20, tone: theme === "light" ? "navy" : "white" }) })
+  ] });
+}
+
+// src/wmm-splash.tsx
+import { WmmLogo as WmmLogo3, WmmLogoMotion } from "@web-my-money/brand";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var KEYFRAMES = `
+@keyframes wmm-splash-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
+@keyframes wmm-splash-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
+@keyframes wmm-splash-glow { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.08); } }
+`;
+function WmmSplash({
+  tagline,
+  motionSrc,
+  fullscreen = true,
+  size = 72,
+  className
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-theme": "wmm",
+      className,
+      style: {
+        position: fullscreen ? "fixed" : "relative",
+        inset: fullscreen ? 0 : void 0,
+        minHeight: fullscreen ? void 0 : 320,
+        zIndex: fullscreen ? 60 : void 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 20,
+        background: "var(--background, #080b14)",
+        color: "var(--foreground, #f8fafc)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx3("style", { dangerouslySetInnerHTML: { __html: KEYFRAMES } }),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              width: 480,
+              height: 480,
+              borderRadius: "50%",
+              background: "radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 70%)",
+              animation: "wmm-splash-glow 3.4s ease-in-out infinite",
+              filter: "blur(8px)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { position: "relative", animation: "wmm-splash-in 0.5s ease-out both" }, children: /* @__PURE__ */ jsx3("div", { style: { animation: "wmm-splash-float 4s ease-in-out infinite" }, children: motionSrc ? /* @__PURE__ */ jsx3(WmmLogoMotion, { src: motionSrc, size }) : /* @__PURE__ */ jsx3(WmmLogo3, { variant: "mark", tone: "white", size }) }) }),
+        tagline && /* @__PURE__ */ jsx3("p", { style: { position: "relative", margin: 0, fontSize: 14, color: "var(--muted-foreground, #94a3b8)", animation: "wmm-splash-in 0.6s ease-out 0.1s both" }, children: tagline })
+      ]
+    }
+  );
+}
+
+// src/wmm-fx-studio.tsx
+import {
+  FxPreferencesProvider,
+  DynamicBackground,
+  DesignStudio
+} from "@web-my-money/blocks/fx";
+import { WmmLogo as WmmLogo4, WmmLogo3D } from "@web-my-money/brand";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var WMM_LOGO_OPTIONS = [
+  { id: "mono", label: "Mono", node: /* @__PURE__ */ jsx4(WmmLogo4, { variant: "mark", size: 40 }) },
+  { id: "full", label: "Colour", node: /* @__PURE__ */ jsx4(WmmLogo4, { variant: "mark", tone: "full", size: 40 }) },
+  { id: "3d", label: "3D", node: /* @__PURE__ */ jsx4(WmmLogo3D, { size: 44 }) }
+];
+function WmmFxStudio({
+  children,
+  withBackground = false,
+  className,
+  ...studioProps
+}) {
+  return /* @__PURE__ */ jsxs4(FxPreferencesProvider, { defaultBackground: withBackground ? "aurora" : "none", children: [
+    withBackground && /* @__PURE__ */ jsx4("div", { "aria-hidden": true, className: "pointer-events-none fixed inset-0 -z-10", children: /* @__PURE__ */ jsx4(DynamicBackground, { noise: true }) }),
+    children,
+    /* @__PURE__ */ jsx4(DesignStudio, { className, logos: WMM_LOGO_OPTIONS, ...studioProps })
+  ] });
+}
+export {
+  WMM_COPYRIGHT,
+  WMM_LANDING_FOOTER_LINKS,
+  WMM_OS_URL,
+  WMM_WEBSITE_URL,
+  WmmAppShell,
+  WmmFxStudio,
+  WmmLandingShell,
+  WmmSplash
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@web-my-money/preset-wmm",
+  "version": "1.0.0",
+  "description": "The WMM-branded preset — pre-wires the generic AppShell/landing blocks with the WMM logo, theme, and standard nav/footer. First of a preset family (@web-my-money/preset-<brand>); generic packages (tokens/primitives/blocks) stay brand-agnostic, presets are the opinionated per-brand layer on top.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@web-my-money/blocks": "*",
+    "@web-my-money/brand": "*",
+    "@web-my-money/tokens": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "license": "UNLICENSED"
+}