@terpjs/react-core 0.6.1 → 0.8.0

package/src/icons.tsx

@@ -1,4 +1,8 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
+
+import { injectTerpStyles } from "./styles";
+
+injectTerpStyles();
 
 /**
  * The dependency-free icon layer: a small set of inline SVG glyphs the shell's
@@ -77,6 +81,30 @@ export const ICON_GLYPHS: Record<string, ReactNode> = {
       <path d="M8 21h8M12 17v4" />
     </svg>
   ),
+  // The three glyphs below exist for the named themes. `moon` and `sun` were already
+  // taken by dark and light, and a theme picker where two entries share a glyph is a
+  // picker whose icons carry no information.
+  "moon-stars": (
+    <svg {...svgProps}>
+      <path d="M20.5 15.6A8 8 0 0 1 9.4 4.5 8.4 8.4 0 1 0 20.5 15.6Z" />
+      <path d="M17 3v3M15.5 4.5h3M20.5 8v2M19.5 9h2" />
+    </svg>
+  ),
+  sunset: (
+    <svg {...svgProps}>
+      <path d="M12 4v2M5.6 7.6l1.4 1.4M17 9l1.4-1.4M3 15h1.5M19.5 15H21" />
+      <path d="M8 15a4 4 0 0 1 8 0" />
+      <path d="M3 19h18" />
+    </svg>
+  ),
+  contrast: (
+    <svg {...svgProps}>
+      <circle cx="12" cy="12" r="9" />
+      {/* Filled half, so the glyph reads as contrast rather than as a plain circle.
+          Stroked shapes elsewhere use `currentColor`; so does this fill. */}
+      <path d="M12 3a9 9 0 0 0 0 18Z" fill="currentColor" stroke="none" />
+    </svg>
+  ),
   document: (
     <svg {...svgProps}>
       <path d="M6 3h8l4 4v14H6Z" />
@@ -407,31 +435,6 @@ export const ICON_GLYPHS: Record<string, ReactNode> = {
   ),
 };
 
-const navIconStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "1.25rem",
-  height: "1.25rem",
-  flex: "0 0 1.25rem",
-  fontSize: "1rem",
-  lineHeight: 1,
-};
-
-const fallbackStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "100%",
-  height: "100%",
-  borderRadius: "var(--radius-sm, 4px)",
-  background: "var(--color-brand-primary-soft, var(--color-neutral-200))",
-  color: "var(--color-brand-primary, var(--color-neutral-700))",
-  fontSize: "0.7em",
-  fontWeight: "var(--font-weight-medium)" as CSSProperties["fontWeight"],
-  lineHeight: 1,
-};
-
 export interface NavIconProps {
   /** Glyph name (a `NavItem.icon` value); unknown / missing falls back to the initial. */
   name?: string;
@@ -446,9 +449,9 @@ export interface NavIconProps {
 export function NavIcon({ name, label }: NavIconProps) {
   const glyph = name !== undefined ? ICON_GLYPHS[name] : undefined;
   return (
-    <span aria-hidden="true" data-terp="nav-icon" style={navIconStyle}>
+    <span aria-hidden="true" data-terp="nav-icon">
       {glyph ?? (
-        <span style={fallbackStyle}>
+        <span data-terp="nav-icon-fallback">
           {(label[0] ?? "?").toUpperCase()}
         </span>
       )}
@@ -487,15 +490,8 @@ export function Icon({ name, size = "1em", title }: IconProps) {
       aria-hidden={labelled ? undefined : true}
       role={labelled ? "img" : undefined}
       aria-label={labelled ? title : undefined}
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: px,
-        height: px,
-        lineHeight: 1,
-        color: "inherit",
-      }}
+      data-terp="icon"
+      style={{ width: px, height: px }}
     >
       {glyph}
     </span>

package/src/index.ts

@@ -30,9 +30,6 @@ export type { RequireAuthProps } from "./RequireAuth";
 export { visibleNav } from "./nav";
 export {
   AppShell,
-  NAV_LINK_STYLE,
-  NAV_LINK_COLLAPSED_STYLE,
-  NAV_LINK_ACTIVE_STYLE,
   SIDEBAR_STORAGE_KEY,
 } from "./AppShell";
 export type {

package/src/layout.test.tsx

@@ -7,7 +7,7 @@ import { DetailList, Stack } from "./layout";
 afterEach(cleanup);
 
 describe("Stack", () => {
-  it("renders a flex column with a token gap by default", () => {
+  it("names a column at the default gap, with no inline styling", () => {
     render(
       <Stack data-testid="stack">
         <span>a</span>
@@ -16,24 +16,39 @@ describe("Stack", () => {
     );
     const el = screen.getByTestId("stack");
     expect(el.tagName).toBe("DIV");
-    expect(el.style.display).toBe("flex");
-    expect(el.style.flexDirection).toBe("column");
-    expect(el.style.gap).toBe("var(--space-2)");
+    expect(el).toHaveAttribute("data-direction", "column");
+    expect(el).toHaveAttribute("data-gap", "2");
+    expect(el).not.toHaveAttribute("data-wrap");
+    expect(el.getAttribute("style")).toBeNull();
   });
 
-  it("renders the requested element with direction, gap, alignment and wrap", () => {
+  it("renders the requested element and names direction, gap and wrap", () => {
     render(
-      <Stack data-testid="row" as="section" direction="row" gap={4} align="center" justify="space-between" wrap>
+      <Stack data-testid="row" as="section" direction="row" gap={4} wrap>
         <span>a</span>
       </Stack>,
     );
     const el = screen.getByTestId("row");
     expect(el.tagName).toBe("SECTION");
-    expect(el.style.flexDirection).toBe("row");
-    expect(el.style.gap).toBe("var(--space-4)");
+    expect(el).toHaveAttribute("data-direction", "row");
+    expect(el).toHaveAttribute("data-gap", "4");
+    expect(el).toHaveAttribute("data-wrap", "true");
+    expect(el.getAttribute("style")).toBeNull();
+  });
+
+  it("keeps alignment inline, because it is an open set of CSS keywords", () => {
+    // align/justify accept any alignment keyword, so they cannot become a rule per value
+    // without inventing a vocabulary CSS already has (ADR 0094). They stay inline, and
+    // the geometry attributes stay attributes — the two halves of the same element.
+    render(
+      <Stack data-testid="aligned" align="center" justify="space-between">
+        <span>a</span>
+      </Stack>,
+    );
+    const el = screen.getByTestId("aligned");
     expect(el.style.alignItems).toBe("center");
     expect(el.style.justifyContent).toBe("space-between");
-    expect(el.style.flexWrap).toBe("wrap");
+    expect(el.style.display).toBe("");
   });
 
   it("works as a form (submit handler fires)", () => {

package/src/layout.tsx

@@ -38,16 +38,27 @@ export function Stack({
   wrap = false,
   ...rest
 }: StackProps) {
-  const style: CSSProperties = {
-    display: "flex",
-    flexDirection: direction,
-    gap: `var(--space-${gap})`,
-    margin: 0,
-    ...(align !== undefined ? { alignItems: align } : undefined),
-    ...(justify !== undefined ? { justifyContent: justify } : undefined),
-    ...(wrap ? { flexWrap: "wrap" } : undefined),
-  };
-  return <Component {...rest} data-terp="stack" style={style} />;
+  // `direction`, `gap` and `wrap` are closed sets, so they are attributes the sheet keys
+  // on. `align` and `justify` take any alignment keyword CSS accepts, so they stay inline
+  // rather than turning an open vocabulary into a rule per value (ADR 0094). Undefined on
+  // both means no style attribute at all.
+  const alignment: CSSProperties | undefined =
+    align === undefined && justify === undefined
+      ? undefined
+      : {
+          ...(align !== undefined ? { alignItems: align } : undefined),
+          ...(justify !== undefined ? { justifyContent: justify } : undefined),
+        };
+  return (
+    <Component
+      {...rest}
+      data-terp="stack"
+      data-direction={direction}
+      data-gap={String(gap)}
+      data-wrap={wrap ? "true" : undefined}
+      style={alignment}
+    />
+  );
 }
 
 export interface DetailItem {
@@ -62,14 +73,6 @@ export interface DetailListProps extends Omit<HTMLAttributes<HTMLDListElement>,
   items: readonly DetailItem[];
 }
 
-const detailListStyle: CSSProperties = {
-  margin: 0,
-  display: "grid",
-  gap: "var(--space-1)",
-};
-const detailTermStyle: CSSProperties = { display: "inline", fontWeight: "var(--font-weight-medium)" };
-const detailValueStyle: CSSProperties = { display: "inline", margin: 0 };
-
 /**
  * Token-styled label/value pairs as a semantic `<dl>` — record metadata on a detail page,
  * an expanded row's summary. Centralizes the "Label: value" pattern so modules never
@@ -78,11 +81,11 @@ const detailValueStyle: CSSProperties = { display: "inline", margin: 0 };
 export function DetailList({ items, ...rest }: DetailListProps) {
   const text = useUiText();
   return (
-    <dl {...rest} data-terp="detail-list" style={detailListStyle}>
+    <dl {...rest} data-terp="detail-list">
       {items.map((item, index) => (
         <div key={index}>
-          <dt style={detailTermStyle}>{text(item.label)}: </dt>
-          <dd style={detailValueStyle}>{item.value}</dd>
+          <dt data-terp="detail-list-term">{text(item.label)}: </dt>
+          <dd data-terp="detail-list-value">{item.value}</dd>
         </div>
       ))}
     </dl>

package/src/layoutContract.test.tsx

@@ -21,6 +21,9 @@ import {
 import { OverviewPage } from "./OverviewPage";
 import { Page } from "./Page";
 import { DetailList, Stack } from "./layout";
+import { PageActions } from "./PageActions";
+import { ThemeProvider, ThemeToggle } from "./theme";
+import { Button } from "./ui/Button";
 import { Card } from "./ui/Card";
 
 afterEach(cleanup);
@@ -179,3 +182,95 @@ describe("runtime slot enforcement", () => {
     expect(verifySlotChildren("standard", "Page", [])).toBeNull();
   });
 });
+
+// The styling migration (ADR 0094) is renaming rendered roots: components that used to emit
+// an unmarked <div>, or to borrow Popover's `popover`, now name themselves. Every one of those
+// names is read by this check, because the check IS the marker join — so the question is not
+// whether the names look sensible but whether any slot's verdict moved.
+//
+// It did not, and the reason is worth stating rather than re-derived: verifySlotChildren
+// refuses a direct body-slot child whose data-terp is not in the slot's allow table, and a
+// missing attribute is refused too (`marker === null`). None of the new names is in any table,
+// and neither was the unmarked element each replaced. So each of these was refused before the
+// migration and is refused after it. What changed is the MESSAGE — describeElement now reports
+// a named component instead of a bare tag, which is strictly more useful to the person reading
+// the refusal, and is also a string a test could have pinned.
+describe("layout contract survives the roots the styling migration renames", () => {
+  it("still refuses a chrome menu in a governed body, and now names it", async () => {
+    underContract(
+      // The provider renders no element of its own, so the slot's direct child is still the
+      // toggle. Without it ThemeToggle returns null and the body is empty — which passes for
+      // no reason at all.
+      <ThemeProvider>
+        <OverviewPage title="Records">
+          <ThemeToggle variant="stacked" />
+        </OverviewPage>
+      </ThemeProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId("refused").textContent).toBe(
+        slotViolationMessage("standard", "OverviewPage", '<div data-terp="theme-toggle">'),
+      );
+    });
+  });
+
+  it("still refuses an action cluster in a governed body, and now names it", async () => {
+    underContract(
+      <DetailPage title="Record 1" parents={[{ label: "Records", to: "/records" }]}>
+        <PageActions primary={<Button>Publish</Button>} />
+      </DetailPage>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId("refused").textContent).toBe(
+        slotViolationMessage("standard", "DetailPage", '<div data-terp="page-actions">'),
+      );
+    });
+  });
+
+  it("keeps every marker the allow tables name out of the migration's way", () => {
+    // The tables are the audit surface: a rename of one of THESE would widen or close a slot
+    // silently, so they are the markers the migration may not touch without changing both
+    // halves of the contract. Asserted as a set so an addition has to be deliberate.
+    const named = new Set(
+      Object.values(LAYOUT_CONTRACTS.standard!.slots).flatMap((slot) =>
+        Object.values(slot.components),
+      ),
+    );
+    expect([...named].sort()).toEqual([
+      "alert",
+      "card",
+      "dataview",
+      "detail-list",
+      "dialog",
+      "empty-state",
+      "error-state",
+      "hubcard",
+      "loading-state",
+      "module-nav",
+      "resource-list",
+      "stack",
+      "tabs",
+    ]);
+  });
+
+  it("passes a governed body whose children are still allowed components", async () => {
+    // The other direction: the migration must not have widened anything either. A Stack and a
+    // Card are allowed, and they stay allowed with their markers unchanged.
+    underContract(
+      <ThemeProvider>
+        <DetailPage title="Record 1" parents={[{ label: "Records", to: "/records" }]}>
+          <Card title="A section">body</Card>
+          <Stack>
+            <ThemeToggle variant="stacked" />
+          </Stack>
+        </DetailPage>
+      </ThemeProvider>,
+    );
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    // And the toggle really did render, or this asserts nothing.
+    expect(document.querySelector('[data-terp="theme-toggle"]')).not.toBeNull();
+    // Nested inside an allowed container is sanctioned composition — the check reads direct
+    // children only, which is what makes a marked root safe to put anywhere below one.
+    expect(screen.queryByTestId("refused")).toBeNull();
+  });
+});

package/src/locale.tsx

@@ -67,6 +67,9 @@ export const LOCALE_NL: LocaleCatalog = {
     theme: "Thema",
     themeLight: "Licht",
     themeDark: "Donker",
+    themeMidnight: "Middernacht",
+    themeTwilight: "Schemering",
+    themeContrast: "Hoog contrast",
     themeSystem: "Systeem",
     language: "Taal",
     admin: "Beheer",
@@ -215,8 +218,28 @@ export function LanguageSwitcher({ variant = "stacked" }: LanguageSwitcherProps)
   if (context === null || context.locales.length < 2) {
     return null;
   }
+  // Hoisted out of the attribute rather than inlined as `variant === "inline"`, and not for
+  // readability: the marker inventory scanner reads every string literal inside a
+  // `data-terp={…}` expression as a marker, so the comparison's own "inline" was picked up as
+  // a component marker that nothing styles. Keep marker expressions to marker literals.
+  const isInline = variant === "inline";
   const menu = (
-    <Menu trigger={<Icon name="globe" size="1.15rem" />} triggerLabel={strings.language}>
+    <Menu
+      // Claim the root ONLY when this Menu is the root, which is the inline variant. The
+      // stacked variant renders its own div and puts the menu inside it, so stamping the
+      // same marker unconditionally put it on BOTH elements — and the inner wrapper then
+      // matched the stacked grid rule instead of the popover wrapper's geometry. The
+      // baselines did not catch that: a one-child grid and a one-child inline-flex box
+      // shrink-wrap to the same pixels, so it was wrong and invisible at the same time.
+      data-terp={isInline ? "language-switcher" : undefined}
+      data-variant={isInline ? "inline" : undefined}
+      // Unconditional, unlike the root marker: the panel is the same panel in both variants, so
+      // a rule for it must reach both. Deriving the owner from the conditional root marker made
+      // this panel "language-switcher" when inline and "popover" when stacked.
+      data-owner="language-switcher"
+      trigger={<Icon name="globe" size="1.15rem" />}
+      triggerLabel={strings.language}
+    >
       {({ close }) => (
         <>
           {context.locales.map((code) => (
@@ -234,12 +257,12 @@ export function LanguageSwitcher({ variant = "stacked" }: LanguageSwitcherProps)
       )}
     </Menu>
   );
-  if (variant === "inline") {
+  if (isInline) {
     return menu;
   }
   return (
-    <div style={{ display: "grid", justifyItems: "start", gap: "var(--space-1)", fontSize: "var(--font-size-sm)" }}>
-      <span style={{ color: "var(--color-neutral-600)" }}>{strings.language}</span>
+    <div data-terp="language-switcher" data-variant="stacked">
+      <span data-terp="language-switcher-label">{strings.language}</span>
       {menu}
     </div>
   );