nexus-public 1.0.12 → 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bijay Adhikari
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+# nexus-public
+
+The public side of a Next.js app: the header with its menu, the footer, and the bands a page is built from — a hero,
+sections, feature cards, and cards for the things a site lists. Built on
+[`nexus-shared`](https://www.npmjs.com/package/nexus-shared), so it carries the same tokens and all seven themes in
+light and dark.
+
+```bash
+npm install nexus-public
+```
+
+## The shell
+
+```tsx
+// app/(site)/layout.tsx  — a server component
+import { SiteLayout } from "nexus-public";
+import type { SiteMenuItem } from "nexus-public";
+import { ThemeSwitcher } from "nexus-shared/client";
+
+const MENU: SiteMenuItem[] = [
+  { label: "Home", href: "/" },
+  {
+    label: "Rooms",
+    children: [
+      { label: "All rooms", href: "/rooms", icon: "bed", description: "Every room and suite." },
+      { label: "Suites", href: "/rooms#suites", icon: "star" },
+    ],
+  },
+  { label: "Contact", href: "/contact" },
+];
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <SiteLayout
+      brand={{ name: "Nexus Reservations", tagline: "Stay well" }}
+      menu={MENU}
+      footer={{ brand: BRAND, description: "…", columns: FOOTER_COLUMNS }}
+      actions={<ThemeSwitcher />}
+    >
+      {children}
+    </SiteLayout>
+  );
+}
+```
+
+- Only the page in view is marked, so the site's home does not stay marked on every page under it.
+- A menu entry with `children` opens a panel under it; the panel holds real links, so the first click navigates.
+- Under 860px the menu moves into a sheet behind the ☰ button, and a navigation closes it.
+
+## A page
+
+```tsx
+import { FeatureCard, Hero, ShowcaseCard, SiteSection } from "nexus-public";
+
+export default function Home() {
+  return (
+    <>
+      <Hero eyebrow="Nexus Reservations" title="A room in Pokhara" lead="…" actions={<Link className="nx-btn nx-btn--primary nx-btn--lg" href="/rooms">See the rooms</Link>} aside={<StaySearch />} />
+      <SiteSection title="What every stay includes" lead="…">
+        <FeatureCard icon="wifi" title="Wi-Fi that works">Fibre in every room.</FeatureCard>
+      </SiteSection>
+      <SiteSection title="Rooms" action={<Link href="/rooms">All rooms</Link>}>
+        <ShowcaseCard title="Garden double" subtitle="Over the garden" meta="2 guests · 26 m²" price="NPR 5,400" note="4.6 ★" href="/rooms" />
+      </SiteSection>
+    </>
+  );
+}
+```
+
+| Export | What |
+|---|---|
+| `SiteLayout` | The page: header, the page itself, footer, filling the window |
+| `SiteHeader` | The bar alone, for an app that arranges the rest itself (client) |
+| `SiteFooter`, `SiteBrandMark` | The foot of the page, and the name and mark that link home |
+| `Hero` | The first band: what the site is, and the one thing to do next. `aside` puts a card or a form beside it |
+| `SiteSection` | A band with a heading and a line under it. `tone="band"` sets it apart from the ones around it |
+| `FeatureCard` | An icon, a title, and a line or two |
+| `ShowcaseCard` | A record on a page: a room, a place, an article, with a picture, facts, and a price |
+| `currentHref`, `isCurrentLink`, `isCurrentParent`, `toHref` | What the menu uses to work out where the visitor is |
+
+The button classes from `nexus-shared` work on a link, so a call to action can navigate:
+`<Link className="nx-btn nx-btn--primary nx-btn--lg" href="…">`.
+
+## Styles
+
+```ts
+import "nexus-shared/styles.css";
+import "nexus-public/styles.css";
+```
+
+Everything sits in the `nexus.components` cascade layer that `nexus-shared` declares, so styles an app writes outside
+a layer win without `!important`.
+
+## Entry points
+
+| Import | What |
+|---|---|
+| `nexus-public` | Everything that runs anywhere: the layout, the bands, the helpers, the types |
+| `nexus-public/client` | `SiteHeader`, the one part that keeps state |
+| `nexus-public/server` | Server-only code |
+| `nexus-public/styles.css` | The stylesheet |
+
+## Peer dependencies
+
+`next` >= 16, `react` >= 19, `react-dom` >= 19.
+
+## License
+
+MIT. See [LICENSE](LICENSE).

package/dist/Client.Index.d.ts

@@ -0,0 +1 @@
+export * from "./Components/Layouts/SiteHeader.tsx";

package/dist/Client.Index.js

@@ -0,0 +1,3 @@
+// Client components: files here start with "use client".
+// Import from "nexus-public/client".
+export * from "./Components/Layouts/SiteHeader.js";

package/dist/Components/Layouts/SiteBrandMark.d.ts

@@ -0,0 +1,12 @@
+import type { SiteBrand } from "../../Interfaces/SiteInterfaces.ts";
+export interface SiteBrandMarkProps {
+    brand: SiteBrand;
+    /** Default `md`. `sm` is the footer's size. */
+    size?: "sm" | "md";
+    className?: string;
+}
+/**
+ * The name and mark that link home, in the header and again in the footer. The first word is bold and the rest light,
+ * so "Nexus Reservations" reads as one name with an accent on the first word.
+ */
+export declare function SiteBrandMark({ brand, size, className }: SiteBrandMarkProps): import("react").JSX.Element;

package/dist/Components/Layouts/SiteBrandMark.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "nexus-icons";
+import Link from "next/link";
+import { toHref } from "../../Helpers/SiteHelpers.js";
+/**
+ * The name and mark that link home, in the header and again in the footer. The first word is bold and the rest light,
+ * so "Nexus Reservations" reads as one name with an accent on the first word.
+ */
+export function SiteBrandMark({ brand, size = "md", className }) {
+    const [first, ...rest] = brand.name.split(" ");
+    const classes = ["nx-brand", size === "sm" && "nx-brand--sm", className].filter(Boolean).join(" ");
+    return (_jsxs(Link, { href: toHref(brand.href ?? "/"), className: classes, "aria-label": `${brand.name} home`, children: [brand.logo ?? (_jsx("span", { className: "nx-brand__mark", "aria-hidden": "true", children: _jsx(Icon, { name: brand.icon ?? "hexagon-letter-n", size: size === "sm" ? 18 : 22, stroke: 1.75 }) })), _jsxs("span", { className: "nx-brand__text", children: [_jsxs("span", { className: "nx-brand__name", children: [_jsx("b", { children: first }), rest.length > 0 && _jsx("span", { className: "nx-brand__rest", children: ` ${rest.join(" ")}` })] }), brand.tagline && _jsx("small", { className: "nx-brand__tagline", children: brand.tagline })] })] }));
+}

package/dist/Components/Layouts/SiteFooter.d.ts

@@ -0,0 +1,3 @@
+import type { SiteFooterProps } from "../../Interfaces/SiteInterfaces.ts";
+/** The foot of every public page: the brand with a line about it, columns of links, and a bottom bar. */
+export declare function SiteFooter({ brand, description, columns, copyright, bottom, className }: SiteFooterProps): import("react").JSX.Element;

package/dist/Components/Layouts/SiteFooter.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "nexus-shared";
+import Link from "next/link";
+import { externalLinkProps, toHref } from "../../Helpers/SiteHelpers.js";
+import { SiteBrandMark } from "./SiteBrandMark.js";
+/** The foot of every public page: the brand with a line about it, columns of links, and a bottom bar. */
+export function SiteFooter({ brand, description, columns = [], copyright, bottom, className }) {
+    return (_jsxs("footer", { className: cx("nx-sitefoot", className), children: [_jsxs("div", { className: "nx-sitefoot__top", children: [_jsxs("div", { className: "nx-sitefoot__about", children: [_jsx(SiteBrandMark, { brand: brand, size: "sm" }), description && _jsx("p", { className: "nx-sitefoot__lead", children: description })] }), columns.map(column => (_jsxs("nav", { className: "nx-sitefoot__column", "aria-label": column.title, children: [_jsx("h2", { className: "nx-sitefoot__title", children: column.title }), column.links.map(link => (_jsx(Link, { href: toHref(link.href ?? "/"), ...(link.external ? externalLinkProps : {}), children: link.label }, link.label)))] }, column.title)))] }), _jsxs("div", { className: "nx-sitefoot__bottom", children: [_jsx("span", { children: copyright ?? `© ${new Date().getFullYear()} ${brand.name}` }), bottom && _jsx("span", { className: "nx-sitefoot__note", children: bottom })] })] }));
+}

package/dist/Components/Layouts/SiteHeader.d.ts

@@ -0,0 +1,9 @@
+import type { SiteHeaderProps } from "../../Interfaces/SiteInterfaces.ts";
+/**
+ * The bar at the top of a public site: the brand, the menu, and the app's own actions on the right. A menu item with
+ * `children` opens a panel under it; on a phone the whole menu moves into a sheet behind the ☰ button.
+ *
+ * The panels are plain elements, not popovers: a site menu holds links, and a link must navigate on the first click,
+ * which a light-dismissed popover can swallow.
+ */
+export declare function SiteHeader({ brand, menu, actions, sticky, className }: SiteHeaderProps): import("react").JSX.Element;

package/dist/Components/Layouts/SiteHeader.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon, iconChevronDown, iconMenu2, iconX, InlineIcon } from "nexus-icons";
+import { cx } from "nexus-shared";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { currentHref, externalLinkProps, isCurrentLink, isCurrentParent, toHref } from "../../Helpers/SiteHelpers.js";
+import { SiteBrandMark } from "./SiteBrandMark.js";
+/**
+ * The bar at the top of a public site: the brand, the menu, and the app's own actions on the right. A menu item with
+ * `children` opens a panel under it; on a phone the whole menu moves into a sheet behind the ☰ button.
+ *
+ * The panels are plain elements, not popovers: a site menu holds links, and a link must navigate on the first click,
+ * which a light-dismissed popover can swallow.
+ */
+export function SiteHeader({ brand, menu = [], actions, sticky = true, className }) {
+    const pathname = usePathname();
+    const [panel, setPanel] = useState(null);
+    const [sheet, setSheet] = useState(false);
+    const navRef = useRef(null);
+    // The one entry the page belongs to: the longest path it is on or under.
+    const current = currentHref(menu, pathname);
+    // A navigation closes what the header had open, since the page under it changed.
+    useEffect(() => {
+        setPanel(null);
+        setSheet(false);
+    }, [pathname]);
+    // A press outside the menu, or Escape, closes an open panel.
+    useEffect(() => {
+        if (!panel)
+            return;
+        const close = (event) => {
+            if (!navRef.current?.contains(event.target))
+                setPanel(null);
+        };
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                setPanel(null);
+        };
+        document.addEventListener("pointerdown", close);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("pointerdown", close);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [panel]);
+    function itemLink(item, className) {
+        const marked = isCurrentLink(item.href, current);
+        return (_jsxs(Link, { href: toHref(item.href ?? "/"), className: cx(className, marked && "is-current"), "aria-current": marked ? "page" : undefined, ...(item.external ? externalLinkProps : {}), children: [item.icon && _jsx(Icon, { name: item.icon, size: 18 }), _jsx("span", { children: item.label })] }, item.label));
+    }
+    return (_jsxs("header", { className: cx("nx-site__header", sticky && "nx-site__header--sticky", className), children: [_jsxs("div", { className: "nx-site__bar", children: [_jsx(SiteBrandMark, { brand: brand }), _jsx("div", { className: "nx-sitenav", ref: navRef, children: _jsx("nav", { "aria-label": "Main", children: _jsx("ul", { className: "nx-sitenav__list", children: menu.map(item => (_jsx("li", { className: "nx-sitenav__item", children: item.children?.length ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: cx("nx-sitenav__link", isCurrentParent(item, current) && "is-current"), "aria-expanded": panel === item.label, onClick: () => setPanel(open => (open === item.label ? null : item.label)), children: [_jsx("span", { children: item.label }), _jsx(InlineIcon, { icon: iconChevronDown, className: "nx-sitenav__caret" })] }), panel === item.label && (_jsx("div", { className: "nx-sitenav__panel", children: item.children.map(child => (_jsxs(Link, { href: toHref(child.href ?? "/"), className: cx("nx-sitenav__child", isCurrentLink(child.href, current) && "is-current"), ...(child.external ? externalLinkProps : {}), children: [child.icon && _jsx(Icon, { name: child.icon, size: 20 }), _jsxs("span", { className: "nx-sitenav__child-text", children: [_jsx("span", { className: "nx-sitenav__child-label", children: child.label }), child.description && _jsx("small", { children: child.description })] })] }, child.label))) }))] })) : (itemLink(item, "nx-sitenav__link")) }, item.label))) }) }) }), _jsxs("div", { className: "nx-site__actions", children: [actions, menu.length > 0 && (_jsx("button", { type: "button", className: "nx-site__burger", "aria-label": sheet ? "Close the menu" : "Open the menu", "aria-expanded": sheet, "aria-controls": "nx-site-sheet", onClick: () => setSheet(open => !open), children: _jsx(InlineIcon, { icon: sheet ? iconX : iconMenu2, size: 20 }) }))] })] }), sheet && (_jsx("div", { className: "nx-site__sheet", id: "nx-site-sheet", children: _jsx("nav", { "aria-label": "Main, phone", children: menu.map(item => (_jsxs("div", { className: "nx-site__sheet-group", children: [item.href ? itemLink(item, "nx-site__sheet-link") : _jsx("p", { className: "nx-site__sheet-title", children: item.label }), item.children?.map(child => itemLink(child, "nx-site__sheet-link nx-site__sheet-link--child"))] }, item.label))) }) }))] }));
+}

package/dist/Components/Layouts/SiteLayout.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import type { SiteFooterProps, SiteHeaderProps } from "../../Interfaces/SiteInterfaces.ts";
+export interface SiteLayoutProps extends SiteHeaderProps {
+    /** The footer's own content. Left out, it is the brand and the year; `false` leaves the footer off. */
+    footer?: SiteFooterProps | false;
+    children: ReactNode;
+}
+/**
+ * A public site's page: the header, the page itself, and the footer, in a column that fills the window even when
+ * the page is short. Give it to a Next.js layout, and every page under that layout gets the shell.
+ *
+ * @example
+ * export default function Layout({ children }) {
+ *   return <SiteLayout brand={BRAND} menu={MENU} footer={FOOTER} actions={<ThemeSwitcher />}>{children}</SiteLayout>;
+ * }
+ */
+export declare function SiteLayout({ children, footer, ...header }: SiteLayoutProps): import("react").JSX.Element;

package/dist/Components/Layouts/SiteLayout.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SiteFooter } from "./SiteFooter.js";
+import { SiteHeader } from "./SiteHeader.js";
+/**
+ * A public site's page: the header, the page itself, and the footer, in a column that fills the window even when
+ * the page is short. Give it to a Next.js layout, and every page under that layout gets the shell.
+ *
+ * @example
+ * export default function Layout({ children }) {
+ *   return <SiteLayout brand={BRAND} menu={MENU} footer={FOOTER} actions={<ThemeSwitcher />}>{children}</SiteLayout>;
+ * }
+ */
+export function SiteLayout({ children, footer, ...header }) {
+    return (_jsxs("div", { className: "nx-site", children: [_jsx(SiteHeader, { ...header }), _jsx("main", { className: "nx-site__main", id: "nx-site-main", children: children }), footer !== false && _jsx(SiteFooter, { ...(footer ?? { brand: header.brand }) })] }));
+}

package/dist/Components/Sections/FeatureCard.d.ts

@@ -0,0 +1,12 @@
+import { type IconName } from "nexus-icons";
+import type { ReactNode } from "react";
+export interface FeatureCardProps {
+    icon?: IconName;
+    title: ReactNode;
+    children?: ReactNode;
+    /** Turns the whole card into a link. */
+    href?: string;
+    className?: string;
+}
+/** One of the cards that say what a site offers: an icon, a title, and a line or two. */
+export declare function FeatureCard({ icon, title, children, href, className }: FeatureCardProps): import("react").JSX.Element;

package/dist/Components/Sections/FeatureCard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "nexus-icons";
+import { cx } from "nexus-shared";
+import Link from "next/link";
+import { toHref } from "../../Helpers/SiteHelpers.js";
+/** One of the cards that say what a site offers: an icon, a title, and a line or two. */
+export function FeatureCard({ icon, title, children, href, className }) {
+    const body = (_jsxs(_Fragment, { children: [icon && (_jsx("span", { className: "nx-feature__icon", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: 22, stroke: 1.75 }) })), _jsx("h3", { className: "nx-feature__title", children: title }), children && _jsx("div", { className: "nx-feature__text", children: children })] }));
+    return href ? (_jsx(Link, { href: toHref(href), className: cx("nx-feature", "nx-feature--link", className), children: body })) : (_jsx("article", { className: cx("nx-feature", className), children: body }));
+}

package/dist/Components/Sections/Hero.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface HeroProps {
+    /** A small line over the title, e.g. "Nexus Reservations". */
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    lead?: ReactNode;
+    /** Buttons or links under the lead. */
+    actions?: ReactNode;
+    /** A search bar, a form, or a card beside the text. Without it the hero is one centered column. */
+    aside?: ReactNode;
+    /** Small facts under the text, e.g. "120 places · 12 cities". */
+    meta?: ReactNode;
+    className?: string;
+}
+/** The first band of a public home page: what the site is, and the one thing to do next. */
+export declare function Hero({ eyebrow, title, lead, actions, aside, meta, className }: HeroProps): import("react").JSX.Element;

package/dist/Components/Sections/Hero.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "nexus-shared";
+/** The first band of a public home page: what the site is, and the one thing to do next. */
+export function Hero({ eyebrow, title, lead, actions, aside, meta, className }) {
+    return (_jsxs("section", { className: cx("nx-hero", aside ? "nx-hero--split" : "nx-hero--center", className), children: [_jsxs("div", { className: "nx-hero__text", children: [eyebrow && _jsx("p", { className: "nx-hero__eyebrow", children: eyebrow }), _jsx("h1", { className: "nx-hero__title", children: title }), lead && _jsx("p", { className: "nx-hero__lead", children: lead }), actions && _jsx("div", { className: "nx-hero__actions", children: actions }), meta && _jsx("div", { className: "nx-hero__meta", children: meta })] }), aside && _jsx("div", { className: "nx-hero__aside", children: aside })] }));
+}

package/dist/Components/Sections/ShowcaseCard.d.ts

@@ -0,0 +1,25 @@
+import { type IconName } from "nexus-icons";
+import type { ReactNode } from "react";
+export interface ShowcaseCardProps {
+    title: ReactNode;
+    /** Where it is, what it is: one muted line under the title. */
+    subtitle?: ReactNode;
+    /** The picture. Without one the card draws a tinted panel with `icon` in it. */
+    image?: ReactNode;
+    icon?: IconName;
+    /** A word over the picture, e.g. "Popular". */
+    badge?: ReactNode;
+    /** Short facts under the title: "2 guests · 28 m² · Breakfast". */
+    meta?: ReactNode;
+    /** The right of the bottom line, e.g. a price. */
+    price?: ReactNode;
+    /** The left of the bottom line, e.g. a rating. */
+    note?: ReactNode;
+    href?: string;
+    className?: string;
+}
+/**
+ * A record on a public page: a room, a place, an article. The picture is the app's, so the card takes a node and
+ * never loads anything itself; without one it draws a tinted panel with an icon, which is what the demos use.
+ */
+export declare function ShowcaseCard({ title, subtitle, image, icon, badge, meta, price, note, href, className }: ShowcaseCardProps): import("react").JSX.Element;

package/dist/Components/Sections/ShowcaseCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon } from "nexus-icons";
+import { cx } from "nexus-shared";
+import Link from "next/link";
+import { toHref } from "../../Helpers/SiteHelpers.js";
+/**
+ * A record on a public page: a room, a place, an article. The picture is the app's, so the card takes a node and
+ * never loads anything itself; without one it draws a tinted panel with an icon, which is what the demos use.
+ */
+export function ShowcaseCard({ title, subtitle, image, icon = "photo", badge, meta, price, note, href, className }) {
+    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "nx-showcase__media", children: [image ?? (_jsx("span", { className: "nx-showcase__placeholder", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: 28, stroke: 1.5 }) })), badge && _jsx("span", { className: "nx-showcase__badge", children: badge })] }), _jsxs("div", { className: "nx-showcase__body", children: [_jsx("h3", { className: "nx-showcase__title", children: title }), subtitle && _jsx("p", { className: "nx-showcase__subtitle", children: subtitle }), meta && _jsx("p", { className: "nx-showcase__meta", children: meta }), (note || price) && (_jsxs("p", { className: "nx-showcase__line", children: [_jsx("span", { className: "nx-showcase__note", children: note }), price && _jsx("span", { className: "nx-showcase__price", children: price })] }))] })] }));
+    return href ? (_jsx(Link, { href: toHref(href), className: cx("nx-showcase", "nx-showcase--link", className), children: body })) : (_jsx("article", { className: cx("nx-showcase", className), children: body }));
+}

package/dist/Components/Sections/SiteSection.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export interface SiteSectionProps {
+    /** Used by the heading's id, so the section can be linked to and named for screen readers. */
+    id?: string;
+    title?: ReactNode;
+    /** A line under the title. */
+    lead?: ReactNode;
+    /** A link or button on the right of the heading, e.g. "See all rooms". */
+    action?: ReactNode;
+    /** `band` draws the section on the page background, to set it apart from the ones around it. */
+    tone?: "plain" | "band";
+    children: ReactNode;
+    className?: string;
+}
+/** A band of a public page: a heading, a line under it, and the content. */
+export declare function SiteSection({ id, title, lead, action, tone, children, className }: SiteSectionProps): import("react").JSX.Element;

package/dist/Components/Sections/SiteSection.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "nexus-shared";
+/** A band of a public page: a heading, a line under it, and the content. */
+export function SiteSection({ id, title, lead, action, tone = "plain", children, className }) {
+    const headingId = id ? `${id}-title` : undefined;
+    return (_jsxs("section", { className: cx("nx-site-section", tone === "band" && "nx-site-section--band", className), id: id, "aria-labelledby": title ? headingId : undefined, children: [(title || action) && (_jsxs("header", { className: "nx-site-section__head", children: [_jsxs("div", { children: [title && (_jsx("h2", { className: "nx-site-section__title", id: headingId, children: title })), lead && _jsx("p", { className: "nx-site-section__lead", children: lead })] }), action] })), children] }));
+}

package/dist/Helpers/SiteHelpers.d.ts

@@ -0,0 +1,27 @@
+import type Link from "next/link";
+import type { ComponentProps } from "react";
+import type { SiteMenuItem } from "../Interfaces/SiteInterfaces.ts";
+/** The type `next/link` gives `href`: a plain string, or one of the app's routes when `typedRoutes` is on. */
+type LinkHref = ComponentProps<typeof Link>["href"];
+/**
+ * A path from configuration, as `Link` takes it. An app with `typedRoutes` narrows `href` to the routes it has, which
+ * a package cannot know: menus take plain strings, and every link passes its path through here.
+ */
+export declare function toHref(href: string): LinkHref;
+/** True while the page is this link's, or one under it: `/rooms` also matches `/rooms/deluxe`. */
+export declare function isUnderPath(href: string | undefined, pathname: string): boolean;
+/**
+ * The one path in the menu that fits the page: the longest of those the page is on or under. Only that entry is
+ * marked, so a site's own home ("/site") does not stay marked while the visitor reads a page inside it.
+ */
+export declare function currentHref(menu: readonly SiteMenuItem[], pathname: string): string | undefined;
+/** True for the entry the page belongs to, as `currentHref` worked it out. */
+export declare function isCurrentLink(href: string | undefined, current: string | undefined): boolean;
+/** True while one of the parent's own entries is the page: the parent stays marked with its panel shut. */
+export declare function isCurrentParent(item: SiteMenuItem, current: string | undefined): boolean;
+/** What an external link needs, so a new tab cannot reach back into this one. */
+export declare const externalLinkProps: {
+    readonly target: "_blank";
+    readonly rel: "noreferrer noopener";
+};
+export {};

package/dist/Helpers/SiteHelpers.js

@@ -0,0 +1,42 @@
+/**
+ * A path from configuration, as `Link` takes it. An app with `typedRoutes` narrows `href` to the routes it has, which
+ * a package cannot know: menus take plain strings, and every link passes its path through here.
+ */
+export function toHref(href) {
+    return href;
+}
+/** True while the page is this link's, or one under it: `/rooms` also matches `/rooms/deluxe`. */
+export function isUnderPath(href, pathname) {
+    if (!href || href.startsWith("http") || href.startsWith("#"))
+        return false;
+    if (href === "/")
+        return pathname === "/";
+    return pathname === href || pathname.startsWith(`${href}/`);
+}
+/**
+ * The one path in the menu that fits the page: the longest of those the page is on or under. Only that entry is
+ * marked, so a site's own home ("/site") does not stay marked while the visitor reads a page inside it.
+ */
+export function currentHref(menu, pathname) {
+    let best;
+    const walk = (items) => {
+        for (const item of items) {
+            if (item.href && isUnderPath(item.href, pathname) && (best === undefined || item.href.length > best.length))
+                best = item.href;
+            if (item.children)
+                walk(item.children);
+        }
+    };
+    walk(menu);
+    return best;
+}
+/** True for the entry the page belongs to, as `currentHref` worked it out. */
+export function isCurrentLink(href, current) {
+    return href !== undefined && href === current;
+}
+/** True while one of the parent's own entries is the page: the parent stays marked with its panel shut. */
+export function isCurrentParent(item, current) {
+    return (item.children ?? []).some(child => isCurrentLink(child.href, current));
+}
+/** What an external link needs, so a new tab cannot reach back into this one. */
+export const externalLinkProps = { target: "_blank", rel: "noreferrer noopener" };

package/dist/Interfaces/SiteInterfaces.d.ts

@@ -0,0 +1,59 @@
+import type { IconName } from "nexus-icons";
+import type { ReactNode } from "react";
+/**
+ * One entry of a public site's menu: a link, or a parent that opens a panel of links under it.
+ * The site layout takes a plain array of these, so a menu can be a constant in the app, or built from the API.
+ */
+export interface SiteMenuItem {
+    label: string;
+    /** Path or URL. A parent with `children` and no `href` only opens its panel. */
+    href?: string;
+    /** Tabler icon, shown in the panel under a parent and in the phone menu. */
+    icon?: IconName;
+    /** A second line in muted text, in the panel under a parent. */
+    description?: string;
+    /** Turns the entry into a parent: the header shows a panel under it, the phone menu a group. */
+    children?: SiteMenuItem[];
+    /** Opens in a new tab, with the usual `rel`. */
+    external?: boolean;
+}
+/** The name and mark in the top left, which link home. */
+export interface SiteBrand {
+    /** The first word is drawn bold, the rest light, as on the old Nexus sites. */
+    name: string;
+    /** A small second line under the name, e.g. "RESERVATIONS". */
+    tagline?: string;
+    /** Default "/". */
+    href?: string;
+    /** Tabler icon in the mark. Default `hexagon-letter-n`. */
+    icon?: IconName;
+    /** Drawn in place of the mark and the name, for a real logo. */
+    logo?: ReactNode;
+}
+/** One column of links in the footer. */
+export interface SiteFooterColumn {
+    title: string;
+    links: SiteMenuItem[];
+}
+/** A site's footer: the brand with a line about it, columns of links, and a bottom bar. */
+export interface SiteFooterProps {
+    brand: SiteBrand;
+    /** A sentence or two under the brand. */
+    description?: ReactNode;
+    columns?: SiteFooterColumn[];
+    /** Small print on the left of the bottom bar. Default "© <year> <brand name>". */
+    copyright?: ReactNode;
+    /** The right of the bottom bar: links, a note, a language picker. */
+    bottom?: ReactNode;
+    className?: string;
+}
+/** The bar at the top of every public page. */
+export interface SiteHeaderProps {
+    brand: SiteBrand;
+    menu?: SiteMenuItem[];
+    /** The right of the bar: a theme switcher, Sign in, a call to action. */
+    actions?: ReactNode;
+    /** Sticks to the top of the window while the page scrolls. Default true. */
+    sticky?: boolean;
+    className?: string;
+}

package/dist/Interfaces/SiteInterfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/Server.Index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Server.Index.js

@@ -0,0 +1,3 @@
+// Server-only code, such as layouts that read configuration.
+// Import from "nexus-public/server".
+export {};

package/dist/Shared.Index.d.ts

@@ -0,0 +1,9 @@
+export * from "./Components/Layouts/SiteBrandMark.tsx";
+export * from "./Components/Layouts/SiteFooter.tsx";
+export * from "./Components/Layouts/SiteLayout.tsx";
+export * from "./Components/Sections/FeatureCard.tsx";
+export * from "./Components/Sections/Hero.tsx";
+export * from "./Components/Sections/ShowcaseCard.tsx";
+export * from "./Components/Sections/SiteSection.tsx";
+export * from "./Helpers/SiteHelpers.ts";
+export * from "./Interfaces/SiteInterfaces.ts";

package/dist/Shared.Index.js

@@ -0,0 +1,14 @@
+// Works everywhere: server components, client components, and plain TypeScript.
+// The layout and the page bands are server components; the header inside them is the one client part.
+// Components
+export * from "./Components/Layouts/SiteBrandMark.js";
+export * from "./Components/Layouts/SiteFooter.js";
+export * from "./Components/Layouts/SiteLayout.js";
+export * from "./Components/Sections/FeatureCard.js";
+export * from "./Components/Sections/Hero.js";
+export * from "./Components/Sections/ShowcaseCard.js";
+export * from "./Components/Sections/SiteSection.js";
+// Helpers
+export * from "./Helpers/SiteHelpers.js";
+// Interfaces
+export * from "./Interfaces/SiteInterfaces.js";