@eifi1/ui-kit 0.30.0 → 0.31.1

package/dist/landing/landing-sections.d.ts

@@ -0,0 +1,218 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { dY as LegalFooterProps } from '../delete-account-setting-CpIhzxxZ.js';
+import { LandingActionsProps } from './landing-actions.js';
+import { LandingLabels } from './landing-labels.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-DUELeXpa.js';
+import '../components/data-table-sort.js';
+import '../components/swipeable-row.js';
+import '../components/mini-calendar.js';
+import '../components/calendar-heatmap.js';
+import '../components/popover.js';
+import '../components/chip.js';
+import 'lucide-react';
+import '../components/field-sync.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import '../components/month-picker.js';
+import '../components/page-contents.js';
+import '../components/series-chart-labels.js';
+import '../components/pie-chart-labels.js';
+import '../components/sparkline.js';
+import '../components/stat-tile.js';
+import '../components/signature-pad.js';
+import '../components/password-strength.js';
+import '../components/swatch-picker.js';
+import '../components/tile-radio.js';
+import '../components/icon-picker.js';
+import '../components/dialog-frame.js';
+import '../components/modal.js';
+import '../hooks/use-search-param-state.js';
+import '../components/measured-grid.js';
+import '../components/user-avatar.js';
+import '../lib/person-name.js';
+import '../components/status-dot.js';
+import '../components/progress-bar.js';
+import '../components/signed-amount.js';
+import '../shell/topbar-action-menu.js';
+import '../components/menu-item.js';
+import '../components/floating-panel.js';
+import '../hooks/use-authed-src.js';
+import '../components/account-settings-labels.js';
+import '../components/bulk-action-bar.js';
+import '../components/list.js';
+import '../components/breadcrumbs.js';
+import '../components/toast.js';
+import '../components/description-list.js';
+import '../components/line-items.js';
+import '../components/error-boundary.js';
+import '../components/authed-image.js';
+import '../components/image-grid.js';
+import '../components/lightbox.js';
+import '../components/write-lock.js';
+import '../auth/sign-in-form.js';
+import './access.js';
+import '../shell/topbar-controls.js';
+import '../theme/palette-presets.js';
+import '../theme/chart-palette.js';
+import '../theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
+import '../auth/complete-name-dialog.js';
+import '../auth/forgot-password-form.js';
+import '../auth/status-parts.js';
+import '../auth/reset-password-form.js';
+import '../auth/verify-email.js';
+import '../auth/not-found-page.js';
+import '../auth/accept-invitation.js';
+import '../shell/company-switcher.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
+import '../lib/format.js';
+import '../account/data-export-setting.js';
+import '../components/account-chips.js';
+import '../admin/admin-parts.js';
+import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
+import '../components/reauth-dialog.js';
+import '../components/server-wake.js';
+import '../lib/server-wake.js';
+import '../components/translation-review-labels.js';
+import '../lib/translation-review.js';
+import '../components/country-select.js';
+import '../components/inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import '../components/sign-chip.js';
+import '../components/column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import '../components/field-parts.js';
+
+/**
+ * The sections of the public landing page (docs/landing-demo-harmonization.md §4.1),
+ * top to bottom: `Hero`, `FeatureRows` of `FeatureRow`, `TrustStrip`, `CtaBand`,
+ * `PublicFooter` — keksdose's landing-page.tsx, taken apart.
+ *
+ * The kit draws the frame; every word of marketing copy is the app's. Colours are the
+ * kit's tokens (`--brand`, `--text-*`, `--bg-surface`, `--border`), so keksdose's ten
+ * hard-coded teal sites follow the palette now (§2.11).
+ *
+ * **Visuals are decorative** (§4.1): the `visual` slots are `aria-hidden` and `inert` —
+ * mock UI drawn with kit tokens, never screenshots with real data, and never anything a
+ * keyboard could land on. The copy beside each one carries the information. A mock's
+ * amounts use the demo data's currency, so the landing shows what "Try the demo" opens.
+ */
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/** The action pair's props, as `Hero` and `CtaBand` pass them on. */
+type ActionProps = Pick<LandingActionsProps, "session" | "access" | "demoHref" | "openAppHref">;
+interface HeroProps extends Omit<ComponentPropsWithoutRef<"section">, "title" | "children">, ActionProps {
+    /** The page's `h1`: what the app does, in a line. */
+    title: ReactNode;
+    /** Under it: for whom, and why. */
+    subtitle?: ReactNode;
+    /** The kit's "Beta" chip above the title. */
+    beta?: boolean;
+    /** A badge of the app's own in that place; wins over `beta`. */
+    badge?: ReactNode;
+    /** Under the actions, quiet: "Free while in beta. Your data stays yours." */
+    trust?: ReactNode;
+    /** The product glimpse beside the copy (below it on a phone). Decorative. */
+    visual?: ReactNode;
+    /** Replaces the action pair ({@link LandingActions}). */
+    actions?: ReactNode;
+    /** Default `h1`; lower where the hero is embedded in another page. */
+    headingAs?: HeadingLevel;
+    labels?: Partial<LandingLabels>;
+}
+/**
+ * The top of the landing (§4.1.2): an optional "Beta" badge, the `h1`, a subtitle, the
+ * action pair for the visitor's state ({@link LandingActions}: "Request access" and "Try
+ * the demo", or "Open app" for a session), a trust line, and a visual. Copy left and
+ * visual right from `lg` up, stacked below.
+ */
+declare function Hero({ title, subtitle, beta, badge, trust, visual, actions, headingAs: Heading, session, access, demoHref, openAppHref, labels: labelsProp, className, ...rest }: HeroProps): react.JSX.Element;
+type FeatureRowsProps = ComponentPropsWithoutRef<"section">;
+/**
+ * The band that holds the feature rows (§4.1.3): two to four {@link FeatureRow}s on the
+ * surface colour, between hairlines. The rows alternate sides by themselves — the copy
+ * of every second row moves to the end from `lg` up — so the app lists them in order
+ * and nothing else.
+ */
+declare function FeatureRows({ className, children, ...rest }: FeatureRowsProps): react.JSX.Element;
+interface FeatureRowProps extends Omit<ComponentPropsWithoutRef<"div">, "title" | "children"> {
+    /** A lucide icon (or any SVG) before the eyebrow. Decorative. */
+    icon?: ReactNode;
+    /** The small uppercase line above the heading: "Capture", "Plan". */
+    eyebrow?: ReactNode;
+    /** The row's `h2`. */
+    title: ReactNode;
+    description?: ReactNode;
+    /** Up to three short points; the first three are shown. */
+    bullets?: readonly ReactNode[];
+    /** The mock beside the copy. Decorative. */
+    visual?: ReactNode;
+    /** Default `h2`. */
+    headingAs?: HeadingLevel;
+}
+/**
+ * One job of the app (§4.1.3), keksdose's "capture → budget → understand": an icon
+ * eyebrow, the `h2`, a description, up to three bullets, and a visual on the other side.
+ * Inside {@link FeatureRows} every second row puts its copy at the end (`group-even`),
+ * which is keksdose's alternation without an index to pass.
+ */
+declare function FeatureRow({ icon, eyebrow, title, description, bullets, visual, headingAs: Heading, className, ...rest }: FeatureRowProps): react.JSX.Element;
+interface TrustItem {
+    /** A lucide icon. Decorative. */
+    icon?: ReactNode;
+    /** The item's `h3`: "Hosted in Switzerland". */
+    title: ReactNode;
+    /** One sentence. */
+    description: ReactNode;
+}
+interface TrustStripProps extends Omit<ComponentPropsWithoutRef<"section">, "children"> {
+    /** Three or four (§4.1.4): hosting, security, data ownership, sharing. */
+    items: readonly TrustItem[];
+    /** The items' heading level. Default `h3`. */
+    headingAs?: HeadingLevel;
+}
+/**
+ * Quiet, start-aligned facts after the feature rows (§4.1.4) — an icon, an `h3` and one
+ * sentence each, on one row from `lg` up (three or four columns), two on a tablet, one
+ * on a phone. No marketing volume: keksdose's "trust strip".
+ */
+declare function TrustStrip({ items, headingAs: Heading, className, ...rest }: TrustStripProps): react.JSX.Element;
+interface CtaBandProps extends Omit<ComponentPropsWithoutRef<"section">, "title" | "children">, ActionProps {
+    /** The band's `h2`: the last ask. */
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Replaces the action pair ({@link LandingActions}). */
+    actions?: ReactNode;
+    /** Default `h2`. */
+    headingAs?: HeadingLevel;
+    labels?: Partial<LandingLabels>;
+}
+/**
+ * The closing band before the footer (§4.1.5): a centred `h2`, a subtitle, and the same
+ * action pair as the hero.
+ */
+declare function CtaBand({ title, subtitle, actions, headingAs: Heading, session, access, demoHref, openAppHref, labels, className, ...rest }: CtaBandProps): react.JSX.Element;
+interface PublicFooterProps extends Omit<LegalFooterProps, "children"> {
+    /** The app's line under the legal links: "Self-hosted household budgeting." */
+    tagline?: ReactNode;
+}
+/**
+ * The public pages' footer (§4.1.6): the kit's {@link LegalFooter} — the three legal
+ * links — with the app's tagline under them. keksdose's `SiteFooter`, which was already
+ * this.
+ */
+declare function PublicFooter({ tagline, ...rest }: PublicFooterProps): react.JSX.Element;
+
+export { CtaBand, type CtaBandProps, FeatureRow, type FeatureRowProps, FeatureRows, type FeatureRowsProps, Hero, type HeroProps, PublicFooter, type PublicFooterProps, type TrustItem, TrustStrip, type TrustStripProps };

package/dist/landing/landing-sections.js

@@ -0,0 +1,167 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Chip } from "../components/chip.js";
+import { LegalFooter } from "../components/legal.js";
+import { LandingActions } from "./landing-actions.js";
+import { useLandingLabels } from "./landing-labels.js";
+function Visual({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, inert: true, "data-slot": "landing-visual", className: cn("mx-auto w-full select-none", className), children });
+}
+function Hero({
+  title,
+  subtitle,
+  beta = false,
+  badge,
+  trust,
+  visual,
+  actions,
+  headingAs: Heading = "h1",
+  session,
+  access,
+  demoHref,
+  openAppHref,
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = useLandingLabels(labelsProp);
+  const shownBadge = badge ?? (beta ? (
+    // keksdose's chip, padded out to the hero's scale.
+    /* @__PURE__ */ jsx(Chip, { size: "sm", tone: "warning", className: "px-3 py-1 font-medium", children: labels.beta })
+  ) : null);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...rest,
+      "data-slot": "landing-hero",
+      className: cn(
+        "mx-auto grid max-w-6xl items-center gap-12 px-4 py-16 sm:py-24",
+        visual != null && "lg:grid-cols-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          shownBadge != null && /* @__PURE__ */ jsx("div", { className: "mb-4", children: shownBadge }),
+          /* @__PURE__ */ jsx(Heading, { className: "text-4xl font-bold tracking-tight text-balance text-[var(--text-primary)] sm:text-5xl", children: title }),
+          subtitle != null && /* @__PURE__ */ jsx("p", { className: "mt-4 max-w-xl text-lg text-[var(--text-secondary)]", children: subtitle }),
+          /* @__PURE__ */ jsx("div", { className: "mt-8", children: actions ?? /* @__PURE__ */ jsx(
+            LandingActions,
+            {
+              session,
+              access,
+              demoHref,
+              openAppHref,
+              labels: labelsProp
+            }
+          ) }),
+          trust != null && /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-[var(--text-muted)]", children: trust })
+        ] }),
+        visual != null && /* @__PURE__ */ jsx(Visual, { className: "max-w-sm", children: visual })
+      ]
+    }
+  );
+}
+function FeatureRows({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ...rest,
+      "data-slot": "landing-feature-rows",
+      className: cn("border-t border-[var(--border)] bg-[var(--bg-surface)]", className),
+      children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-6xl px-4 py-8 sm:py-12", children })
+    }
+  );
+}
+function FeatureRow({
+  icon,
+  eyebrow,
+  title,
+  description,
+  bullets,
+  visual,
+  headingAs: Heading = "h2",
+  className,
+  ...rest
+}) {
+  const shown = bullets?.slice(0, 3) ?? [];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      "data-slot": "landing-feature-row",
+      className: cn("group/feature grid items-center gap-8 py-10", visual != null && "lg:grid-cols-2 lg:gap-16", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "lg:group-even/feature:order-last", children: [
+          (icon != null || eyebrow != null) && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[var(--brand)]", children: [
+            icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex shrink-0 [&_svg]:size-4", children: icon }),
+            eyebrow
+          ] }),
+          /* @__PURE__ */ jsx(Heading, { className: "mt-2 text-2xl font-semibold tracking-tight text-balance text-[var(--text-primary)] sm:text-3xl", children: title }),
+          description != null && /* @__PURE__ */ jsx("p", { className: "mt-3 max-w-xl text-[var(--text-secondary)]", children: description }),
+          shown.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-2", children: shown.map((bullet, i) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2.5 text-sm text-[var(--text-secondary)]", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mt-1.5 size-1.5 shrink-0 rounded-full bg-[var(--brand)]" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0", children: bullet })
+          ] }, i)) })
+        ] }),
+        visual != null && /* @__PURE__ */ jsx(Visual, { className: "max-w-md", children: visual })
+      ]
+    }
+  );
+}
+function TrustStrip({ items, headingAs: Heading = "h3", className, ...rest }) {
+  return /* @__PURE__ */ jsx("section", { ...rest, "data-slot": "landing-trust", className: cn("mx-auto max-w-6xl px-4 py-12 sm:py-16", className), children: /* @__PURE__ */ jsx("ul", { className: cn("grid gap-8 sm:grid-cols-2", items.length === 3 ? "lg:grid-cols-3" : "lg:grid-cols-4"), children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { children: [
+    item.icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex text-[var(--brand)] [&_svg]:size-5", children: item.icon }),
+    /* @__PURE__ */ jsx(Heading, { className: "mt-2 text-sm font-semibold text-[var(--text-primary)]", children: item.title }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--text-secondary)]", children: item.description })
+  ] }, i)) }) });
+}
+function CtaBand({
+  title,
+  subtitle,
+  actions,
+  headingAs: Heading = "h2",
+  session,
+  access,
+  demoHref,
+  openAppHref,
+  labels,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ...rest,
+      "data-slot": "landing-cta",
+      className: cn("border-t border-[var(--border)] bg-[var(--bg-surface)]", className),
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-4 py-16 text-center", children: [
+        /* @__PURE__ */ jsx(Heading, { className: "text-2xl font-semibold tracking-tight text-balance text-[var(--text-primary)] sm:text-3xl", children: title }),
+        subtitle != null && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-3 max-w-xl text-[var(--text-secondary)]", children: subtitle }),
+        /* @__PURE__ */ jsx("div", { className: "mt-8", children: actions ?? /* @__PURE__ */ jsx(
+          LandingActions,
+          {
+            session,
+            access,
+            demoHref,
+            openAppHref,
+            align: "center",
+            labels
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function PublicFooter({ tagline, ...rest }) {
+  return /* @__PURE__ */ jsx(LegalFooter, { ...rest, children: tagline });
+}
+export {
+  CtaBand,
+  FeatureRow,
+  FeatureRows,
+  Hero,
+  PublicFooter,
+  TrustStrip
+};
+//# sourceMappingURL=landing-sections.js.map

package/dist/landing/landing-sections.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/landing/landing-sections.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cn } from \"../lib/cn\";\nimport { Chip } from \"../components/chip\";\nimport { LegalFooter } from \"../components/legal\";\nimport type { LegalFooterProps } from \"../components/legal\";\nimport { LandingActions } from \"./landing-actions\";\nimport type { LandingActionsProps } from \"./landing-actions\";\nimport { useLandingLabels } from \"./landing-labels\";\nimport type { LandingLabels } from \"./landing-labels\";\n\n/**\n * The sections of the public landing page (docs/landing-demo-harmonization.md §4.1),\n * top to bottom: `Hero`, `FeatureRows` of `FeatureRow`, `TrustStrip`, `CtaBand`,\n * `PublicFooter` — keksdose's landing-page.tsx, taken apart.\n *\n * The kit draws the frame; every word of marketing copy is the app's. Colours are the\n * kit's tokens (`--brand`, `--text-*`, `--bg-surface`, `--border`), so keksdose's ten\n * hard-coded teal sites follow the palette now (§2.11).\n *\n * **Visuals are decorative** (§4.1): the `visual` slots are `aria-hidden` and `inert` —\n * mock UI drawn with kit tokens, never screenshots with real data, and never anything a\n * keyboard could land on. The copy beside each one carries the information. A mock's\n * amounts use the demo data's currency, so the landing shows what \"Try the demo\" opens.\n */\n\ntype HeadingLevel = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n/** The decorative slot: hidden from assistive tech and out of the tab order. */\nfunction Visual({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div aria-hidden inert data-slot=\"landing-visual\" className={cn(\"mx-auto w-full select-none\", className)}>\n      {children}\n    </div>\n  );\n}\n\n/** The action pair's props, as `Hero` and `CtaBand` pass them on. */\ntype ActionProps = Pick<LandingActionsProps, \"session\" | \"access\" | \"demoHref\" | \"openAppHref\">;\n\n/* ── Hero ────────────────────────────────────────────────────────────────── */\n\nexport interface HeroProps extends Omit<ComponentPropsWithoutRef<\"section\">, \"title\" | \"children\">, ActionProps {\n  /** The page's `h1`: what the app does, in a line. */\n  title: ReactNode;\n  /** Under it: for whom, and why. */\n  subtitle?: ReactNode;\n  /** The kit's \"Beta\" chip above the title. */\n  beta?: boolean;\n  /** A badge of the app's own in that place; wins over `beta`. */\n  badge?: ReactNode;\n  /** Under the actions, quiet: \"Free while in beta. Your data stays yours.\" */\n  trust?: ReactNode;\n  /** The product glimpse beside the copy (below it on a phone). Decorative. */\n  visual?: ReactNode;\n  /** Replaces the action pair ({@link LandingActions}). */\n  actions?: ReactNode;\n  /** Default `h1`; lower where the hero is embedded in another page. */\n  headingAs?: HeadingLevel;\n  labels?: Partial<LandingLabels>;\n}\n\n/**\n * The top of the landing (§4.1.2): an optional \"Beta\" badge, the `h1`, a subtitle, the\n * action pair for the visitor's state ({@link LandingActions}: \"Request access\" and \"Try\n * the demo\", or \"Open app\" for a session), a trust line, and a visual. Copy left and\n * visual right from `lg` up, stacked below.\n */\nexport function Hero({\n  title,\n  subtitle,\n  beta = false,\n  badge,\n  trust,\n  visual,\n  actions,\n  headingAs: Heading = \"h1\",\n  session,\n  access,\n  demoHref,\n  openAppHref,\n  labels: labelsProp,\n  className,\n  ...rest\n}: HeroProps) {\n  const labels = useLandingLabels(labelsProp);\n  const shownBadge =\n    badge ??\n    (beta ? (\n      // keksdose's chip, padded out to the hero's scale.\n      <Chip size=\"sm\" tone=\"warning\" className=\"px-3 py-1 font-medium\">\n        {labels.beta}\n      </Chip>\n    ) : null);\n  return (\n    <section\n      {...rest}\n      data-slot=\"landing-hero\"\n      className={cn(\n        \"mx-auto grid max-w-6xl items-center gap-12 px-4 py-16 sm:py-24\",\n        visual != null && \"lg:grid-cols-2\",\n        className,\n      )}\n    >\n      <div>\n        {shownBadge != null && <div className=\"mb-4\">{shownBadge}</div>}\n        <Heading className=\"text-4xl font-bold tracking-tight text-balance text-[var(--text-primary)] sm:text-5xl\">\n          {title}\n        </Heading>\n        {subtitle != null && <p className=\"mt-4 max-w-xl text-lg text-[var(--text-secondary)]\">{subtitle}</p>}\n        <div className=\"mt-8\">\n          {actions ?? (\n            <LandingActions\n              session={session}\n              access={access}\n              demoHref={demoHref}\n              openAppHref={openAppHref}\n              labels={labelsProp}\n            />\n          )}\n        </div>\n        {trust != null && <p className=\"mt-4 text-sm text-[var(--text-muted)]\">{trust}</p>}\n      </div>\n      {visual != null && <Visual className=\"max-w-sm\">{visual}</Visual>}\n    </section>\n  );\n}\n\n/* ── Feature rows ────────────────────────────────────────────────────────── */\n\nexport type FeatureRowsProps = ComponentPropsWithoutRef<\"section\">;\n\n/**\n * The band that holds the feature rows (§4.1.3): two to four {@link FeatureRow}s on the\n * surface colour, between hairlines. The rows alternate sides by themselves — the copy\n * of every second row moves to the end from `lg` up — so the app lists them in order\n * and nothing else.\n */\nexport function FeatureRows({ className, children, ...rest }: FeatureRowsProps) {\n  return (\n    <section\n      {...rest}\n      data-slot=\"landing-feature-rows\"\n      className={cn(\"border-t border-[var(--border)] bg-[var(--bg-surface)]\", className)}\n    >\n      <div className=\"mx-auto max-w-6xl px-4 py-8 sm:py-12\">{children}</div>\n    </section>\n  );\n}\n\nexport interface FeatureRowProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\" | \"children\"> {\n  /** A lucide icon (or any SVG) before the eyebrow. Decorative. */\n  icon?: ReactNode;\n  /** The small uppercase line above the heading: \"Capture\", \"Plan\". */\n  eyebrow?: ReactNode;\n  /** The row's `h2`. */\n  title: ReactNode;\n  description?: ReactNode;\n  /** Up to three short points; the first three are shown. */\n  bullets?: readonly ReactNode[];\n  /** The mock beside the copy. Decorative. */\n  visual?: ReactNode;\n  /** Default `h2`. */\n  headingAs?: HeadingLevel;\n}\n\n/**\n * One job of the app (§4.1.3), keksdose's \"capture → budget → understand\": an icon\n * eyebrow, the `h2`, a description, up to three bullets, and a visual on the other side.\n * Inside {@link FeatureRows} every second row puts its copy at the end (`group-even`),\n * which is keksdose's alternation without an index to pass.\n */\nexport function FeatureRow({\n  icon,\n  eyebrow,\n  title,\n  description,\n  bullets,\n  visual,\n  headingAs: Heading = \"h2\",\n  className,\n  ...rest\n}: FeatureRowProps) {\n  const shown = bullets?.slice(0, 3) ?? [];\n  return (\n    <div\n      {...rest}\n      data-slot=\"landing-feature-row\"\n      className={cn(\"group/feature grid items-center gap-8 py-10\", visual != null && \"lg:grid-cols-2 lg:gap-16\", className)}\n    >\n      <div className=\"lg:group-even/feature:order-last\">\n        {(icon != null || eyebrow != null) && (\n          <p className=\"flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[var(--brand)]\">\n            {icon != null && (\n              <span aria-hidden className=\"flex shrink-0 [&_svg]:size-4\">\n                {icon}\n              </span>\n            )}\n            {eyebrow}\n          </p>\n        )}\n        <Heading className=\"mt-2 text-2xl font-semibold tracking-tight text-balance text-[var(--text-primary)] sm:text-3xl\">\n          {title}\n        </Heading>\n        {description != null && <p className=\"mt-3 max-w-xl text-[var(--text-secondary)]\">{description}</p>}\n        {shown.length > 0 && (\n          <ul className=\"mt-4 space-y-2\">\n            {shown.map((bullet, i) => (\n              <li key={i} className=\"flex gap-2.5 text-sm text-[var(--text-secondary)]\">\n                <span aria-hidden className=\"mt-1.5 size-1.5 shrink-0 rounded-full bg-[var(--brand)]\" />\n                <span className=\"min-w-0\">{bullet}</span>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n      {visual != null && <Visual className=\"max-w-md\">{visual}</Visual>}\n    </div>\n  );\n}\n\n/* ── Trust strip ─────────────────────────────────────────────────────────── */\n\nexport interface TrustItem {\n  /** A lucide icon. Decorative. */\n  icon?: ReactNode;\n  /** The item's `h3`: \"Hosted in Switzerland\". */\n  title: ReactNode;\n  /** One sentence. */\n  description: ReactNode;\n}\n\nexport interface TrustStripProps extends Omit<ComponentPropsWithoutRef<\"section\">, \"children\"> {\n  /** Three or four (§4.1.4): hosting, security, data ownership, sharing. */\n  items: readonly TrustItem[];\n  /** The items' heading level. Default `h3`. */\n  headingAs?: HeadingLevel;\n}\n\n/**\n * Quiet, start-aligned facts after the feature rows (§4.1.4) — an icon, an `h3` and one\n * sentence each, on one row from `lg` up (three or four columns), two on a tablet, one\n * on a phone. No marketing volume: keksdose's \"trust strip\".\n */\nexport function TrustStrip({ items, headingAs: Heading = \"h3\", className, ...rest }: TrustStripProps) {\n  return (\n    <section {...rest} data-slot=\"landing-trust\" className={cn(\"mx-auto max-w-6xl px-4 py-12 sm:py-16\", className)}>\n      <ul className={cn(\"grid gap-8 sm:grid-cols-2\", items.length === 3 ? \"lg:grid-cols-3\" : \"lg:grid-cols-4\")}>\n        {items.map((item, i) => (\n          <li key={i}>\n            {item.icon != null && (\n              <span aria-hidden className=\"flex text-[var(--brand)] [&_svg]:size-5\">\n                {item.icon}\n              </span>\n            )}\n            <Heading className=\"mt-2 text-sm font-semibold text-[var(--text-primary)]\">{item.title}</Heading>\n            <p className=\"mt-1 text-sm text-[var(--text-secondary)]\">{item.description}</p>\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n}\n\n/* ── CTA band ────────────────────────────────────────────────────────────── */\n\nexport interface CtaBandProps extends Omit<ComponentPropsWithoutRef<\"section\">, \"title\" | \"children\">, ActionProps {\n  /** The band's `h2`: the last ask. */\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /** Replaces the action pair ({@link LandingActions}). */\n  actions?: ReactNode;\n  /** Default `h2`. */\n  headingAs?: HeadingLevel;\n  labels?: Partial<LandingLabels>;\n}\n\n/**\n * The closing band before the footer (§4.1.5): a centred `h2`, a subtitle, and the same\n * action pair as the hero.\n */\nexport function CtaBand({\n  title,\n  subtitle,\n  actions,\n  headingAs: Heading = \"h2\",\n  session,\n  access,\n  demoHref,\n  openAppHref,\n  labels,\n  className,\n  ...rest\n}: CtaBandProps) {\n  return (\n    <section\n      {...rest}\n      data-slot=\"landing-cta\"\n      className={cn(\"border-t border-[var(--border)] bg-[var(--bg-surface)]\", className)}\n    >\n      <div className=\"mx-auto max-w-5xl px-4 py-16 text-center\">\n        <Heading className=\"text-2xl font-semibold tracking-tight text-balance text-[var(--text-primary)] sm:text-3xl\">\n          {title}\n        </Heading>\n        {subtitle != null && <p className=\"mx-auto mt-3 max-w-xl text-[var(--text-secondary)]\">{subtitle}</p>}\n        <div className=\"mt-8\">\n          {actions ?? (\n            <LandingActions\n              session={session}\n              access={access}\n              demoHref={demoHref}\n              openAppHref={openAppHref}\n              align=\"center\"\n              labels={labels}\n            />\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\nexport interface PublicFooterProps extends Omit<LegalFooterProps, \"children\"> {\n  /** The app's line under the legal links: \"Self-hosted household budgeting.\" */\n  tagline?: ReactNode;\n}\n\n/**\n * The public pages' footer (§4.1.6): the kit's {@link LegalFooter} — the three legal\n * links — with the app's tagline under them. keksdose's `SiteFooter`, which was already\n * this.\n */\nexport function PublicFooter({ tagline, ...rest }: PublicFooterProps) {\n  return <LegalFooter {...rest}>{tagline}</LegalFooter>;\n}\n"],"mappings":"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","names":[]}

package/dist/landing/page-seo.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Search-engine helpers for the public landing page (docs/landing-demo-harmonization.md
+ * §4.3): the hook that declares a page's canonical URL, title, description and JSON-LD,
+ * and the two pure helpers each app's SEO test is built from.
+ */
+/**
+ * Declares the current page's canonical URL — and optionally its title and meta
+ * description — while the calling component is mounted (feedback #129).
+ *
+ * Client-side because there is nowhere else to put it: the SPA is served by
+ * Caddy's `try_files … /index.html`, so every route shares one static head.
+ * Googlebot renders JS and reads the canonical from the RENDERED DOM, which is
+ * what makes this work; non-rendering scrapers (WhatsApp, Slack) only ever see
+ * index.html's static tags, which is why those stay in place as the fallback.
+ *
+ * The href is resolved against `window.location.origin` rather than hardcoded, so
+ * a preview deployment or the VPS host stays self-referential instead of pointing
+ * every copy of the app at production.
+ *
+ * The cleanup matters for the same reason as in {@link useNoIndex}: an SPA
+ * navigation from the landing page into the app must not leave the landing's
+ * canonical (or title) behind on an app page.
+ *
+ * 0.31 (§4.3): keksdose's `usePageSeo` (shared/hooks/use-page-seo.ts), verbatim. The
+ * landing calls it with `canonicalPath: "/"` on both `/` and `/welcome`, so the two URLs
+ * of one page are one result; there are no per-language URLs and no hreflang.
+ */
+declare function usePageSeo({ canonicalPath, title, description, jsonLd, }: {
+    canonicalPath: string;
+    title?: string;
+    description?: string;
+    /** Structured data for this page, as the object (not a string). Injected as an
+     *  `application/ld+json` DATA BLOCK — a script element the browser never executes,
+     *  which is also why it can be added here rather than in `index.html`: the CSP
+     *  carries a HASH of the one inline script that file is allowed to have, and
+     *  `csp-inline-script.test.ts` fails the build on a second one (live #250). */
+    jsonLd?: Record<string, unknown>;
+}): void;
+/** What a search result shows of the landing, in one language. */
+interface SeoCopy {
+    /** The page title (`landing.seo.title`): "Keksdose — envelope budgeting". */
+    title: string;
+    /** The meta description. */
+    description: string;
+    /** The product name the title carries, before or after its tagline. */
+    brand: string;
+}
+/** The width budgets, as characters. */
+interface SeoCopyLimits {
+    /** Default 60: a result's title is cut around 580px. */
+    maxTitle?: number;
+    /** Default 155: a snippet is cut around 920px. */
+    maxDescription?: number;
+}
+type SeoCopyProblemCode = "title-empty" | "description-empty" | "title-too-long" | "description-too-long" | "title-without-brand" | "description-repeats-title";
+/** One thing wrong with a language's copy. `message` is for the test's failure output. */
+interface SeoCopyProblem {
+    code: SeoCopyProblemCode;
+    message: string;
+}
+/**
+ * What is wrong with one language's search-result copy (§4.3) — an empty list when
+ * nothing is. keksdose's landing-seo.test.ts (live #305), made reusable:
+ *
+ * - the title fits `maxTitle` characters (60) and the description `maxDescription`
+ *   (155) — conservative stand-ins for Google's pixel budgets; German is the language
+ *   most likely to blow through them, and what gets cut is always the end;
+ * - the title carries the brand, before or after its tagline ("Keksdose — …");
+ * - the description does not open with the title's tagline again — a snippet that
+ *   repeats the line above it spends its first forty characters saying nothing new.
+ *
+ * ```ts
+ * for (const [locale, bundle] of Object.entries(LOCALES)) {
+ *   it(`fits ${locale} into a search result`, () => {
+ *     expect(seoCopyProblems({ ...bundle.landing.seo, brand: "Keksdose" })).toEqual([]);
+ *   });
+ * }
+ * ```
+ */
+declare function seoCopyProblems(copy: SeoCopy, limits?: SeoCopyLimits): SeoCopyProblem[];
+/**
+ * The `content` of the first `<meta>` in `html` that `selector` picks, whitespace
+ * collapsed and entities decoded — or `undefined` when there is none. For each app's
+ * parity test (§4.3): `index.html`'s static description and `og:` tags must equal the
+ * default language's strings, because a scraper that runs no script (WhatsApp, Slack)
+ * sees only those.
+ *
+ * `selector` names attributes, as in CSS — `meta[name="description"]`,
+ * `[property="og:title"]` or just `property="og:description"` — and every one named must
+ * match. A `RegExp` is matched against the tag's source instead (keksdose's form).
+ * String parsing, not a DOM: the test runs under `@vitest-environment node`.
+ *
+ * ```ts
+ * expect(metaContent(html, 'meta[name="description"]')).toBe(de.landing.seo.description);
+ * ```
+ */
+declare function metaContent(html: string, selector: string | RegExp): string | undefined;
+
+export { type SeoCopy, type SeoCopyLimits, type SeoCopyProblem, type SeoCopyProblemCode, metaContent, seoCopyProblems, usePageSeo };

package/dist/landing/page-seo.js

@@ -0,0 +1,121 @@
+"use client";
+import { useEffect } from "react";
+function usePageSeo({
+  canonicalPath,
+  title,
+  description,
+  jsonLd
+}) {
+  useEffect(() => {
+    const link = document.createElement("link");
+    link.rel = "canonical";
+    link.href = new URL(canonicalPath, window.location.origin).toString();
+    document.head.appendChild(link);
+    const previousTitle = document.title;
+    if (title) document.title = title;
+    const meta = description ? document.head.querySelector('meta[name="description"]') : null;
+    const previousDescription = meta?.content;
+    if (meta && description) meta.content = description;
+    let ld = null;
+    if (jsonLd) {
+      ld = document.createElement("script");
+      ld.type = "application/ld+json";
+      ld.textContent = JSON.stringify(jsonLd);
+      document.head.appendChild(ld);
+    }
+    return () => {
+      link.remove();
+      ld?.remove();
+      if (title) document.title = previousTitle;
+      if (meta && previousDescription !== void 0) meta.content = previousDescription;
+    };
+  }, [canonicalPath, title, description]);
+}
+const length = (text) => Array.from(text).length;
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const SEPARATOR = "\\s*[\u2014\u2013\\-|:\xB7\u2022]\\s*";
+function taglineOf(title, brand) {
+  const name = escapeRegExp(brand.trim());
+  const leading = new RegExp(`^${name}${SEPARATOR}`, "i");
+  if (leading.test(title)) return title.replace(leading, "").trim();
+  const trailing = new RegExp(`${SEPARATOR}${name}$`, "i");
+  if (trailing.test(title)) return title.replace(trailing, "").trim();
+  return null;
+}
+function seoCopyProblems(copy, limits = {}) {
+  const { maxTitle = 60, maxDescription = 155 } = limits;
+  const title = copy.title.replace(/\s+/g, " ").trim();
+  const description = copy.description.replace(/\s+/g, " ").trim();
+  const problems = [];
+  if (!title) problems.push({ code: "title-empty", message: "the title is empty" });
+  if (!description) problems.push({ code: "description-empty", message: "the description is empty" });
+  if (length(title) > maxTitle) {
+    problems.push({
+      code: "title-too-long",
+      message: `the title is ${length(title)} characters, over ${maxTitle}: "${title}"`
+    });
+  }
+  if (length(description) > maxDescription) {
+    problems.push({
+      code: "description-too-long",
+      message: `the description is ${length(description)} characters, over ${maxDescription}: "${description}"`
+    });
+  }
+  if (!title) return problems;
+  const tagline = taglineOf(title, copy.brand);
+  if (tagline === null) {
+    problems.push({
+      code: "title-without-brand",
+      message: `the title does not start or end with "${copy.brand}" and a separator: "${title}"`
+    });
+  }
+  const repeated = (tagline ?? title).toLowerCase();
+  if (repeated && description.toLowerCase().startsWith(repeated)) {
+    problems.push({
+      code: "description-repeats-title",
+      message: `the description opens with the title's tagline "${tagline ?? title}"`
+    });
+  }
+  return problems;
+}
+function decodeEntities(text) {
+  const named = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: "\xA0" };
+  return text.replace(/&(#x[\da-f]+|#\d+|[a-z]+);/gi, (whole, ref) => {
+    if (ref[0] === "#") {
+      const code = ref[1] === "x" || ref[1] === "X" ? parseInt(ref.slice(2), 16) : parseInt(ref.slice(1), 10);
+      return Number.isFinite(code) ? String.fromCodePoint(code) : whole;
+    }
+    return named[ref.toLowerCase()] ?? whole;
+  });
+}
+function attributesOf(tag) {
+  const found = /* @__PURE__ */ new Map();
+  for (const m of tag.matchAll(/([^\s=/<>"']+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+))/g)) {
+    found.set(m[1].toLowerCase(), m[2] ?? m[3] ?? m[4] ?? "");
+  }
+  return found;
+}
+function metaContent(html, selector) {
+  const wanted = typeof selector === "string" ? Array.from(selector.matchAll(/([\w:.-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g), (m) => [
+    m[1].toLowerCase(),
+    m[2] ?? m[3] ?? ""
+  ]) : null;
+  if (wanted !== null && wanted.length === 0) {
+    throw new Error(`metaContent: the selector names no attribute: ${selector}`);
+  }
+  const pattern = selector instanceof RegExp ? new RegExp(selector.source, selector.flags.replace("g", "")) : null;
+  for (const tag of html.match(/<meta\b[^>]*>/gi) ?? []) {
+    const attrs = attributesOf(tag);
+    const matches = pattern ? pattern.test(tag) : wanted.every(([name, value]) => attrs.get(name) === value);
+    if (!matches) continue;
+    const content = attrs.get("content");
+    return content === void 0 ? void 0 : decodeEntities(content).replace(/\s+/g, " ").trim();
+  }
+  return void 0;
+}
+export {
+  metaContent,
+  seoCopyProblems,
+  usePageSeo
+};
+//# sourceMappingURL=page-seo.js.map