@volksverpetzer/ui-web 0.11.0 → 0.12.0

package/dist/ToolPage.css

@@ -19,6 +19,25 @@
   -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
 }
 
+/*
+ * Unlike __background, this sits in normal document flow (not absolutely
+ * positioned, full opacity) — a real banner image pushes the rest of the
+ * page down instead of sitting faintly behind it.
+ */
+.vvp-ui-tool-page__header-image {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+}
+
+.vvp-ui-tool-page__header-image img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
 .vvp-ui-tool-page__background svg {
   width: 100%;
   height: 100%;
@@ -60,6 +79,18 @@
   gap: var(--vvp-spacing-xl, 20px);
 }
 
+/*
+ * Below ~640px the centered title runs the full viewport width and can
+ * reach right up under the fixed topbar (its ~16px offset + button height
+ * already eats into the default 40px top padding on its own). Push content
+ * down far enough to clear it instead of just the topbar's top offset.
+ */
+@media (max-width: 640px) {
+  .vvp-ui-tool-page__inner {
+    padding-top: calc(var(--vvp-spacing-huge, 40px) * 2);
+  }
+}
+
 /* Matches ai.volksverpetzer.de's pre-results state: the header/content/
    tags/help block sits in the vertical middle of the viewport rather than
    pinned to the top. */

package/dist/ToolPage.d.ts

@@ -18,6 +18,14 @@ export interface ToolPageProps extends Omit<HTMLAttributes<HTMLDivElement>, "tit
     githubUrl?: string;
     /** @default true */
     background?: boolean;
+    /**
+     * Full-width header image (e.g. a campaign banner), rendered above the
+     * title/content in normal document flow instead of the decorative
+     * jagged background shape — pass whatever `<img>`/`<Image>` element
+     * fits the consuming framework. Takes precedence over `background`
+     * when set (mutually exclusive, not layered).
+     */
+    headerImage?: ReactNode;
     /**
      * Vertically centers the icon/title/tags/content/helpText block in the
      * middle of the viewport — the pre-results look on ai.volksverpetzer.de.
@@ -34,6 +42,8 @@ export interface ToolPageProps extends Omit<HTMLAttributes<HTMLDivElement>, "tit
  * and this app's audio converter list. Centered icon/title/tags header,
  * full-width content slot, optional help text below it, a fixed top-right
  * corner with `ThemeToggle` and an optional GitHub link, and (by default)
- * a decorative jagged brand-blue shape along the top edge.
+ * a decorative jagged brand-blue shape along the top edge — or a full-width
+ * `headerImage` in its place for pages with a real banner (e.g. a campaign
+ * photo) instead of the abstract shape.
  */
-export declare function ToolPage({ icon, title, tags, children, helpText, githubUrl, background, centered, className, ...rest }: ToolPageProps): import("react").JSX.Element;
+export declare function ToolPage({ icon, title, tags, children, helpText, githubUrl, background, headerImage, centered, className, ...rest }: ToolPageProps): import("react").JSX.Element;

package/dist/ToolPage.js

@@ -9,9 +9,11 @@ const GithubIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", wid
  * and this app's audio converter list. Centered icon/title/tags header,
  * full-width content slot, optional help text below it, a fixed top-right
  * corner with `ThemeToggle` and an optional GitHub link, and (by default)
- * a decorative jagged brand-blue shape along the top edge.
+ * a decorative jagged brand-blue shape along the top edge — or a full-width
+ * `headerImage` in its place for pages with a real banner (e.g. a campaign
+ * photo) instead of the abstract shape.
  */
-export function ToolPage({ icon, title, tags, children, helpText, githubUrl, background = true, centered = false, className, ...rest }) {
+export function ToolPage({ icon, title, tags, children, helpText, githubUrl, background = true, headerImage, centered = false, className, ...rest }) {
     const classes = ["vvp-ui-tool-page", className].filter(Boolean).join(" ");
     const innerClasses = [
         "vvp-ui-tool-page__inner",
@@ -19,5 +21,5 @@ export function ToolPage({ icon, title, tags, children, helpText, githubUrl, bac
     ]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("div", { className: classes, ...rest, children: [background ? (_jsx("div", { className: "vvp-ui-tool-page__background", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 1440 320", preserveAspectRatio: "none", fill: "var(--vvp-primary, #1b7194)", children: _jsx("path", { d: "M0,0 L0,140 L75,70 L155,160 L235,50 L310,170 L390,80 L465,175 L545,60 L620,150 L700,40 L775,165 L855,75 L935,175 L1010,55 L1090,145 L1165,65 L1245,165 L1320,85 L1440,130 L1440,0 Z" }) }) })) : null, _jsxs("div", { className: "vvp-ui-tool-page__topbar", children: [githubUrl ? (_jsx("a", { href: githubUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": "GitHub", className: "vvp-ui-btn vvp-ui-btn--ghost vvp-ui-btn--sm vvp-ui-tool-page__icon-link", children: _jsx(GithubIcon, {}) })) : null, _jsx(ThemeToggle, {})] }), _jsxs("div", { className: innerClasses, children: [_jsxs("div", { className: "vvp-ui-tool-page__header", children: [_jsxs("h1", { className: "vvp-ui-tool-page__title", children: [icon ? (_jsx("span", { className: "vvp-ui-tool-page__icon", "aria-hidden": "true", children: icon })) : null, title] }), tags && tags.length > 0 ? (_jsx("div", { className: "vvp-ui-tool-page__tags", children: tags.map((tag, index) => (_jsx(Badge, { variant: tag.variant ?? "neutral", size: "sm", children: tag.label }, index))) })) : null] }), _jsx("div", { className: "vvp-ui-tool-page__content", children: children }), helpText ? _jsx("p", { className: "vvp-ui-tool-page__help", children: helpText }) : null] })] }));
+    return (_jsxs("div", { className: classes, ...rest, children: [headerImage ? (_jsx("div", { className: "vvp-ui-tool-page__header-image", children: headerImage })) : background ? (_jsx("div", { className: "vvp-ui-tool-page__background", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 1440 320", preserveAspectRatio: "none", fill: "var(--vvp-primary, #1b7194)", children: _jsx("path", { d: "M0,0 L0,140 L75,70 L155,160 L235,50 L310,170 L390,80 L465,175 L545,60 L620,150 L700,40 L775,165 L855,75 L935,175 L1010,55 L1090,145 L1165,65 L1245,165 L1320,85 L1440,130 L1440,0 Z" }) }) })) : null, _jsxs("div", { className: "vvp-ui-tool-page__topbar", children: [githubUrl ? (_jsx("a", { href: githubUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": "GitHub", className: "vvp-ui-btn vvp-ui-btn--ghost vvp-ui-btn--sm vvp-ui-tool-page__icon-link", children: _jsx(GithubIcon, {}) })) : null, _jsx(ThemeToggle, {})] }), _jsxs("div", { className: innerClasses, children: [_jsxs("div", { className: "vvp-ui-tool-page__header", children: [_jsxs("h1", { className: "vvp-ui-tool-page__title", children: [icon ? (_jsx("span", { className: "vvp-ui-tool-page__icon", "aria-hidden": "true", children: icon })) : null, title] }), tags && tags.length > 0 ? (_jsx("div", { className: "vvp-ui-tool-page__tags", children: tags.map((tag, index) => (_jsx(Badge, { variant: tag.variant ?? "neutral", size: "sm", children: tag.label }, index))) })) : null] }), _jsx("div", { className: "vvp-ui-tool-page__content", children: children }), helpText ? _jsx("p", { className: "vvp-ui-tool-page__help", children: helpText }) : null] })] }));
 }

package/dist/styles.css

@@ -453,6 +453,25 @@
   -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
 }
 
+/*
+ * Unlike __background, this sits in normal document flow (not absolutely
+ * positioned, full opacity) — a real banner image pushes the rest of the
+ * page down instead of sitting faintly behind it.
+ */
+.vvp-ui-tool-page__header-image {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+}
+
+.vvp-ui-tool-page__header-image img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
 .vvp-ui-tool-page__background svg {
   width: 100%;
   height: 100%;
@@ -494,6 +513,18 @@
   gap: var(--vvp-spacing-xl, 20px);
 }
 
+/*
+ * Below ~640px the centered title runs the full viewport width and can
+ * reach right up under the fixed topbar (its ~16px offset + button height
+ * already eats into the default 40px top padding on its own). Push content
+ * down far enough to clear it instead of just the topbar's top offset.
+ */
+@media (max-width: 640px) {
+  .vvp-ui-tool-page__inner {
+    padding-top: calc(var(--vvp-spacing-huge, 40px) * 2);
+  }
+}
+
 /* Matches ai.volksverpetzer.de's pre-results state: the header/content/
    tags/help block sits in the vertical middle of the viewport rather than
    pinned to the top. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volksverpetzer/ui-web",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Shared brand-visible React components (Button, Badge, Card, ProgressBar, Input, Alert, Slider, ThemeToggle, InputButton) for vvp_link_shortener, vvp_divi5_extensions, crowdfunding, and vectorcrawl. Plain, hand-scoped CSS (vvp-ui-* class prefix) consuming the --vvp-* custom properties emitted by @volksverpetzer/design-tokens — no Tailwind classes, so it drops into a Tailwind app and Divi's WordPress-embedded CSS alike.",
   "type": "module",
   "license": "MIT",