@super-ic/web-patterns 0.0.0-oidc-bootstrap.0 → 0.1.9

package/dist/contact-form.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { Button } from "@super-ic/primitives/button";
+import { Card, CardContent } from "@super-ic/primitives/card";
+import { Input } from "@super-ic/primitives/input";
+import { Label } from "@super-ic/primitives/label";
+import { Textarea } from "@super-ic/primitives/textarea";
+function validateFields(fields) {
+    if (fields.length < 1 || fields.length > 8)
+        throw new Error("ContactSection fields must contain between 1 and 8 entries.");
+    const names = new Set();
+    for (const field of fields) {
+        if (!/^[a-z][a-z0-9_-]*$/.test(field.name))
+            throw new Error("ContactSection field names must be lowercase identifiers.");
+        if (names.has(field.name))
+            throw new Error("ContactSection field names must be unique.");
+        names.add(field.name);
+    }
+}
+/** Shared contact behavior; consumers own content, validation and transport. */
+export function ContactForm({ formTitle, formDescription, headingLevel = 2, fields, values, state, submitLabel, submittingLabel, onValueChange, onSubmit, reset, honeypot, notice, }) {
+    validateFields(fields);
+    if (honeypot && (!/^[a-z][a-z0-9_-]*$/.test(honeypot.name) || fields.some(field => field.name === honeypot.name))) {
+        throw new Error("ContactForm honeypot must have a unique lowercase identifier.");
+    }
+    const instanceId = useId();
+    const formRef = useRef(null);
+    const successRef = useRef(null);
+    const previousState = useRef({ kind: state.kind, validationId: state.kind === "invalid" ? state.validationId : undefined });
+    const formHeadingId = `${instanceId}-form-heading`;
+    const FormHeading = headingLevel === 2 ? "h2" : "h3";
+    const isSubmitting = state.kind === "submitting";
+    const isUnavailable = state.kind === "unavailable";
+    const isInvalid = state.kind === "invalid";
+    useEffect(() => {
+        const shouldFocusInvalid = state.kind === "invalid" && (previousState.current.kind !== "invalid" || previousState.current.validationId !== state.validationId);
+        if (shouldFocusInvalid) {
+            formRef.current?.querySelector('[aria-invalid="true"]')?.focus();
+        }
+        if (state.kind === "success" && previousState.current.kind !== "success")
+            successRef.current?.focus();
+        if (state.kind === "idle" && previousState.current.kind === "success") {
+            formRef.current?.querySelector('.sic-contact-section__field [data-slot="input"], .sic-contact-section__field [data-slot="textarea"]')?.focus();
+        }
+        previousState.current = { kind: state.kind, validationId: state.kind === "invalid" ? state.validationId : undefined };
+    }, [state.kind, state.kind === "invalid" ? state.validationId : undefined]);
+    function handleSubmit(event) {
+        event.preventDefault();
+        if (isSubmitting || isUnavailable)
+            return;
+        onSubmit();
+    }
+    return (_jsx(Card, { className: "sic-contact-form sic-contact-section__card", children: _jsx(CardContent, { children: state.kind === "success" ? (_jsxs("div", { ref: successRef, className: "sic-contact-section__success", tabIndex: -1, role: "status", "aria-live": "polite", children: [_jsx(FormHeading, { id: formHeadingId, children: state.title }), _jsx("p", { children: state.message }), reset ? _jsx(Button, { type: "button", variant: "outline", onClick: reset.onAction, children: reset.label }) : null] })) : (_jsxs("form", { ref: formRef, className: "sic-contact-section__form", "aria-labelledby": formHeadingId, "aria-busy": isSubmitting || undefined, noValidate: true, onSubmit: handleSubmit, children: [_jsx(FormHeading, { id: formHeadingId, children: formTitle }), formDescription ? _jsx("p", { className: "sic-contact-section__hint", children: formDescription }) : null, isInvalid ? _jsx("p", { className: "sic-contact-section__message", role: "alert", children: state.message }) : null, state.kind === "failure" ? _jsx("p", { className: "sic-contact-section__message", role: "alert", children: state.message }) : null, isSubmitting || isUnavailable ? _jsx("p", { className: "sic-contact-section__message", role: "status", children: state.message }) : null, honeypot ? _jsxs("div", { hidden: true, "aria-hidden": "true", children: [_jsx(Label, { htmlFor: `${instanceId}-honeypot`, children: honeypot.label }), _jsx(Input, { id: `${instanceId}-honeypot`, name: honeypot.name, value: values[honeypot.name] ?? "", onChange: event => onValueChange(honeypot.name, event.target.value), tabIndex: -1, autoComplete: "off" })] }) : null, _jsxs("fieldset", { disabled: isUnavailable, children: [fields.map(field => {
+                                const inputId = `${instanceId}-field-${field.name}`;
+                                const hintId = `${inputId}-hint`;
+                                const errorId = `${inputId}-error`;
+                                const error = isInvalid ? state.errors[field.name] : undefined;
+                                const describedBy = [field.hint ? hintId : undefined, error ? errorId : undefined].filter(Boolean).join(" ") || undefined;
+                                const common = {
+                                    id: inputId,
+                                    name: field.name,
+                                    value: values[field.name] ?? "",
+                                    required: field.required,
+                                    autoComplete: field.autoComplete,
+                                    placeholder: field.placeholder,
+                                    maxLength: field.maxLength,
+                                    readOnly: isSubmitting,
+                                    "aria-invalid": error ? true : undefined,
+                                    "aria-describedby": describedBy,
+                                    onChange: (event) => onValueChange(field.name, event.target.value),
+                                };
+                                return _jsxs("div", { className: "sic-contact-section__field", children: [_jsxs(Label, { htmlFor: inputId, children: [field.label, field.required ? _jsx("span", { "aria-hidden": "true", children: " *" }) : null] }), field.kind === "textarea" ? _jsx(Textarea, { ...common, rows: field.rows }) : _jsx(Input, { ...common, type: field.kind }), field.hint ? _jsx("p", { id: hintId, className: "sic-contact-section__hint", children: field.hint }) : null, error ? _jsx("p", { id: errorId, className: "sic-contact-section__error", children: error }) : null] }, field.name);
+                            }), notice ? _jsx("p", { className: "sic-contact-section__hint", children: notice }) : null, _jsx(Button, { type: "submit", disabled: isSubmitting || isUnavailable, children: isSubmitting ? submittingLabel : submitLabel })] })] })) }) }));
+}

package/dist/contact-section.d.ts

@@ -0,0 +1,23 @@
+import { type ContactFormProps } from "./contact-form.js";
+export { ContactForm, type ContactFormProps, type ContactSectionField, type ContactSectionState } from "./contact-form.js";
+export type ContactSectionProps = Omit<ContactFormProps, "headingLevel"> & {
+    intro: {
+        eyebrow: string;
+        title: string;
+        description: string;
+    };
+    headingLevel?: 1 | 2;
+    details?: readonly {
+        label: string;
+        text: string;
+        href?: string;
+    }[];
+    media?: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+        caption?: string;
+    };
+};
+export declare function ContactSection({ intro, headingLevel, details, media, ...form }: ContactSectionProps): import("react").JSX.Element;

package/dist/contact-section.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { ContactForm } from "./contact-form.js";
+import { EditorialImage } from "./editorial-image.js";
+export { ContactForm } from "./contact-form.js";
+export function ContactSection({ intro, headingLevel = 2, details, media, ...form }) {
+    const introHeadingId = `${useId()}-intro-heading`;
+    const IntroHeading = headingLevel === 1 ? "h1" : "h2";
+    return (_jsx("section", { className: "sic-contact-section", "aria-labelledby": introHeadingId, children: _jsxs("div", { className: "sic-contact-section__layout", children: [_jsxs("div", { className: "sic-contact-section__introduction", children: [_jsx("p", { className: "sic-contact-section__eyebrow", children: intro.eyebrow }), _jsx(IntroHeading, { id: introHeadingId, children: intro.title }), _jsx("p", { className: "sic-contact-section__description", children: intro.description }), media ? _jsxs("figure", { className: "sic-contact-section__media", children: [_jsx(EditorialImage, { media: media }), media.caption ? _jsx("figcaption", { children: media.caption }) : null] }) : null, details?.length ? (_jsx("dl", { className: "sic-contact-section__details", children: details.map(detail => _jsxs("div", { children: [_jsx("dt", { children: detail.label }), _jsx("dd", { children: detail.href ? _jsx("a", { href: detail.href, children: detail.text }) : detail.text })] }, `${detail.label}-${detail.text}`)) })) : null] }), _jsx(ContactForm, { ...form, headingLevel: headingLevel === 1 ? 2 : 3 })] }) }));
+}

package/dist/editorial-image.d.ts

@@ -0,0 +1,10 @@
+import { type ImgHTMLAttributes } from "react";
+import type { NeighborhoodLandingMedia } from "./neighborhood-landing.js";
+type EditorialImageProps = {
+    media: NeighborhoodLandingMedia;
+    className?: string;
+    priority?: boolean;
+} & Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "width" | "height" | "className">;
+/** Informative media fails locally. A changed source remounts a clean image state. */
+export declare function EditorialImage(props: EditorialImageProps): import("react").JSX.Element;
+export {};

package/dist/editorial-image.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+function EditorialImageInstance({ media, className, priority = false, ...props }) {
+    const [failed, setFailed] = useState(false);
+    // A cached or early network failure can occur before hydration attaches onError.
+    const inspectImage = useCallback((image) => {
+        if (image?.complete && image.naturalWidth === 0)
+            setFailed(true);
+    }, []);
+    if (failed)
+        return null;
+    return _jsx("img", { ...props, ref: inspectImage, className: className, src: media.src, alt: media.alt, width: media.width, height: media.height, loading: priority ? undefined : "lazy", fetchPriority: priority ? "high" : undefined, onError: () => setFailed(true) });
+}
+/** Informative media fails locally. A changed source remounts a clean image state. */
+export function EditorialImage(props) {
+    return _jsx(EditorialImageInstance, { ...props }, props.media.src);
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { CaseStudyCard, CaseStudyCardShell, type CaseStudyCardAccess, type CaseStudyCardDensity, type CaseStudyCardIdentityKind, type CaseStudyCardOpenControlProps, type CaseStudyCardPresentation, type CaseStudyCardProps, } from "./case-study-card.js";
+export { SURFACE_RADIUS_CLASSES, SURFACE_RADIUS_TOKENS, nestedSurfaceRadius, nestedSurfaceRadiusValue, } from "./surface-radius.js";
+export type { CaseStudyCardProductAccess, CaseStudyCardProvenance, LiveCaseStudyCardSlug, } from "./case-study-card-types.js";
+export { NeighborhoodLanding, type NeighborhoodLandingProps, type NeighborhoodLandingLink, type NeighborhoodLandingStep, type NeighborhoodLandingExample, type NeighborhoodLandingJoin, type NeighborhoodLandingMedia } from "./neighborhood-landing.js";
+export { ContactSection, ContactForm, type ContactFormProps, type ContactSectionProps, type ContactSectionField, type ContactSectionState } from "./contact-section.js";
+export { PublicSiteFrame, PublicArticle, HelpDirectory, PublicAvailability, PublicDocumentDialog, type PublicDocumentDialogProps, type PublicContentLink, type PublicContentNavigation, type PublicSiteFrameProps, type PublicArticleSection, type PublicArticleProps, type HelpTopic, type HelpTopicGroup, type HelpDirectoryProps, type PublicAvailabilityProps, } from "./public-content.js";
+export { PoweredBySuperIC, type PoweredBySuperICProps } from "./powered-by-superic.js";

package/dist/index.js

@@ -0,0 +1,6 @@
+export { CaseStudyCard, CaseStudyCardShell, } from "./case-study-card.js";
+export { SURFACE_RADIUS_CLASSES, SURFACE_RADIUS_TOKENS, nestedSurfaceRadius, nestedSurfaceRadiusValue, } from "./surface-radius.js";
+export { NeighborhoodLanding } from "./neighborhood-landing.js";
+export { ContactSection, ContactForm } from "./contact-section.js";
+export { PublicSiteFrame, PublicArticle, HelpDirectory, PublicAvailability, PublicDocumentDialog, } from "./public-content.js";
+export { PoweredBySuperIC } from "./powered-by-superic.js";

package/dist/neighborhood-landing.d.ts

@@ -0,0 +1,129 @@
+import { type AnchorHTMLAttributes, type ReactElement, type ReactNode } from "react";
+export interface NeighborhoodLandingLink {
+    label: string;
+    href: string;
+}
+export interface NeighborhoodLandingStep {
+    id: string;
+    title: string;
+    body: string; /** Consumer-supplied functional icon; the recipe never assigns product meaning. */
+    icon?: ReactNode;
+}
+export interface NeighborhoodLandingMedia {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+}
+export interface NeighborhoodLandingExample {
+    id: string;
+    tabLabel: string;
+    label: string;
+    title: string;
+    context: string;
+    explanation: string;
+    media?: NeighborhoodLandingMedia;
+    steps: readonly [NeighborhoodLandingStep, NeighborhoodLandingStep, NeighborhoodLandingStep];
+}
+export type NeighborhoodLandingJoin = {
+    state: "available";
+    action: NeighborhoodLandingLink;
+    note: string;
+} | {
+    state: "unavailable";
+    title: string;
+    description: string;
+    help: NeighborhoodLandingLink;
+};
+/** Presentation only. The consumer owns eligibility, activation, routes and every claim. */
+export interface NeighborhoodLandingProps {
+    brand: {
+        name: string;
+        mark: ReactNode;
+        homeHref: string;
+    };
+    navigation: {
+        howItWorks: string;
+        joining: string;
+        signIn?: NeighborhoodLandingLink;
+        /** Real product destinations. Omitting these preserves the historical in-page anchors. */
+        links?: readonly NeighborhoodLandingLink[];
+        menuLabel?: string;
+        closeMenuLabel?: string;
+        navigationLabel?: string;
+        skipLabel?: string;
+    };
+    hero: {
+        eyebrow: string;
+        title: string;
+        description: string;
+        joinLabel: string;
+        /** Explicit product destination; omitted values retain the membership anchor. */
+        joinHref?: string;
+        availability: string;
+        media: NeighborhoodLandingMedia & {
+            caption: string; /** Preserve the complete scene when cropping would lose people or the shared object. */
+            fit?: "cover" | "contain";
+        };
+        /** Product-owned rich media, such as a video with its own accessible controls and fallback. */
+        heroMedia?: ReactNode;
+        example: {
+            label: string;
+            title: string;
+            detail: string;
+        };
+    };
+    possibilities?: {
+        eyebrow: string;
+        title: string;
+        description: string;
+        items: readonly {
+            id: string;
+            title: string;
+            description: string;
+            label: string;
+            media: NeighborhoodLandingMedia;
+            icon?: ReactNode;
+        }[];
+    };
+    sharing: {
+        eyebrow: string;
+        title: string;
+        description: string;
+        tabsLabel: string;
+        examples: readonly [NeighborhoodLandingExample, NeighborhoodLandingExample];
+        quiet: {
+            title: string;
+            description: string;
+            icon?: ReactNode;
+        };
+    };
+    membership: {
+        eyebrow: string;
+        title: string;
+        description: string;
+        methodsLabel: string;
+        methods: readonly NeighborhoodLandingStep[];
+        limitation: string;
+        join: NeighborhoodLandingJoin;
+    };
+    essentials: {
+        title: string;
+        description: string;
+        items: readonly {
+            id: string;
+            question: string;
+            answer: ReactNode;
+        }[];
+    };
+    footer: {
+        independence: string;
+        links: readonly NeighborhoodLandingLink[];
+        note: string;
+    };
+    /** Receives all semantic, focus and style props. Forward them to the framework link. */
+    renderLink?: (props: AnchorHTMLAttributes<HTMLAnchorElement> & {
+        href: string;
+    }) => ReactElement;
+}
+export declare function NeighborhoodLanding({ brand, navigation, hero, possibilities, sharing, membership, essentials, footer, renderLink }: NeighborhoodLandingProps): import("react").JSX.Element;

package/dist/neighborhood-landing.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { buttonVariants } from "@super-ic/primitives/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@super-ic/primitives/tabs";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@super-ic/primitives/accordion";
+import { Button } from "@super-ic/primitives/button";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@super-ic/primitives/sheet";
+import { Icon } from "@super-ic/icon-contracts";
+import { EditorialImage } from "./editorial-image.js";
+export function NeighborhoodLanding({ brand, navigation, hero, possibilities, sharing, membership, essentials, footer, renderLink }) {
+    const instance = useId();
+    const [menuOpen, setMenuOpen] = useState(false);
+    const mainId = `${instance}-main`;
+    const sharingId = `${instance}-sharing`;
+    const joinId = `${instance}-join`;
+    const link = (props) => renderLink ? renderLink(props) : _jsx("a", { ...props });
+    const navigationLinks = navigation.links ?? [
+        { label: navigation.howItWorks, href: `#${sharingId}` },
+        { label: navigation.joining, href: `#${joinId}` },
+    ];
+    if (possibilities && (possibilities.items.some(item => item.id.trim().length === 0) || new Set(possibilities.items.map(item => item.id)).size !== possibilities.items.length))
+        throw new Error("NeighborhoodLanding possibilities require unique nonempty IDs.");
+    return (_jsxs("div", { className: "sic-neighborhood", "data-slot": "neighborhood-landing", children: [_jsx("a", { className: "sic-neighborhood__skip", href: `#${mainId}`, children: navigation.skipLabel ?? "Skip to content" }), _jsxs("header", { className: "sic-neighborhood__header sic-neighborhood__width", children: [link({ href: brand.homeHref, className: "sic-neighborhood__brand", "aria-label": brand.name, children: brand.mark }), _jsxs("nav", { "aria-label": navigation.navigationLabel ?? `${brand.name} navigation`, className: "sic-neighborhood__nav sic-neighborhood__nav--desktop", children: [navigationLinks.map(item => _jsx("span", { children: link({ href: item.href, children: item.label }) }, item.href)), navigation.signIn ? link({ href: navigation.signIn.href, className: "sic-neighborhood__account-link", children: navigation.signIn.label }) : null] }), _jsxs(Sheet, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsxs(SheetTrigger, { render: _jsx(Button, { type: "button", variant: "outline", className: "sic-neighborhood__menu-trigger" }), children: [_jsx(Icon, { name: "navigation.menu", decorative: true, size: 18 }), " ", _jsx("span", { children: navigation.menuLabel ?? "Menu" })] }), _jsxs(SheetContent, { closeLabel: navigation.closeMenuLabel ?? "Close menu", side: "right", className: "sic-neighborhood__menu-content", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: brand.name }) }), _jsxs("nav", { "aria-label": navigation.navigationLabel ?? `${brand.name} navigation`, className: "sic-neighborhood__nav sic-neighborhood__nav--mobile", onClickCapture: event => { if (event.target instanceof Element && event.target.closest("a[href]"))
+                                            setMenuOpen(false); }, children: [navigationLinks.map(item => _jsx("span", { children: link({ href: item.href, children: item.label }) }, item.href)), navigation.signIn ? link({ href: navigation.signIn.href, className: "sic-neighborhood__account-link", children: navigation.signIn.label }) : null] })] })] })] }), _jsxs("main", { id: mainId, tabIndex: -1, className: "sic-neighborhood__main", children: [_jsxs("section", { className: "sic-neighborhood__hero sic-neighborhood__width", "aria-labelledby": `${instance}-title`, children: [_jsxs("div", { className: "sic-neighborhood__hero-copy", children: [_jsx("p", { className: "sic-neighborhood__eyebrow", children: hero.eyebrow }), _jsx("h1", { id: `${instance}-title`, children: hero.title }), _jsx("p", { className: "sic-neighborhood__intro", children: hero.description }), link({ className: `${buttonVariants({ size: "lg" })} sic-neighborhood__join-action`, href: hero.joinHref ?? `#${joinId}`, children: _jsxs(_Fragment, { children: [hero.joinLabel, _jsx(Icon, { name: "navigation.forward", decorative: true, size: 18 })] }) }), _jsx("p", { className: "sic-neighborhood__availability", children: hero.availability })] }), _jsxs("figure", { className: "sic-neighborhood__hero-figure", children: [hero.heroMedia ? _jsx("div", { className: "sic-neighborhood__hero-media", children: hero.heroMedia }) : _jsx(EditorialImage, { className: "sic-neighborhood__hero-image", "data-fit": hero.media.fit ?? "cover", media: hero.media, priority: true }), _jsxs("div", { className: "sic-neighborhood__example-note", children: [_jsx("span", { className: "sic-neighborhood__eyebrow", children: hero.example.label }), _jsx("p", { children: hero.example.title }), _jsx("span", { children: hero.example.detail })] }), _jsx("figcaption", { children: hero.media.caption })] })] }), possibilities ? _jsxs("section", { className: "sic-neighborhood__possibilities sic-neighborhood__width", "aria-labelledby": `${instance}-possibilities-title`, children: [_jsxs("div", { className: "sic-neighborhood__section-intro", children: [_jsx("p", { className: "sic-neighborhood__eyebrow", children: possibilities.eyebrow }), _jsx("h2", { id: `${instance}-possibilities-title`, children: possibilities.title }), _jsx("p", { children: possibilities.description })] }), _jsx("ul", { children: possibilities.items.map(item => _jsxs("li", { children: [item.icon ? _jsx("span", { className: "sic-neighborhood__section-icon", "aria-hidden": "true", children: item.icon }) : null, _jsx(EditorialImage, { media: item.media, className: "sic-neighborhood__possibility-media" }), _jsx("p", { className: "sic-neighborhood__eyebrow", children: item.label }), _jsx("h3", { children: item.title }), _jsx("p", { children: item.description })] }, item.id)) })] }) : null, _jsxs("section", { id: sharingId, tabIndex: -1, className: "sic-neighborhood__sharing sic-neighborhood__width", "aria-labelledby": `${instance}-sharing-title`, children: [_jsxs("div", { className: "sic-neighborhood__section-intro", children: [_jsx("p", { className: "sic-neighborhood__eyebrow", children: sharing.eyebrow }), _jsx("h2", { id: `${instance}-sharing-title`, children: sharing.title }), _jsx("p", { children: sharing.description })] }), _jsxs(Tabs, { defaultValue: sharing.examples[0].id, className: "sic-neighborhood__examples", children: [_jsx(TabsList, { activateOnFocus: true, "aria-label": sharing.tabsLabel, className: "sic-neighborhood__tabs", children: sharing.examples.map(example => _jsx(TabsTrigger, { value: example.id, children: example.tabLabel }, example.id)) }), sharing.examples.map(example => (_jsxs(TabsContent, { value: example.id, className: "sic-neighborhood__example-panel", children: [_jsxs("div", { className: "sic-neighborhood__example-message", children: [example.media ? _jsx(EditorialImage, { media: example.media, className: "sic-neighborhood__example-media" }) : null, _jsx("span", { className: "sic-neighborhood__eyebrow", children: example.label }), _jsx("h3", { children: example.title }), _jsx("p", { className: "sic-neighborhood__example-context", children: example.context }), _jsx("p", { children: example.explanation })] }), _jsx("ol", { className: "sic-neighborhood__steps", children: example.steps.map((step, index) => _jsxs("li", { children: [_jsx("span", { className: "sic-neighborhood__step-number", "aria-hidden": "true", children: step.icon ?? `0${index + 1}` }), _jsxs("div", { children: [_jsx("h3", { children: step.title }), _jsx("p", { children: step.body })] })] }, step.id)) })] }, example.id)))] }), _jsxs("div", { className: "sic-neighborhood__quiet", children: [_jsx("span", { "aria-hidden": "true", children: sharing.quiet.icon ?? _jsx(Icon, { name: "state.empty", decorative: true, size: 20 }) }), _jsxs("div", { children: [_jsx("h3", { children: sharing.quiet.title }), _jsx("p", { children: sharing.quiet.description })] })] })] }), _jsx("section", { id: joinId, tabIndex: -1, className: "sic-neighborhood__membership", "aria-labelledby": `${instance}-membership-title`, children: _jsxs("div", { className: "sic-neighborhood__membership-grid sic-neighborhood__width", children: [_jsxs("div", { className: "sic-neighborhood__section-intro", children: [_jsx("p", { className: "sic-neighborhood__eyebrow", children: membership.eyebrow }), _jsx("h2", { id: `${instance}-membership-title`, children: membership.title }), _jsx("p", { children: membership.description }), _jsx("div", { className: "sic-neighborhood__join-state", "data-join-state": membership.join.state, children: membership.join.state === "available" ? _jsxs(_Fragment, { children: [link({ href: membership.join.action.href, className: `${buttonVariants({ size: "lg" })} sic-neighborhood__join-action`, children: _jsxs(_Fragment, { children: [membership.join.action.label, _jsx(Icon, { name: "navigation.forward", decorative: true, size: 18 })] }) }), _jsx("p", { children: membership.join.note })] }) : _jsxs(_Fragment, { children: [_jsx("h3", { children: membership.join.title }), _jsx("p", { children: membership.join.description }), link({ href: membership.join.help.href, className: "sic-neighborhood__text-link", children: membership.join.help.label })] }) })] }), _jsxs("div", { className: "sic-neighborhood__residency", children: [_jsx("h3", { children: membership.methodsLabel }), _jsx("ul", { children: membership.methods.map(method => _jsxs("li", { children: [method.icon ? _jsx("span", { className: "sic-neighborhood__method-icon", "aria-hidden": "true", children: method.icon }) : null, _jsx("h4", { children: method.title }), _jsx("p", { children: method.body })] }, method.id)) }), _jsx("p", { className: "sic-neighborhood__limitation", children: membership.limitation })] })] }) }), _jsxs("section", { className: "sic-neighborhood__essentials sic-neighborhood__width", "aria-labelledby": `${instance}-essentials-title`, children: [_jsxs("div", { className: "sic-neighborhood__section-intro", children: [_jsx("h2", { id: `${instance}-essentials-title`, children: essentials.title }), _jsx("p", { children: essentials.description })] }), _jsx(Accordion, { className: "sic-neighborhood__faq", children: essentials.items.map(item => _jsxs(AccordionItem, { value: item.id, children: [_jsx(AccordionTrigger, { children: item.question }), _jsx(AccordionContent, { children: item.answer })] }, item.id)) })] })] }), _jsxs("footer", { className: "sic-neighborhood__footer sic-neighborhood__width", children: [_jsxs("div", { children: [_jsx("p", { className: "sic-neighborhood__footer-brand", children: brand.name }), _jsx("p", { children: footer.independence })] }), _jsx("nav", { "aria-label": `${brand.name} information`, children: footer.links.map(item => _jsx("span", { children: link({ href: item.href, children: item.label }) }, item.href)) }), _jsx("p", { className: "sic-neighborhood__footer-note", children: footer.note })] })] }));
+}

package/dist/powered-by-superic.d.ts

@@ -0,0 +1,10 @@
+export type PoweredBySuperICProps = {
+    href?: string;
+    variant?: "auto" | "light" | "dark";
+    size?: "sm" | "md";
+    label?: string;
+    source?: string;
+    className?: string;
+};
+/** Import @super-ic/web-patterns/powered-by-superic.css with foundation tokens. */
+export declare function PoweredBySuperIC({ href, variant, size, label, source, className }: PoweredBySuperICProps): import("react").JSX.Element;

package/dist/powered-by-superic.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SuperICLogo } from "@super-ic/brand-contracts/superic-logo";
+function referralUrl(href, source) {
+    if (href !== href.trim() || /[\\\u0000-\u001f\u007f]/.test(href))
+        throw new Error("PoweredBySuperIC href must be an HTTP(S) or root-relative URL.");
+    const relative = href.startsWith("/") && !href.startsWith("//");
+    if (!relative && !/^https?:\/\//i.test(href))
+        throw new Error("PoweredBySuperIC href must be an HTTP(S) or root-relative URL.");
+    const url = new URL(href, "https://superic.invalid");
+    if (!["http:", "https:"].includes(url.protocol))
+        throw new Error("PoweredBySuperIC href must be an HTTP(S) or root-relative URL.");
+    if (!source)
+        return href;
+    url.searchParams.set("ref", source);
+    return relative ? `${url.pathname}${url.search}${url.hash}` : url.href;
+}
+/** Import @super-ic/web-patterns/powered-by-superic.css with foundation tokens. */
+export function PoweredBySuperIC({ href = "https://superic.cc", variant = "auto", size = "sm", label = "Powered by", source, className }) {
+    return _jsxs("a", { href: referralUrl(href, source), target: "_blank", rel: "noopener noreferrer", "data-slot": "powered-by-superic", "data-variant": variant, "data-size": size, "aria-label": `${label} SuperIC`.trim(), className: ["sic-powered-by-superic", className].filter(Boolean).join(" "), children: [_jsx("span", { "aria-hidden": "true", children: label }), _jsx(SuperICLogo, { variant: variant, height: size === "sm" ? 14 : 18 })] });
+}

package/dist/public-content.d.ts

@@ -0,0 +1,152 @@
+import { type MouseEvent, type ReactNode } from "react";
+import type { NeighborhoodLandingMedia } from "./neighborhood-landing.js";
+export type PublicContentLink = Readonly<{
+    label: string;
+    href: string;
+    onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}>;
+export type PublicContentNavigation = PublicContentLink & Readonly<{
+    id: string;
+    current?: boolean;
+}>;
+export type PublicSiteFrameProps = Readonly<{
+    brand: {
+        name: string;
+        home: PublicContentLink;
+        mark: ReactNode;
+    };
+    navigation: readonly PublicContentNavigation[];
+    navigationLabel: string;
+    menuLabel?: string;
+    closeMenuLabel?: string;
+    skipLabel: string;
+    footer: {
+        description: string;
+        navigationLabel: string;
+        links: readonly PublicContentLink[];
+        note?: string;
+    };
+    /** Marketing may use wider media while reading defaults to a 69rem measure. */
+    width?: "reading" | "marketing";
+    children: ReactNode;
+}>;
+/** One public main landmark. The composed article, directory or boundary owns h1. */
+export declare function PublicSiteFrame({ brand, navigation, navigationLabel, menuLabel, closeMenuLabel, skipLabel, footer, width, children }: PublicSiteFrameProps): import("react").JSX.Element;
+export type PublicArticleSection = Readonly<{
+    /** Stable slug supplied by the consumer; used for real fragment navigation. */
+    id: string;
+    title: string;
+    media?: NeighborhoodLandingMedia;
+    /** Trusted React content. Use paragraphs, lists, links and h3 subheadings. */
+    body: ReactNode;
+}>;
+export type PublicArticleProps = Readonly<{
+    /** Optional document-scoped slug. Provide a unique value when stable deep links are required. */
+    anchorId?: string;
+    title: string;
+    introduction: string;
+    back?: PublicContentLink;
+    metadata?: Readonly<{
+        label: string;
+        dateTime?: string;
+    }>;
+    notice?: Readonly<{
+        title: string;
+        body: string;
+        link?: PublicContentLink;
+    }>;
+    contentsLabel: string;
+    sections: readonly PublicArticleSection[];
+    related?: Readonly<{
+        title: string;
+        links: readonly PublicContentLink[];
+    }>;
+    /** Opt-in editorial layout for marketing pages; default remains a document reader. */
+    presentation?: "document" | "marketing";
+}>;
+/** A readable document, not a legal-readiness decision or an acknowledgment form. */
+export declare function PublicArticle({ anchorId, title, introduction, back, metadata, notice, contentsLabel, sections, related, presentation }: PublicArticleProps): import("react").JSX.Element;
+export type HelpTopic = PublicContentLink & Readonly<{
+    id: string;
+    description: string;
+}>;
+export type HelpTopicGroup = Readonly<{
+    id: string;
+    title: string;
+    topics: readonly HelpTopic[];
+}>;
+export type HelpDirectoryProps = Readonly<{
+    title: string;
+    introduction: string;
+    search: {
+        label: string;
+        value: string;
+        placeholder?: string;
+        /** Optional native GET destination for pre-hydration search. */
+        action?: string;
+        /** Native query parameter name. Defaults to q. */
+        queryName?: string;
+        submitLabel: string;
+        onChange: (value: string) => void;
+        onSubmit: () => void;
+    };
+    results: {
+        state: "ready";
+        groups: readonly HelpTopicGroup[];
+        summary: string;
+    } | {
+        state: "empty";
+        title: string;
+        description: string;
+        reset: {
+            label: string;
+            onAction: () => void;
+            href?: string;
+        };
+    } | {
+        state: "loading";
+        message: string;
+    } | {
+        state: "failed";
+        message: string;
+        retry: {
+            label: string;
+            onAction: () => void;
+        };
+    };
+    contact: {
+        title: string;
+        description: string;
+        action: PublicContentLink;
+    };
+}>;
+/** Controlled search results. Products own search, stale-result suppression and help routing. */
+export declare function HelpDirectory({ title, introduction, search, results, contact }: HelpDirectoryProps): import("react").JSX.Element;
+export type PublicAvailabilityProps = Readonly<{
+    value: {
+        state: "loading";
+        title: string;
+        message: string;
+    } | {
+        state: "closed" | "restricted" | "sign-in" | "unavailable";
+        title: string;
+        description: string;
+        detail?: string;
+        primary?: PublicContentLink;
+        secondary: readonly PublicContentLink[];
+    };
+}>;
+/** Public-safe reason and recovery routes. A state label never grants access. */
+export declare function PublicAvailability({ value }: PublicAvailabilityProps): import("react").JSX.Element;
+export type PublicDocumentDialogProps = Readonly<{
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description: string;
+    contentLabel: string;
+    returnLabel: string;
+    /** Trusted document content. Use paragraphs, lists, links and h3 section headings. */
+    children: ReactNode;
+}>;
+/** A readable document overlay. Reading and closing never constitute acceptance. */
+export declare function PublicDocumentDialog({ open, onOpenChange, title, description, contentLabel, returnLabel, children }: PublicDocumentDialogProps): import("react").JSX.Element;

package/dist/public-content.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { EditorialImage } from "./editorial-image.js";
+import { Button, buttonVariants } from "@super-ic/primitives/button";
+import { Input } from "@super-ic/primitives/input";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@super-ic/primitives/sheet";
+import { Icon } from "@super-ic/icon-contracts";
+function Link({ value, className, current }) {
+    return _jsx("a", { href: value.href, onClick: value.onNavigate, className: className, "aria-current": current ? "page" : undefined, children: value.label });
+}
+/** One public main landmark. The composed article, directory or boundary owns h1. */
+export function PublicSiteFrame({ brand, navigation, navigationLabel, menuLabel = "Menu", closeMenuLabel = "Close menu", skipLabel, footer, width = "reading", children }) {
+    const id = useId();
+    const [menuOpen, setMenuOpen] = useState(false);
+    if (new Set(navigation.map(item => item.id)).size !== navigation.length || navigation.filter(item => item.current).length > 1) {
+        throw new Error("PublicSiteFrame needs unique navigation IDs and at most one current destination.");
+    }
+    return _jsxs("div", { className: "sic-public", "data-slot": "public-site-frame", children: [_jsxs("header", { className: `sic-public__header sic-public__width ${width === "marketing" ? "sic-public__width--marketing" : ""}`, children: [_jsx("a", { className: "sic-public__skip", href: `#${id}-main`, children: skipLabel }), _jsx("a", { className: "sic-public__brand", href: brand.home.href, onClick: brand.home.onNavigate, "aria-label": brand.name, children: brand.mark }), _jsx("nav", { "aria-label": navigationLabel, className: "sic-public__nav sic-public__nav--desktop", children: navigation.map(item => _jsx(Link, { value: item, current: Boolean(item.current) }, item.id)) }), _jsxs(Sheet, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsxs(SheetTrigger, { render: _jsx(Button, { type: "button", variant: "outline", className: "sic-public__menu-trigger" }), children: [_jsx(Icon, { name: "navigation.menu", decorative: true, size: 18 }), " ", _jsx("span", { children: menuLabel })] }), _jsxs(SheetContent, { closeLabel: closeMenuLabel, side: "right", className: "sic-public__menu-content", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: brand.name }) }), _jsx("nav", { "aria-label": navigationLabel, className: "sic-public__nav sic-public__nav--mobile", onClickCapture: event => { if (event.target instanceof Element && event.target.closest("a[href]"))
+                                            setMenuOpen(false); }, children: navigation.map(item => _jsx(Link, { value: item, current: Boolean(item.current) }, item.id)) })] })] })] }), _jsx("main", { className: `sic-public__main sic-public__width ${width === "marketing" ? "sic-public__width--marketing" : ""}`, id: `${id}-main`, tabIndex: -1, children: children }), _jsxs("footer", { className: `sic-public__footer sic-public__width ${width === "marketing" ? "sic-public__width--marketing" : ""}`, children: [_jsxs("div", { children: [_jsx("p", { className: "sic-public__footer-brand", children: brand.name }), _jsx("p", { children: footer.description })] }), _jsx("nav", { "aria-label": footer.navigationLabel, children: footer.links.map(link => _jsx(Link, { value: link }, link.href)) }), footer.note ? _jsx("p", { className: "sic-public__footer-note", children: footer.note }) : null] })] });
+}
+/** A readable document, not a legal-readiness decision or an acknowledgment form. */
+export function PublicArticle({ anchorId, title, introduction, back, metadata, notice, contentsLabel, sections, related, presentation = "document" }) {
+    const instance = useId();
+    const validSlug = /^[a-z][a-z0-9-]*$/;
+    if (anchorId !== undefined && !validSlug.test(anchorId)) {
+        throw new Error("PublicArticle anchorId requires a lowercase fragment slug.");
+    }
+    if (new Set(sections.map(section => section.id)).size !== sections.length || sections.some(section => !validSlug.test(section.id))) {
+        throw new Error("PublicArticle sections require unique lowercase fragment slugs.");
+    }
+    const sectionAnchor = (section) => `${anchorId ?? instance}-${section.id}`;
+    return _jsxs("article", { className: "sic-public-article", "data-slot": "public-article", "data-presentation": presentation, children: [_jsxs("header", { className: "sic-public__page-heading", children: [back ? _jsx("p", { className: "sic-public__back", children: _jsx(Link, { value: back }) }) : null, _jsx("h1", { children: title }), _jsx("p", { className: "sic-public__intro", children: introduction }), metadata ? _jsx("p", { className: "sic-public__metadata", children: metadata.dateTime ? _jsx("time", { dateTime: metadata.dateTime, children: metadata.label }) : metadata.label }) : null] }), _jsxs("div", { className: "sic-public-article__layout", children: [presentation === "document" ? _jsx("div", { className: "sic-public-article__contents", children: _jsxs("details", { open: true, children: [_jsx("summary", { children: contentsLabel }), _jsx("nav", { "aria-label": contentsLabel, children: sections.map(section => _jsx("a", { href: `#${sectionAnchor(section)}`, children: section.title }, section.id)) })] }) }) : null, _jsxs("div", { className: "sic-public-article__body", children: [notice ? _jsxs("div", { role: "note", className: "sic-public__notice", "aria-labelledby": `${instance}-notice`, children: [_jsx("h2", { id: `${instance}-notice`, children: notice.title }), _jsx("p", { children: notice.body }), notice.link ? _jsx(Link, { value: notice.link }) : null] }) : null, sections.map(section => _jsx("section", { id: sectionAnchor(section), "aria-labelledby": `${instance}-${section.id}-heading`, tabIndex: -1, children: presentation === "marketing" ? _jsxs(_Fragment, { children: [_jsxs("div", { className: "sic-public-article__section-copy", children: [_jsx("h2", { id: `${instance}-${section.id}-heading`, children: section.title }), _jsx("div", { className: "sic-public__prose", children: section.body })] }), section.media ? _jsx(EditorialImage, { media: section.media, className: "sic-public-article__media" }) : null] }) : _jsxs(_Fragment, { children: [_jsx("h2", { id: `${instance}-${section.id}-heading`, children: section.title }), section.media ? _jsx(EditorialImage, { media: section.media, className: "sic-public-article__media" }) : null, _jsx("div", { className: "sic-public__prose", children: section.body })] }) }, section.id)), related ? _jsxs("section", { className: "sic-public__related", "aria-labelledby": `${instance}-related`, children: [_jsx("h2", { id: `${instance}-related`, children: related.title }), _jsx("ul", { children: related.links.map(link => _jsx("li", { children: _jsx(Link, { value: link }) }, link.href)) })] }) : null] })] })] });
+}
+/** Controlled search results. Products own search, stale-result suppression and help routing. */
+export function HelpDirectory({ title, introduction, search, results, contact }) {
+    const id = useId();
+    return _jsxs("div", { "data-slot": "help-directory", className: "sic-public-help", children: [_jsxs("header", { className: "sic-public__page-heading", children: [_jsx("h1", { children: title }), _jsx("p", { className: "sic-public__intro", children: introduction })] }), _jsxs("form", { className: "sic-public-help__search", role: "search", method: "get", action: search.action, onSubmit: event => { event.preventDefault(); if (results.state !== "loading")
+                    search.onSubmit(); }, children: [_jsx("label", { htmlFor: `${id}-search`, children: search.label }), _jsxs("div", { children: [_jsx(Input, { id: `${id}-search`, name: search.queryName ?? "q", type: "search", value: search.value, placeholder: search.placeholder, onChange: event => search.onChange(event.target.value) }), _jsx(Button, { type: "submit", disabled: results.state === "loading", children: search.submitLabel })] })] }), _jsxs("div", { className: "sic-public-help__results", "aria-busy": results.state === "loading", children: [results.state === "loading" ? _jsx("p", { role: "status", children: results.message }) : null, results.state === "failed" ? _jsxs("div", { className: "sic-public__notice", children: [_jsx("p", { role: "alert", children: results.message }), _jsx(Button, { variant: "outline", onClick: results.retry.onAction, children: results.retry.label })] }) : null, results.state === "empty" ? _jsxs("section", { className: "sic-public-help__empty", children: [_jsx("h2", { children: results.title }), _jsx("p", { role: "status", children: results.description }), results.reset.href ? _jsx(Link, { value: { label: results.reset.label, href: results.reset.href }, className: buttonVariants({ variant: "outline" }) }) : _jsx(Button, { variant: "outline", onClick: results.reset.onAction, children: results.reset.label })] }) : null, results.state === "ready" ? _jsxs(_Fragment, { children: [_jsx("p", { className: "sic-public__metadata", role: "status", children: results.summary }), _jsx("div", { className: "sic-public-help__groups", children: results.groups.map(group => _jsxs("section", { "aria-labelledby": `${id}-${group.id}`, children: [_jsx("h2", { id: `${id}-${group.id}`, children: group.title }), _jsx("ul", { children: group.topics.map(topic => _jsxs("li", { children: [_jsx(Link, { value: topic }), _jsx("p", { children: topic.description })] }, topic.id)) })] }, group.id)) })] }) : null] }), _jsxs("section", { className: "sic-public-help__contact", "aria-labelledby": `${id}-contact`, children: [_jsxs("div", { children: [_jsx("h2", { id: `${id}-contact`, children: contact.title }), _jsx("p", { children: contact.description })] }), _jsx(Link, { value: contact.action, className: buttonVariants({ variant: "outline" }) })] })] });
+}
+/** Public-safe reason and recovery routes. A state label never grants access. */
+export function PublicAvailability({ value }) {
+    return _jsxs("section", { className: "sic-public-availability", "data-slot": "public-availability", "data-state": value.state, "aria-busy": value.state === "loading", children: [_jsx("h1", { children: value.title }), value.state === "loading" ? _jsx("p", { role: "status", children: value.message }) : _jsxs(_Fragment, { children: [_jsx("p", { className: "sic-public__intro", children: value.description }), value.detail ? _jsx("p", { children: value.detail }) : null, _jsxs("div", { className: "sic-public__actions", children: [value.primary ? _jsx(Link, { value: value.primary, className: `${buttonVariants({ size: "lg" })} sic-public__primary` }) : null, value.secondary.map(link => _jsx(Link, { value: link }, link.href))] })] })] });
+}
+/** A readable document overlay. Reading and closing never constitute acceptance. */
+export function PublicDocumentDialog({ open, onOpenChange, title, description, contentLabel, returnLabel, children }) {
+    return _jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "bottom", className: "sic-public-document-dialog", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: title }) }), _jsxs("div", { className: "sic-public-document-dialog__body", "data-slot": "document-reader-content", role: "region", tabIndex: 0, "aria-label": contentLabel, children: [_jsx(SheetDescription, { children: description }), children] }), _jsx(SheetFooter, { children: _jsx(Button, { type: "button", onClick: () => onOpenChange(false), children: returnLabel }) })] }) });
+}

package/dist/surface-radius.d.ts

@@ -0,0 +1,20 @@
+export declare const SURFACE_RADIUS_TOKENS: {
+    readonly card: "--radius-card";
+    readonly border: "--surface-border";
+    readonly inset: "--surface-inset";
+    readonly cardFrame: "--radius-card-frame";
+    readonly cardInset: "--radius-card-inset";
+};
+export declare const SURFACE_RADIUS_CLASSES: {
+    readonly card: "rounded-[var(--radius-card)]";
+    readonly cardFrame: "rounded-[var(--radius-card-frame)]";
+    readonly cardFrameTop: "rounded-t-[var(--radius-card-frame)]";
+    readonly cardInset: "rounded-[var(--radius-card-inset)]";
+};
+/**
+ * The inner radius follows the actual uniform gap between two nested surfaces.
+ * max() prevents a small parent token from producing an invalid negative radius.
+ */
+export declare function nestedSurfaceRadius(parentToken?: string, insetToken?: string): string;
+/** Numeric proof helper for responsive recipes that declare their actual inset in pixels. */
+export declare function nestedSurfaceRadiusValue(parentRadius: number, inset: number): number;