@cosmicdrift/kumiko-headless 0.327.0 → 0.328.1

package/dist/apex/css.d.ts

@@ -0,0 +1,3 @@
+export declare const APEX_NAV_MENU_CSS = "\n  .nav-toggle { display: none; }\n  .nav-toggle__trigger { display: none; align-items: center; justify-content: center;\n    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; cursor: pointer;\n    color: var(--fg-muted); list-style: none; }\n  .nav-toggle__trigger::-webkit-details-marker { display: none; }\n  .nav-toggle__trigger:hover { color: var(--fg); background: var(--bg-muted); }\n  .nav-toggle__trigger svg { width: 1.35rem; height: 1.35rem; }\n  .apex-dark .nav-toggle__trigger { color: var(--on-dark-muted); }\n  .apex-dark .nav-toggle__trigger:hover { color: var(--on-dark); background: rgba(255,255,255,0.08); }\n\n  .nav-menu { position: relative; display: inline-flex; }\n  .nav-menu__trigger { display: inline-flex; align-items: center; gap: 0.3rem;\n    font: inherit; font-size: 0.9375rem; color: var(--fg-muted);\n    cursor: pointer; list-style: none; }\n  .nav-menu__trigger::-webkit-details-marker { display: none; }\n  .nav-menu__trigger:hover { color: var(--fg); }\n  .nav-menu__chev { display: inline-flex; transition: transform 0.15s; opacity: 0.7; }\n  .nav-menu__chev svg { width: 0.95em; height: 0.95em; }\n  .nav-menu[open] .nav-menu__chev { transform: rotate(180deg); }\n  .nav-menu__panel { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 20;\n    min-width: 21rem; padding: 0.5rem; background: var(--bg-card); color: var(--fg);\n    border: 1px solid var(--border); border-radius: 0.75rem; box-shadow: var(--shadow);\n    flex-direction: column; gap: 0.125rem; }\n  .nav-menu[open] .nav-menu__panel { display: flex; }\n  .nav-menu__item { display: flex; gap: 0.75rem; align-items: flex-start;\n    padding: 0.6rem 0.7rem; border-radius: 0.5rem; color: var(--fg); }\n  .nav-menu__item:hover { background: var(--bg-muted); color: var(--fg); }\n  .nav-menu__icon { flex: none; display: inline-flex; align-items: center; justify-content: center;\n    width: 2rem; height: 2rem; border-radius: 0.5rem;\n    background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }\n  .nav-menu__icon svg { width: 1.1rem; height: 1.1rem; }\n  .nav-menu__text { display: flex; flex-direction: column; gap: 0.1rem; }\n  .nav-menu__title { font-weight: 600; font-size: 0.9rem; line-height: 1.2; }\n  .nav-menu__desc { font-size: 0.8rem; color: var(--fg-muted); line-height: 1.35; }\n  .nav-menu__sep { height: 1px; background: var(--border); margin: 0.375rem 0.3rem; }\n  .nav-menu__more { display: inline-flex; padding: 0.4rem 0.7rem; font-size: 0.85rem; font-weight: 600; color: var(--primary); }\n  .nav-menu__more:hover { color: var(--primary-hover); }\n  .apex-dark .nav-menu__trigger { color: var(--on-dark-muted); }\n  .apex-dark .nav-menu__trigger:hover { color: var(--on-dark); }\n  /* The panel is a light popover; its links must NOT inherit the dark-chrome\n     nav-link color (.apex-dark .nav-links a, specificity 0,2,1) or a consumer's\n     own .nav-links a. Pin both link types with matching specificity (0,2,1) so\n     titles + the footer link stay readable in the dark theme. */\n  .nav-menu__panel a.nav-menu__item { color: var(--fg); }\n  .nav-menu__panel a.nav-menu__item:hover { color: var(--fg); }\n  .nav-menu__panel a.nav-menu__more { color: var(--primary); }\n  .nav-menu__panel a.nav-menu__more:hover { color: var(--primary-hover); }\n";
+export declare const APEX_NAV_TOGGLE_RESPONSIVE_CSS = "\n  @media (max-width: 640px) {\n    .nav { position: relative; }\n    .nav .nav-toggle { display: inline-flex; }\n    .nav .nav-toggle__trigger { display: inline-flex; }\n    .nav-toggle[open] > .nav-links { display: flex; flex-direction: column; align-items: stretch;\n      gap: 0.25rem; position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; z-index: 30;\n      background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.75rem;\n      box-shadow: var(--shadow); padding: 0.75rem; }\n    .nav-toggle[open] > .nav-links > a { color: var(--fg); padding: 0.4rem 0.25rem; }\n    .nav-toggle[open] > .nav-links > a:hover { color: var(--fg); }\n    .nav-toggle .nav-menu { display: block; }\n    .nav-toggle .nav-menu__panel { position: static; min-width: 0;\n      margin-top: 0.375rem; box-shadow: none; }\n  }\n";
+export declare const APEX_STRUCTURAL_CSS: string;

package/{src/apex/css.ts → dist/apex/css.js}

@@ -14,7 +14,6 @@
 //   --accent-hover unset     → eyebrow falls back to --primary
 //   --hero-tagline-max unset → hero tagline runs full column (var(--hero-tagline-max, none))
 //   icon tint                → color-mix derives a faint --primary wash, no hardcoded rgba
-
 const BASE_LAYOUT = `
   * { box-sizing: border-box; }
   html, body { margin: 0; padding: 0; }
@@ -48,7 +47,6 @@ const BASE_LAYOUT = `
   .eyebrow { display: inline-block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
     text-transform: uppercase; color: var(--accent-hover, var(--primary)); margin-bottom: 0.75rem; }
 `;
-
 const HERO = `
   .hero { padding: 4.5rem 0 4rem; }
   .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; }
@@ -74,7 +72,6 @@ const HERO = `
   .apex-lightbox__close:hover { background: var(--bg-muted); }
   .apex-dark .apex-lightbox__close { background: var(--on-dark); color: var(--primary); border-color: var(--on-dark-border); }
 `;
-
 const FEATURES = `
   .features { background: var(--bg-muted); }
   .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@@ -85,7 +82,6 @@ const FEATURES = `
   .feature h3 { font-size: 1.0625rem; margin: 0 0 0.4rem; }
   .feature p { color: var(--fg-muted); margin: 0; font-size: 0.9375rem; }
 `;
-
 const PRICING = `
   .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; }
   .price-card { position: relative; background: var(--bg-card); border: 1px solid var(--border);
@@ -105,20 +101,17 @@ const PRICING = `
   .price-list li.price-cap { font-weight: 600; color: var(--fg); }
   .price-card .btn { text-align: center; margin-top: 0.5rem; }
 `;
-
 const TRUST = `
   .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
   .trust-item h3 { font-size: 1.0625rem; margin: 0 0 0.4rem; }
   .trust-item p { color: var(--fg-muted); margin: 0; font-size: 0.9375rem; }
 `;
-
 const FINAL_CTA = `
   .final-cta { text-align: center; }
   .final-cta-pony { width: 96px; height: auto; display: block; margin: 0 auto 1rem; }
   .final-cta h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); margin: 0 0 0.75rem; }
   .final-cta p { color: var(--fg-muted); margin: 0 0 1.75rem; font-size: 1.0625rem; }
 `;
-
 // Light chrome (default). Header floats translucent over the page; footer is a
 // muted band. Dark theme overrides both below.
 const CHROME_LIGHT = `
@@ -150,7 +143,6 @@ const CHROME_LIGHT = `
   .footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
     display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; }
 `;
-
 // Dark sandwich: header/hero/final-cta/footer ride on --primary. Buttons invert
 // (a --primary button on --primary would vanish) → light button, --primary text.
 const CHROME_DARK = `
@@ -185,7 +177,6 @@ const CHROME_DARK = `
   .apex-dark .footer-col a:hover { color: var(--on-dark); }
   .apex-dark .footer-bottom { border-top: 1px solid var(--on-dark-border); }
 `;
-
 const RESPONSIVE = `
   @media (max-width: 900px) {
     .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
@@ -198,7 +189,6 @@ const RESPONSIVE = `
     .feature-grid, .price-grid, .trust-grid, .footer-grid { grid-template-columns: 1fr; }
   }
 `;
-
 // header renders navLinks TWICE (renderApexHeader): a plain always-visible
 // .nav-links row, plus a copy nested in .nav-toggle for < 640px — a closed
 // <details> can't be forced "always open" on desktop via CSS (Chrome keeps
@@ -256,7 +246,6 @@ export const APEX_NAV_MENU_CSS = `
   .nav-menu__panel a.nav-menu__more { color: var(--primary); }
   .nav-menu__panel a.nav-menu__more:hover { color: var(--primary-hover); }
 `;
-
 // Standalone mobile-open rules for .nav-toggle, split out of RESPONSIVE so a
 // consumer calling renderApexHeader() outside renderApexPage (money-horse,
 // show-pony, the docs sample) can include just this alongside
@@ -288,16 +277,14 @@ export const APEX_NAV_TOGGLE_RESPONSIVE_CSS = `
       margin-top: 0.375rem; box-shadow: none; }
   }
 `;
-
-export const APEX_STRUCTURAL_CSS =
-  BASE_LAYOUT +
-  HERO +
-  FEATURES +
-  PRICING +
-  TRUST +
-  FINAL_CTA +
-  CHROME_LIGHT +
-  CHROME_DARK +
-  APEX_NAV_MENU_CSS +
-  APEX_NAV_TOGGLE_RESPONSIVE_CSS +
-  RESPONSIVE;
+export const APEX_STRUCTURAL_CSS = BASE_LAYOUT +
+    HERO +
+    FEATURES +
+    PRICING +
+    TRUST +
+    FINAL_CTA +
+    CHROME_LIGHT +
+    CHROME_DARK +
+    APEX_NAV_MENU_CSS +
+    APEX_NAV_TOGGLE_RESPONSIVE_CSS +
+    RESPONSIVE;

package/dist/apex/index.d.ts

@@ -0,0 +1,229 @@
+import type { TenantId } from "@cosmicdrift/kumiko-framework/engine";
+export { APEX_NAV_MENU_CSS, APEX_NAV_TOGGLE_RESPONSIVE_CSS, APEX_STRUCTURAL_CSS } from "./css.js";
+export { APEX_LIGHTBOX_HTML, APEX_LIGHTBOX_SCRIPT, APEX_LIGHTBOX_SCRIPT_CSP_HASH, } from "./lightbox.js";
+export type ApexTheme = "light" | "dark";
+/** Brand is raw CSS the app owns: the :root token block and optional @font-face.
+ *  Token names referenced by the structural CSS: --bg --bg-card --bg-muted
+ *  --border --fg --fg-muted --fg-subtle --primary --primary-hover --primary-fg
+ *  --status-ok --shadow. Optional: --accent --accent-fg --font-mono --font-body,
+ *  and (dark theme) --on-dark --on-dark-muted --on-dark-border. */
+export type ApexBrand = {
+    readonly tokensCss: string;
+    readonly fontFaceCss?: string;
+};
+export type ApexCtaVariant = "primary" | "secondary" | "link";
+export type ApexCta = {
+    readonly label: string;
+    /** App-authored only, no user input — escapeHtml encodes entities but does
+     *  NOT sanitize the URL scheme (a `javascript:`/`data:` URI survives it
+     *  unchanged). Trust boundary is the deploy-time apex config, not runtime. */
+    readonly href: string;
+    /** "link" renders a plain anchor (no .btn). Default "primary". */
+    readonly variant?: ApexCtaVariant;
+};
+export type ApexLink = {
+    readonly kind?: "link";
+    readonly label: string;
+    readonly href: string;
+};
+/** One entry inside a dropdown nav menu: icon + title + optional description. */
+export type ApexNavMenuItem = {
+    /** Inner SVG markup (paths), wrapped by the standard 24px icon <svg>.
+     *  ponytail: rendered verbatim, no sanitizer — trusted because it's
+     *  app-authored at deploy time, same trust boundary as ApexCta.href. If an
+     *  app ever sources this from tenant/user content, sanitize at that
+     *  construction boundary before it reaches here. */
+    readonly icon?: string;
+    readonly title: string;
+    readonly desc?: string;
+    readonly href: string;
+};
+/** A header nav entry that opens a dropdown (icon/title/desc rows) instead of
+ *  navigating. CSS-only: reveals on hover + keyboard focus. */
+export type ApexNavMenu = {
+    readonly kind: "menu";
+    readonly label: string;
+    readonly items: readonly ApexNavMenuItem[];
+    /** Optional link under a divider at the foot of the panel (e.g. "See all →"). */
+    readonly footer?: ApexLink;
+};
+/** A header nav entry: a plain link, or a dropdown menu. */
+export type ApexNavEntry = ApexLink | ApexNavMenu;
+export type ApexImage = {
+    readonly src: string;
+    readonly alt: string;
+    readonly width?: number;
+    readonly height?: number;
+};
+export type ApexHeader = {
+    readonly brand: {
+        readonly href: string;
+        readonly label: string;
+        readonly logoSrc?: string;
+    };
+    /** Plain links and/or dropdown menus, in order. */
+    readonly navLinks?: readonly ApexNavEntry[];
+    readonly actions?: readonly ApexCta[];
+    /** aria-label for the mobile hamburger trigger (< 640px). Default "Menu". */
+    readonly menuLabel?: string;
+};
+export type ApexFooterColumn = {
+    readonly heading: string;
+    readonly links: readonly ApexLink[];
+};
+export type ApexFooter = {
+    readonly brand: {
+        readonly label: string;
+        readonly logoSrc?: string;
+    };
+    readonly tagline?: string;
+    readonly columns?: readonly ApexFooterColumn[];
+    /** Plain text — use unicode (© ·), not HTML entities; rendered escaped. */
+    readonly bottomLeft?: string;
+    readonly bottomRight?: string;
+};
+export type ApexHeroSection = {
+    readonly kind: "hero";
+    readonly logo?: ApexImage;
+    readonly title: string;
+    readonly tagline: string;
+    readonly ctas?: readonly ApexCta[];
+    /** App-authored trusted HTML (e.g. <strong>…<br/>); rendered verbatim. */
+    readonly metaHtml?: string;
+    readonly screenshot?: ApexImage;
+};
+export type ApexFeature = {
+    /** Inner SVG markup (paths), wrapped by the standard 24px icon <svg>.
+     *  ponytail: rendered verbatim, no sanitizer — trusted because it's
+     *  app-authored at deploy time, same trust boundary as ApexCta.href. If an
+     *  app ever sources this from tenant/user content, sanitize at that
+     *  construction boundary before it reaches here. */
+    readonly icon?: string;
+    readonly title: string;
+    readonly desc: string;
+};
+export type ApexFeatureGridSection = {
+    readonly kind: "feature-grid";
+    readonly id?: string;
+    readonly eyebrow?: string;
+    readonly heading: string;
+    readonly sub?: string;
+    /** Sit on the muted band (.features). Default true. */
+    readonly muted?: boolean;
+    readonly items: readonly ApexFeature[];
+};
+export type ApexPricingTier = {
+    readonly name: string;
+    readonly tagline?: string;
+    /** App-formatted ("4,99 €", "0 €", "auf Anfrage"). */
+    readonly amount: string;
+    /** Localized suffix after the amount ("/Monat", "/month"). */
+    readonly priceSuffix?: string;
+    readonly featured?: boolean;
+    readonly badge?: string;
+    readonly capLine?: string;
+    readonly benefits: readonly string[];
+    readonly cta: ApexCta;
+};
+export type ApexPricingGridSection = {
+    readonly kind: "pricing-grid";
+    readonly id?: string;
+    readonly eyebrow?: string;
+    readonly heading: string;
+    readonly sub?: string;
+    readonly tiers: readonly ApexPricingTier[];
+};
+export type ApexInfoItem = {
+    readonly title: string;
+    readonly desc: string;
+};
+export type ApexInfoGridSection = {
+    readonly kind: "info-grid";
+    readonly id?: string;
+    readonly eyebrow?: string;
+    readonly heading?: string;
+    readonly sub?: string;
+    readonly muted?: boolean;
+    readonly items: readonly ApexInfoItem[];
+};
+export type ApexFinalCtaSection = {
+    readonly kind: "final-cta";
+    readonly image?: ApexImage;
+    readonly heading: string;
+    readonly sub?: string;
+    readonly cta: ApexCta;
+};
+/** Escape hatch for an app-specific section: raw, app-authored HTML. */
+export type ApexHtmlSection = {
+    readonly kind: "html";
+    readonly html: string;
+};
+export type ApexSection = ApexHeroSection | ApexFeatureGridSection | ApexPricingGridSection | ApexInfoGridSection | ApexFinalCtaSection | ApexHtmlSection;
+export type ApexHead = {
+    readonly lang: string;
+    readonly title: string;
+    readonly description: string;
+    readonly canonicalUrl?: string;
+    readonly faviconHref?: string;
+    readonly ogImage?: string;
+    /** hreflang alternates for multilingual SEO (e.g. the other language's URL). */
+    readonly alternates?: readonly {
+        readonly hreflang: string;
+        readonly href: string;
+    }[];
+    /** Robots meta content (e.g. "index, follow", "noindex, nofollow"). Omit = no tag. */
+    readonly robots?: string;
+    /** og:site_name — brand name for social shares. */
+    readonly siteName?: string;
+    /** og:locale — e.g. "de_DE", "en_US". */
+    readonly locale?: string;
+    /** twitter:site — @handle for X/Twitter card. */
+    readonly twitterSite?: string;
+    /** URLs for <link rel="preconnect"> hints (Core Web Vitals). */
+    readonly preconnects?: readonly string[];
+    /** Arbitrary JSON-LD structured data (Schema.org). Rendered as-is into <script type="application/ld+json">. */
+    readonly schemaJson?: Record<string, unknown>;
+};
+export type ApexPage = {
+    readonly theme?: ApexTheme;
+    readonly brand: ApexBrand;
+    readonly head: ApexHead;
+    readonly header: ApexHeader;
+    readonly sections: readonly ApexSection[];
+    readonly footer: ApexFooter;
+};
+/** Render just the apex header chrome (brand + nav + actions). Exported so a
+ *  consumer that composes its own page shell (not a full apex page) can reuse
+ *  the identical header — markup stays single-source. */
+export declare function renderApexHeader(h: ApexHeader): string;
+export declare function renderApexHeadTags(head: ApexHead): string;
+export declare function renderApexPage(page: ApexPage): string;
+/** Per-request head metadata (Open-Graph/title/description) for a
+ *  server-rendered HTML shell. Only `title` is required; everything else
+ *  falls back to no tag rather than a placeholder. */
+export type PageHeadMeta = {
+    readonly title: string;
+    readonly description?: string;
+    readonly ogImage?: string;
+    readonly canonicalUrl?: string;
+    readonly siteName?: string;
+    readonly locale?: string;
+};
+export type PageHeadSystemQuery = (type: string, payload: unknown, tenantId: TenantId) => Promise<unknown>;
+export type PageHeadResolver = (input: {
+    readonly path: string;
+    readonly host: string;
+    readonly systemQuery: PageHeadSystemQuery;
+}) => Promise<PageHeadMeta | null>;
+export declare function injectPageHead(html: string, tagsHtml: string): string;
+/** Resolves per-request head metadata and splices it into `html`, capped at
+ *  the shared timeout. Never throws and never changes `html` on a resolver
+ *  error, a `null` resolve, or a timeout — the caller's shell always ships
+ *  unchanged. runProdApp and runDevApp both call this single function, so a
+ *  future change to timeout or fallback semantics has one place to land
+ *  (kumiko-framework#3026). */
+export declare function resolveAndInjectPageHead(html: string, resolvePageHead: PageHeadResolver, input: {
+    readonly path: string;
+    readonly host: string;
+    readonly systemQuery: PageHeadSystemQuery;
+}): Promise<string>;