@cosmicdrift/kumiko-renderer 0.373.0 → 0.377.0

package/dist/components/render-field.js

@@ -1,15 +1,17 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isFormatSpec, SYSTEM_REFERENCE_LABELS, } from "@cosmicdrift/kumiko-framework/ui-types";
-import { applyFormatSpec, currencyDecimals, EMPTY_VALUE_PLACEHOLDER, } from "@cosmicdrift/kumiko-headless";
 import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
-import { createContext, Fragment, useCallback, useContext, useMemo, useState, } from "react";
+import { createContext, Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { useAppFeatures } from "../app/app-features-context.js";
 import { useColumnRenderer } from "../app/column-renderers.js";
 import { extensionSectionName } from "../app/extension-sections.js";
 import { toKebab } from "../app/qn.js";
 import { useReferenceLinkResolver } from "../app/reference-link.js";
+import { evalRowExtractor } from "../app/row-actions.js";
 import { screenAccessAllows } from "../app/screen-access.js";
+import { useOptionalDispatcher } from "../context/dispatcher-context.js";
 import { useUserRoles } from "../context/user-roles-context.js";
+import { applyFormatSpec, currencyDecimals, EMPTY_VALUE_PLACEHOLDER, } from "../headless/index.js";
 import { REFERENCE_COMBOBOX_LIMIT } from "../hooks/reference-limits.js";
 import { useQuery } from "../hooks/use-query.js";
 import { referenceOptionSource } from "../hooks/use-reference-lookup.js";
@@ -23,7 +25,7 @@ import { QueryOptionsSelect } from "./query-options-select.js";
 import { ReferenceCreateDialog } from "./reference-create-dialog.js";
 const AllFieldsRequiredContext = createContext(false);
 export const AllFieldsRequiredProvider = AllFieldsRequiredContext.Provider;
-export function RenderField({ field, issues, onChange, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay = "form", row, changed, layout, accent, }) {
+export function RenderField({ field, issues, onChange, featureName, labelAppendix, fieldAppendix, appendixPlacement, description, status, allIssues, valueDisplay = "form", row, changed, layout, accent, fillDisabled, }) {
     const { Field, Input, Banner, Text, JsonView } = usePrimitives();
     // App-Locale (i18n) für money/date-Inputs — sonst fielen sie auf
     // navigator.language (Browser-Sprache) zurück statt der gewählten
@@ -48,7 +50,20 @@ export function RenderField({ field, issues, onChange, featureName, labelAppendi
     // Komponente gemountet werden (nicht als pure render-Call).
     const control = field.readOnly && field.renderer !== undefined ? (_jsx(FieldRendererOutput, { field: field, renderer: field.renderer, appLocale: appLocale, ...(row !== undefined && { row }) })) : field.type === "embedded" && field.embeddedListCells !== undefined ? (_jsx(EmbeddedListField, { field: field, id: id, onChange: onChange, allIssues: allIssues ?? {}, featureName: featureName ?? "" })) : field.type === "reference" ? (readOnlyText ? (_jsx(ReadOnlyReferenceValue, { field: field, featureName: featureName ?? "" })) : (_jsx(ReferenceInput, { field: field, id: id, hasError: hasError, onChange: onChange, Input: Input, featureName: featureName ?? "" }))) : field.type === "select" && field.selectOptionsQuery !== undefined && !readOnlyText ? (_jsx(QueryOptionsSelect, { field: field, query: field.selectOptionsQuery.query, payload: field.selectOptionsQuery.payload, row: row ?? { [field.field]: field.value }, id: id, hasError: hasError, onChange: onChange })) : field.type === "select" &&
         field.selectOptionsAvailabilityQuery !== undefined &&
-        !readOnlyText ? (_jsx(AvailabilityOptionsSelect, { field: field, query: field.selectOptionsAvailabilityQuery.query, payload: field.selectOptionsAvailabilityQuery.payload, row: row ?? { [field.field]: field.value }, id: id, hasError: hasError, onChange: onChange })) : readOnlyText && !isComplexFieldType(field.type) && !isFileFieldType(field.type) ? (_jsx(Text, { testId: `field-value-${field.field}`, children: readOnlyDisplayText(field, appLocale, t) })) : field.type === "text" && field.writeOnly === true && !readOnlyText ? (_jsx(WriteOnlyTextInput, { field: field, id: id, hasError: hasError, onChange: onChange, changed: changed === true })) : (renderInput({
+        !readOnlyText ? (_jsx(AvailabilityOptionsSelect, { field: field, query: field.selectOptionsAvailabilityQuery.query, payload: field.selectOptionsAvailabilityQuery.payload, row: row ?? { [field.field]: field.value }, id: id, hasError: hasError, onChange: onChange })) : readOnlyText && !isComplexFieldType(field.type) && !isFileFieldType(field.type) ? (_jsx(Text, { testId: `field-value-${field.field}`, children: readOnlyDisplayText(field, appLocale, t) })) : field.type === "text" && field.writeOnly === true && !readOnlyText ? (_jsx(WriteOnlyTextInput, { field: field, id: id, hasError: hasError, onChange: onChange, changed: changed === true })) : field.fillAction !== undefined ? (_jsx(FillActionControl, { field: field, fillAction: field.fillAction, row: row ?? { [field.field]: field.value }, onChange: onChange, disabled: fillDisabled === true, Banner: Banner, renderControl: (fill) => renderInput({
+            field,
+            id,
+            hasError,
+            onChange,
+            Input,
+            appLocale,
+            Banner,
+            Text,
+            JsonView,
+            t,
+            row,
+            fill,
+        }) })) : (renderInput({
         field,
         id,
         hasError,
@@ -63,6 +78,63 @@ export function RenderField({ field, issues, onChange, featureName, labelAppendi
     }));
     return (_jsx(Field, { id: id, label: field.label, required: field.required && field.type !== "boolean" && !allFieldsRequired, ...(issues !== undefined && { issues }), ...(labelAppendix !== undefined && { labelAppendix }), ...(fieldAppendix !== undefined && { fieldAppendix }), ...(appendixPlacement !== undefined && { appendixPlacement }), ...(description !== undefined && { description }), ...(status !== undefined && { status }), ...(changed === true && { changed }), ...(layout !== undefined && { layout }), ...(accent === true && { accent }), testId: `field-${field.field}`, children: control }));
 }
+const NUMERIC_FIELD_TYPES = new Set(["number", "bigInt", "decimal"]);
+// A text field takes a number as its string form; a numeric field takes only a
+// number — a string would be sent as a wrong-typed value.
+function fillValueFor(fieldType, result) {
+    if (NUMERIC_FIELD_TYPES.has(fieldType))
+        return typeof result === "number" ? result : undefined;
+    if (typeof result === "string")
+        return result;
+    return typeof result === "number" ? String(result) : undefined;
+}
+// Owns the query state of a fill button. A separate component because RenderField
+// returns early for hidden fields and the dispatcher hook must not be conditional.
+function FillActionControl({ field, fillAction, row, onChange, disabled, Banner, renderControl, }) {
+    const dispatcher = useOptionalDispatcher();
+    const t = useTranslation();
+    const [busy, setBusy] = useState(false);
+    const [failed, setFailed] = useState(false);
+    // A newer click or an unmount cancels the in-flight query so a late answer
+    // cannot overwrite a value the user has since typed.
+    const activeRun = useRef(null);
+    useEffect(() => () => activeRun.current?.abort(), []);
+    const run = async () => {
+        if (dispatcher === undefined) {
+            setFailed(true);
+            return;
+        }
+        activeRun.current?.abort();
+        const ctrl = new AbortController();
+        activeRun.current = ctrl;
+        setBusy(true);
+        setFailed(false);
+        const payload = fillAction.params === undefined ? {} : evalRowExtractor(fillAction.params, row);
+        const result = await dispatcher.query(fillAction.query, payload, {
+            signal: ctrl.signal,
+        });
+        if (ctrl.signal.aborted)
+            return;
+        setBusy(false);
+        if (!result.isSuccess) {
+            setFailed(true);
+            return;
+        }
+        const value = fillValueFor(field.type, propertyOf(result.data, fillAction.field));
+        if (value === undefined) {
+            setFailed(true);
+            return;
+        }
+        onChange(value);
+    };
+    return (_jsxs(_Fragment, { children: [renderControl({
+                label: fillAction.label,
+                onPress: () => void run(),
+                busy,
+                disabled,
+                testId: `field-fill-${field.field}`,
+            }), failed && (_jsx(Banner, { variant: "error", testId: `field-fill-error-${field.field}`, children: t("kumiko.field.fillAction.failed") }))] }));
+}
 // Wire value of a writeOnly field is `true` (set) / `null` (empty), never the
 // secret. Typing sets a new value; an untouched or emptied input submits
 // nothing / "" which the server reads as "keep". `null` after a loaded `true`
@@ -330,7 +402,7 @@ function resolveFieldIcon(field) {
 // SelectFieldDef.options). Structural types without a widget (embedded,
 // jsonb, multiSelect) render read-only instead of a data-destroying text
 // fallback (#1834); truly unknown scalar types still fall back to text.
-function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner, Text, JsonView, t, row, }) {
+function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner, Text, JsonView, t, row, fill, }) {
     const common = {
         id,
         name: field.field,
@@ -338,6 +410,14 @@ function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner,
         required: field.required,
         hasError,
     };
+    const placeholderProp = field.placeholder !== undefined ? { placeholder: field.placeholder } : {};
+    const prefix = resolveAffix(field.prefix, row);
+    const suffix = resolveAffix(field.suffix, row);
+    const affixProps = {
+        ...(prefix !== undefined && { prefix }),
+        ...(suffix !== undefined && { suffix }),
+        ...(fill !== undefined && { fill }),
+    };
     switch (field.type) {
         // decimal/bigInt are both plain numbers on the wire (fieldToZod:
         // z.number() / z.number().int().safe()) — the number input's onChange
@@ -347,11 +427,11 @@ function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner,
         case "bigInt": {
             const icon = resolveFieldIcon(field);
             const unit = resolveNumberUnit(field.unit, row);
-            return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), locale: appLocale, ...(field.grouping !== undefined && { grouping: field.grouping }), ...(field.type === "bigInt" && { integer: true }), ...(icon !== undefined && { icon }), ...(unit !== undefined && { unit }) }));
+            return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), locale: appLocale, ...(field.grouping !== undefined && { grouping: field.grouping }), ...(field.type === "bigInt" && { integer: true }), ...placeholderProp, ...affixProps, ...(icon !== undefined && { icon }), ...(unit !== undefined && { unit }) }));
         }
         case "decimal": {
             const icon = resolveFieldIcon(field);
-            return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), locale: appLocale, ...(field.grouping !== undefined && { grouping: field.grouping }), ...(icon !== undefined && { icon }) }));
+            return (_jsx(Input, { kind: "number", ...common, value: numberValue(field.value), onChange: (v) => onChange(v), locale: appLocale, ...(field.grouping !== undefined && { grouping: field.grouping }), ...placeholderProp, ...affixProps, ...(icon !== undefined && { icon }) }));
         }
         case "tz":
             return (_jsx(Input, { kind: "tz", ...common, value: stringValue(field.value), onChange: (v) => onChange(v) }));
@@ -414,6 +494,9 @@ function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner,
             if (field.type === "text" && field.format === "password") {
                 return (_jsx(Input, { kind: "password", ...common, value: stringValue(field.value), onChange: (v) => onChange(v) }));
             }
+            if (field.type === "text" && field.format === "month") {
+                return (_jsx(Input, { kind: "month", ...common, value: stringValue(field.value), onChange: (v) => onChange(v) }));
+            }
             // text + unknown scalar type → text input. If TextFieldDef.multiline
             // is set (the view-model carries it), the renderer switches to
             // textarea. longText always renders a textarea — that's the point of
@@ -421,10 +504,10 @@ function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner,
             // only supplies an optional `{ rows }` override for it (#1925).
             if (field.type === "longText" || (field.type === "text" && field.multiline)) {
                 const rows = typeof field.multiline === "object" ? field.multiline.rows : undefined;
-                return (_jsx(Input, { kind: "textarea", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), ...(rows !== undefined && { rows }) }));
+                return (_jsx(Input, { kind: "textarea", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), ...(rows !== undefined && { rows }), ...placeholderProp }));
             }
             const icon = resolveFieldIcon(field);
-            return (_jsx(Input, { kind: "text", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), ...(icon !== undefined && { icon }), ...(field.autoComplete !== undefined && { autoComplete: field.autoComplete }) }));
+            return (_jsx(Input, { kind: "text", ...common, value: stringValue(field.value), onChange: (v) => onChange(v), ...placeholderProp, ...affixProps, ...(icon !== undefined && { icon }), ...(field.autoComplete !== undefined && { autoComplete: field.autoComplete }) }));
         }
     }
 }
@@ -479,6 +562,17 @@ function resolveNumberUnit(unit, row) {
     const trimmed = sibling.trim();
     return trimmed.length > 0 && trimmed.length <= MAX_SIBLING_UNIT_LENGTH ? trimmed : undefined;
 }
+// String affix → used as-is (the view model already translated it). Field
+// affix → the live form value; missing, empty or non-scalar means no affix.
+function resolveAffix(affix, row) {
+    if (affix === undefined)
+        return undefined;
+    if (typeof affix === "string")
+        return affix;
+    const value = row?.[affix.field];
+    const text = typeof value === "number" ? String(value) : value;
+    return typeof text === "string" && text.trim().length > 0 ? text.trim() : undefined;
+}
 function stringArrayOf(value) {
     return Array.isArray(value)
         ? value.filter((item) => typeof item === "string")

package/dist/components/render-list.d.ts

@@ -1,6 +1,6 @@
 import type { EntityDefinition, EntityListScreenDefinition, IconKey } from "@cosmicdrift/kumiko-framework/ui-types";
-import type { ListRowViewModel, Translate } from "@cosmicdrift/kumiko-headless";
 import { type ReactNode } from "react";
+import type { ListRowViewModel, Translate } from "../headless/index.ts";
 import type { ListSort } from "../hooks/use-list-url-state.ts";
 import { type DataTableDateRangeFacet, type DataTableFacet, type DataTableProps, type DataTableRowAction, type DataTableRowActionMode, type DataTableRowGrouping } from "../primitives.tsx";
 import { type ListEmptyStateContent } from "./list-empty-state.tsx";

package/dist/components/render-list.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { computeListViewModel, EMPTY_VALUE_PLACEHOLDER } from "@cosmicdrift/kumiko-headless";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { extensionSectionName, useExtensionSectionComponent } from "../app/extension-sections.js";
 import { useReferenceLinkResolver } from "../app/reference-link.js";
+import { computeListViewModel, EMPTY_VALUE_PLACEHOLDER } from "../headless/index.js";
 import { useReferenceLookup } from "../hooks/use-reference-lookup.js";
 import { useTranslation } from "../i18n.js";
 import { usePageHeaderCompact, usePageHeaderSlotAvailable } from "../page-header-slot.js";
@@ -104,7 +104,7 @@ export function RenderList(props) {
             const labelField = col.refLabelField ?? "id";
             const refEntity = col.refEntity ?? "";
             // Only a row the user can see is linkable: resolved by the server
-            // eagerload or by the lookup query. A multi-reference stays text.
+            // eagerload or by the lookup query. A multi-reference links per entry via linkItemsFor.
             const linkFor = (value, row) => {
                 if (value === null || value === undefined || value === "" || Array.isArray(value)) {
                     return undefined;
@@ -118,6 +118,22 @@ export function RenderList(props) {
                     map?.has(id);
                 return resolved === true ? resolveReferenceLink(refEntity, id) : undefined;
             };
+            const linkItemsFor = (value, row) => {
+                if (!Array.isArray(value) || value.length === 0)
+                    return undefined;
+                const eagerloaded = eagerloadedRef(row, col.field);
+                const eagerById = new Map(Array.isArray(eagerloaded) ? eagerloaded.map((r) => [String(r["id"]), r]) : []);
+                return value.map((v) => {
+                    const id = String(v);
+                    const target = eagerById.get(id);
+                    const label = String(target?.[labelField] ?? map?.get(id) ?? id);
+                    // Only a row the user can see is linkable: server eagerload or lookup query.
+                    const link = target !== undefined || map?.has(id) === true
+                        ? resolveReferenceLink(refEntity, id)
+                        : undefined;
+                    return { id, label, ...(link !== undefined && { link }) };
+                });
+            };
             const renderer = (value, row) => {
                 // Tier 2.7e Server-Eagerload: wenn der Server _refs mit-
                 // schickt, lesen wir den Display-Wert direkt aus der
@@ -142,7 +158,7 @@ export function RenderList(props) {
                 const idStr = String(value);
                 return map?.get(idStr) ?? idStr;
             };
-            return { ...col, renderer, linkFor };
+            return { ...col, renderer, linkFor, linkItemsFor };
         });
     }, [vm.columns, referenceColumns, referenceLookups, resolveReferenceLink]);
     const enrichedVm = useMemo(() => ({
@@ -190,7 +206,7 @@ export function RenderList(props) {
     // Wenn weder onCreate noch ein Override gegeben ist, fällt die
     // DataTable auf den DataTable-Default zurück (`kumiko.list.no-entries`).
     const composedEmptyState = emptyState ??
-        (onCreate !== undefined || emptyContent !== undefined || narrowed ? (_jsx(ListEmptyStateBody, { content: emptyContent, narrowed: narrowed, translate: translate, createButton: onCreate !== undefined && !narrowed ? (_jsx(Button, { variant: "primary", icon: "plus", onClick: onCreate, testId: "render-list-empty-create", children: effectiveCreateLabel })) : undefined })) : undefined);
+        (onCreate !== undefined || emptyContent !== undefined || narrowed ? (_jsx(ListEmptyStateBody, { content: emptyContent, narrowed: narrowed, translate: translate, createButton: onCreate !== undefined && !narrowed && !createInPageHeader ? (_jsx(Button, { variant: "primary", icon: "plus", onClick: onCreate, testId: "render-list-empty-create", children: effectiveCreateLabel })) : undefined })) : undefined);
     // Title-Resolution: ein konventioneller i18n-Key `screen:<id>.title`.
     // Wenn das Bundle den Key kennt, schöner Titel; sonst kommt der
     // screenId selber raus (kein "Untitled"-Fallback — der App-Dev sieht

package/dist/components/write-form-section.d.ts

@@ -1,5 +1,5 @@
-import type { EditWriteFormSectionViewModel, Translate } from "@cosmicdrift/kumiko-headless";
 import { type ReactNode } from "react";
+import type { EditWriteFormSectionViewModel, Translate } from "../headless/index.ts";
 export type WriteFormSectionProps = {
     readonly section: EditWriteFormSectionViewModel;
     readonly featureName: string;

package/dist/components/write-form-section.js

@@ -1,9 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { I18N_KEY_PARAM } from "@cosmicdrift/kumiko-headless";
 import { useEffect, useMemo, useRef, useState } from "react";
 import * as z from "zod";
 import { isPresent, REQUIRED_FIELD_I18N_KEY } from "../app/form-schema.js";
 import { dispatcherErrorText } from "../app/write-failed-error.js";
+import { I18N_KEY_PARAM } from "../headless/index.js";
 import { useForm } from "../hooks/use-form.js";
 import { useTranslation } from "../i18n.js";
 import { STICKY_PRIMARY_ACTION_PROP, usePrimitives } from "../primitives.js";

package/dist/context/dispatcher-context.d.ts

@@ -1,5 +1,5 @@
-import type { Dispatcher, DispatcherStatus } from "@cosmicdrift/kumiko-headless";
 import { type ReactNode } from "react";
+import type { Dispatcher, DispatcherStatus } from "../headless/index.ts";
 import { type QueryPools } from "./query-pool.ts";
 export type DispatcherProviderProps = {
     readonly dispatcher: Dispatcher;

package/dist/format-when.js

@@ -1,4 +1,4 @@
-import { toInstant } from "@cosmicdrift/kumiko-headless";
+import { toInstant } from "./headless/index.js";
 // Shared timestamp formatter for operator screens (audit log, job runs) —
 // falls back to the raw ISO string on an unparseable value instead of "Invalid Date".
 export function formatWhen(value) {

package/dist/headless/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/dist/headless/apex/css.js

@@ -0,0 +1,298 @@
+// Structural CSS for the Apex marketing surface — shared by every app's static
+// landing. Brand TOKEN VALUES (:root custom properties) and @font-face stay
+// app-side (passed as brand.tokensCss / brand.fontFaceCss); this file owns only
+// the structure: layout, grids, cards, buttons, header/footer, responsive.
+//
+// Two themes ship together; the <body class> selects one (see renderApexPage):
+//   - light (default): chrome on light backgrounds — translucent blurred header.
+//   - .apex-dark: header/hero/final-cta/footer sit on --primary with --on-dark
+//     text + inverted buttons (the "dark sandwich"). Requires the app's tokens
+//     to define --on-dark / --on-dark-muted / --on-dark-border.
+//
+// Token divergence is absorbed by CSS fallbacks, not parameters:
+//   --font-mono unset        → .price-amount stays in body font (var(--font-mono, inherit))
+//   --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; }
+  body {
+    font-family: var(--font-body, "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+    background: var(--bg); color: var(--fg); line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    min-height: 100vh; display: flex; flex-direction: column;
+  }
+  main { flex: 1; }
+  a { color: var(--primary); text-decoration: none; }
+  a:hover { color: var(--primary-hover); }
+  h1, h2, h3 { letter-spacing: -0.02em; }
+  .container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
+  .container-narrow { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
+  .btn {
+    display: inline-block; padding: 0.6rem 1.15rem; border-radius: 0.5rem;
+    font-weight: 600; font-size: 0.9375rem; border: 1px solid transparent;
+    cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.05s;
+  }
+  .btn:active { transform: translateY(1px); }
+  .btn-primary { background: var(--primary); color: var(--primary-fg); }
+  .btn-primary:hover { background: var(--primary-hover); color: var(--primary-fg); }
+  .btn-secondary { background: var(--bg-card); color: var(--fg); border-color: var(--border); }
+  .btn-secondary:hover { border-color: var(--fg-muted); color: var(--fg); }
+
+  section { padding: 5rem 0; }
+  .section-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
+  .section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); margin: 0 0 0.75rem; }
+  .section-head p { color: var(--fg-muted); margin: 0; font-size: 1.0625rem; }
+  .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; }
+  .hero-pony { width: 88px; height: 88px; margin: 0 0 1.1rem; display: block; }
+  .hero h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); line-height: 1.08; margin: 0 0 1.1rem; font-weight: 700; }
+  .hero .tagline { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--fg-muted); margin: 0 0 1.75rem; max-width: var(--hero-tagline-max, none); }
+  .hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }
+  .hero-meta { margin-top: 1.5rem; font-size: 0.875rem; color: var(--fg-subtle); }
+  .hero-meta strong { color: var(--fg-muted); font-weight: 600; }
+  .shot-frame { border-radius: 0.75rem; border: 1px solid var(--border); background: var(--bg-card);
+    box-shadow: var(--shadow); overflow: hidden; cursor: zoom-in; }
+  .shot-bar { display: flex; gap: 0.4rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); background: var(--bg-muted); }
+  .shot-bar span { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--border); }
+  .shot-frame img { display: block; width: 100%; height: auto; }
+  .apex-lightbox { border: none; padding: 0; margin: auto; max-width: 95vw; max-height: 90vh;
+    background: transparent; overflow: visible; }
+  .apex-lightbox::backdrop { background: rgba(15, 23, 42, 0.72); }
+  .apex-lightbox__img { display: block; max-width: 90vw; max-height: 85vh; width: auto; height: auto;
+    border-radius: 0.75rem; border: 1px solid var(--border); box-shadow: var(--shadow); }
+  .apex-lightbox__close { position: fixed; top: 1rem; right: 1rem; z-index: 1; width: 2.5rem; height: 2.5rem;
+    border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg-card); color: var(--fg);
+    font-size: 1.5rem; line-height: 1; cursor: pointer; }
+  .apex-lightbox__close:hover { background: var(--bg-muted); }
+  .apex-lightbox__prev, .apex-lightbox__next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 1;
+    width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: 0.5rem;
+    background: var(--bg-card); color: var(--fg); font-size: 1.75rem; line-height: 1; cursor: pointer; }
+  .apex-lightbox__prev { left: 1rem; }
+  .apex-lightbox__next { right: 1rem; }
+  .apex-lightbox__prev:hover, .apex-lightbox__next:hover { background: var(--bg-muted); }
+  .apex-lightbox__prev[hidden], .apex-lightbox__next[hidden] { display: none; }
+  .apex-dark .apex-lightbox__prev, .apex-dark .apex-lightbox__next { background: var(--on-dark); color: var(--primary); border-color: var(--on-dark-border); }
+  .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; }
+  .feature { background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.75rem; }
+  .feature-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.6rem; display: flex; align-items: center;
+    justify-content: center; background: color-mix(in srgb, var(--primary) 9%, transparent); color: var(--primary); margin-bottom: 1rem; }
+  .feature-icon svg { width: 1.35rem; height: 1.35rem; }
+  .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);
+    border-radius: 0.75rem; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; }
+  .price-card--featured { border-color: var(--primary); box-shadow: var(--shadow); }
+  .price-badge { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%);
+    background: var(--accent, var(--primary)); color: var(--accent-fg, var(--primary-fg)); font-size: 0.75rem; font-weight: 700;
+    padding: 0.2rem 0.7rem; border-radius: 999px; white-space: nowrap; }
+  .price-card h3 { margin: 0; font-size: 1.25rem; }
+  .price-tagline { margin: 0; color: var(--fg-subtle); font-size: 0.875rem; }
+  .price-amount { font-size: 2rem; font-weight: 700; font-family: var(--font-mono, inherit); }
+  .price-amount span { font-size: 0.9375rem; font-weight: 500; color: var(--fg-subtle); font-family: inherit; }
+  .price-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
+  .price-list li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; color: var(--fg-muted); }
+  .price-list li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 0.7rem; height: 0.4rem;
+    border-left: 2px solid var(--status-ok); border-bottom: 2px solid var(--status-ok); transform: rotate(-45deg); }
+  .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 = `
+  header { position: sticky; top: 0; z-index: 10;
+    background: color-mix(in srgb, var(--bg) 85%, transparent);
+    backdrop-filter: saturate(140%) blur(8px);
+    border-bottom: 1px solid var(--border); }
+  .nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; }
+  .brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.125rem; color: var(--fg); }
+  .brand a { color: var(--fg); display: inline-flex; align-items: center; gap: 0.55rem; }
+  .brand a:hover { color: var(--fg); }
+  .brand img { width: 1.7rem; height: 1.7rem; border-radius: 0.4rem; }
+  .nav-links { display: flex; gap: 1.5rem; align-items: center; font-size: 0.9375rem; }
+  .nav-links a { color: var(--fg-muted); }
+  .nav-links a:hover { color: var(--fg); }
+  .nav-actions { display: flex; gap: 0.75rem; align-items: center; font-size: 0.9375rem; }
+  .nav-actions > a:not(.btn) { color: var(--fg-muted); }
+  .nav-actions > a:not(.btn):hover { color: var(--fg); }
+  @media (max-width: 640px) { .nav-links { display: none; } }
+
+  footer { border-top: 1px solid var(--border); color: var(--fg-subtle); padding: 3.5rem 0 2.5rem; font-size: 0.9rem; }
+  .footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.6fr repeat(var(--footer-cols, 2), 1fr); }
+  .footer-brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; color: var(--fg); margin-bottom: 0.75rem; }
+  .footer-brand img { width: 1.6rem; height: 1.6rem; border-radius: 0.4rem; }
+  .footer-tagline { color: var(--fg-subtle); max-width: 34ch; margin: 0; }
+  .footer-col h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-subtle); margin: 0 0 0.85rem; }
+  .footer-col a { display: block; color: var(--fg-muted); margin-bottom: 0.5rem; }
+  .footer-col a:hover { color: var(--fg); }
+  .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 = `
+  .apex-dark header { background: var(--primary); backdrop-filter: none; border-bottom: 1px solid var(--on-dark-border); }
+  .apex-dark .brand, .apex-dark .brand a, .apex-dark .brand a:hover { color: var(--on-dark); }
+  .apex-dark .nav-links a { color: var(--on-dark-muted); }
+  .apex-dark .nav-links a:hover { color: var(--on-dark); }
+  .apex-dark .nav-actions > a:not(.btn) { color: var(--on-dark-muted); }
+  .apex-dark .nav-actions > a:not(.btn):hover { color: var(--on-dark); }
+  .apex-dark header .btn-primary { background: var(--on-dark); color: var(--primary); }
+  .apex-dark header .btn-primary:hover { background: rgba(255,255,255,0.85); color: var(--primary-hover); }
+
+  .apex-dark .hero { background: var(--primary); color: var(--on-dark); }
+  .apex-dark .hero h1 { color: var(--on-dark); }
+  .apex-dark .hero .tagline { color: var(--on-dark-muted); }
+  .apex-dark .hero .btn-primary, .apex-dark .final-cta .btn-primary { background: var(--on-dark); color: var(--primary); }
+  .apex-dark .hero .btn-primary:hover, .apex-dark .final-cta .btn-primary:hover { background: rgba(255,255,255,0.85); color: var(--primary-hover); }
+  .apex-dark .hero .btn-secondary { background: rgba(255,255,255,0.08); color: var(--on-dark); border-color: rgba(255,255,255,0.30); }
+  .apex-dark .hero .btn-secondary:hover { background: rgba(255,255,255,0.16); color: var(--on-dark); border-color: rgba(255,255,255,0.5); }
+  .apex-dark .hero-meta { color: rgba(255,255,255,0.55); }
+  .apex-dark .hero-meta strong { color: var(--on-dark-muted); }
+
+  .apex-dark .final-cta { background: var(--primary); color: var(--on-dark); }
+  .apex-dark .final-cta h2 { color: var(--on-dark); }
+  .apex-dark .final-cta p { color: var(--on-dark-muted); }
+
+  .apex-dark footer { background: var(--primary); color: var(--on-dark-muted); border-top: none; }
+  .apex-dark .footer-brand { color: var(--on-dark); }
+  .apex-dark .footer-tagline { color: var(--on-dark-muted); }
+  .apex-dark .footer-col h4 { color: var(--on-dark-muted); }
+  .apex-dark .footer-col a { color: var(--on-dark-muted); }
+  .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; }
+    .feature-grid { grid-template-columns: repeat(2, 1fr); }
+    .price-grid { grid-template-columns: repeat(2, 1fr); }
+    .footer-grid { grid-template-columns: 1fr 1fr; }
+  }
+  @media (max-width: 640px) {
+    section { padding: 3.5rem 0; }
+    .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
+// its content unpainted regardless of a child's own `display`), so two
+// copies sidestep that instead of fighting it. Exported standalone so a
+// consumer rendering its own header chrome can include just this. A
+// consumer using renderApexHeader() outside renderApexPage also needs
+// APEX_NAV_TOGGLE_RESPONSIVE_CSS below for the mobile toggle to open.
+export const APEX_NAV_MENU_CSS = `
+  .nav-toggle { display: none; }
+  .nav-toggle__trigger { display: none; align-items: center; justify-content: center;
+    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; cursor: pointer;
+    color: var(--fg-muted); list-style: none; }
+  .nav-toggle__trigger::-webkit-details-marker { display: none; }
+  .nav-toggle__trigger:hover { color: var(--fg); background: var(--bg-muted); }
+  .nav-toggle__trigger svg { width: 1.35rem; height: 1.35rem; }
+  .apex-dark .nav-toggle__trigger { color: var(--on-dark-muted); }
+  .apex-dark .nav-toggle__trigger:hover { color: var(--on-dark); background: rgba(255,255,255,0.08); }
+
+  .nav-menu { position: relative; display: inline-flex; }
+  .nav-menu__trigger { display: inline-flex; align-items: center; gap: 0.3rem;
+    font: inherit; font-size: 0.9375rem; color: var(--fg-muted);
+    cursor: pointer; list-style: none; }
+  .nav-menu__trigger::-webkit-details-marker { display: none; }
+  .nav-menu__trigger:hover { color: var(--fg); }
+  .nav-menu__chev { display: inline-flex; transition: transform 0.15s; opacity: 0.7; }
+  .nav-menu__chev svg { width: 0.95em; height: 0.95em; }
+  .nav-menu[open] .nav-menu__chev { transform: rotate(180deg); }
+  .nav-menu__panel { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 20;
+    min-width: 21rem; padding: 0.5rem; background: var(--bg-card); color: var(--fg);
+    border: 1px solid var(--border); border-radius: 0.75rem; box-shadow: var(--shadow);
+    flex-direction: column; gap: 0.125rem; }
+  .nav-menu[open] .nav-menu__panel { display: flex; }
+  .nav-menu__item { display: flex; gap: 0.75rem; align-items: flex-start;
+    padding: 0.6rem 0.7rem; border-radius: 0.5rem; color: var(--fg); }
+  .nav-menu__item:hover { background: var(--bg-muted); color: var(--fg); }
+  .nav-menu__icon { flex: none; display: inline-flex; align-items: center; justify-content: center;
+    width: 2rem; height: 2rem; border-radius: 0.5rem;
+    background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
+  .nav-menu__icon svg { width: 1.1rem; height: 1.1rem; }
+  .nav-menu__text { display: flex; flex-direction: column; gap: 0.1rem; }
+  .nav-menu__title { font-weight: 600; font-size: 0.9rem; line-height: 1.2; }
+  .nav-menu__desc { font-size: 0.8rem; color: var(--fg-muted); line-height: 1.35; }
+  .nav-menu__sep { height: 1px; background: var(--border); margin: 0.375rem 0.3rem; }
+  .nav-menu__more { display: inline-flex; padding: 0.4rem 0.7rem; font-size: 0.85rem; font-weight: 600; color: var(--primary); }
+  .nav-menu__more:hover { color: var(--primary-hover); }
+  .apex-dark .nav-menu__trigger { color: var(--on-dark-muted); }
+  .apex-dark .nav-menu__trigger:hover { color: var(--on-dark); }
+  /* The panel is a light popover; its links must NOT inherit the dark-chrome
+     nav-link color (.apex-dark .nav-links a, specificity 0,2,1) or a consumer's
+     own .nav-links a. Pin both link types with matching specificity (0,2,1) so
+     titles + the footer link stay readable in the dark theme. */
+  .nav-menu__panel a.nav-menu__item { color: var(--fg); }
+  .nav-menu__panel a.nav-menu__item:hover { color: var(--fg); }
+  .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
+// APEX_NAV_MENU_CSS, without pulling in the rest of RESPONSIVE's page-level
+// grid breakpoints. The two "show" rules use the `.nav ` prefix (matching
+// renderApexHeader's `<div class="container nav">` wrapper) to raise their
+// specificity above APEX_NAV_MENU_CSS's bare `.nav-toggle`/`.nav-toggle__trigger`
+// "display: none" defaults — that makes them win regardless of concatenation
+// order, since a standalone consumer controls the order, not this file.
+// Also declares `.nav { position: relative; }`: the open dropdown positions
+// itself against .nav (`top/left/right` below), and renderApexPage's own
+// CHROME_LIGHT already sets that, but a standalone consumer's own header CSS
+// generally doesn't — without it the dropdown would anchor to the viewport
+// instead of the header and open off-screen. Redeclaring it here is a no-op
+// inside APEX_STRUCTURAL_CSS (same value, harmless if repeated).
+export const APEX_NAV_TOGGLE_RESPONSIVE_CSS = `
+  @media (max-width: 640px) {
+    .nav { position: relative; }
+    .nav .nav-toggle { display: inline-flex; }
+    .nav .nav-toggle__trigger { display: inline-flex; }
+    .nav-toggle[open] > .nav-links { display: flex; flex-direction: column; align-items: stretch;
+      gap: 0.25rem; position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; z-index: 30;
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.75rem;
+      box-shadow: var(--shadow); padding: 0.75rem; }
+    .nav-toggle[open] > .nav-links > a { color: var(--fg); padding: 0.4rem 0.25rem; }
+    .nav-toggle[open] > .nav-links > a:hover { color: var(--fg); }
+    .nav-toggle .nav-menu { display: block; }
+    .nav-toggle .nav-menu__panel { position: static; min-width: 0;
+      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;