@godxjp/ui 28.12.0 → 29.0.0

package/dist/lib/control-styles.d.ts

@@ -1,5 +1,5 @@
 /** Shared control sizing — reads `--control-height`, `--font-size-*` from density / theme. */
-export declare const controlMultilineClass = "ui-control-multiline aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] border-input bg-background ring-offset-background placeholder:text-muted-foreground";
+export declare const controlMultilineClass = "ui-control-multiline ui-control-outlined-surface aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] ring-offset-background placeholder:text-muted-foreground";
 /**
  * Multiline control with its own chrome removed, for a textarea EMBEDDED in a surface that already
  * draws the box — a chat composer inside a Card, an inline edit cell, a comment box in a panel.
@@ -9,10 +9,10 @@ export declare const controlMultilineGhostClass = "ui-control-multiline data-[st
 /**
  * Multiline control drawn as antd's `filled` variant — a tinted surface instead of a boundary.
  *
- * It is a SEPARATE string rather than `controlMultilineClass` plus a modifier because
- * `bg-background` lives in `@layer utilities`, which outranks every component-layer rule: a
- * `.ui-control--filled` appended to the outlined list would be silently overpainted and no gate
- * would catch it. The two lists differ only in which chrome utilities they carry.
+ * It is a SEPARATE string rather than `controlMultilineClass` plus a modifier because the two
+ * surfaces are alternatives, not a base plus a modifier: appending `.ui-control--filled` to the
+ * outlined list would put two same-layer rules on one element and leave the winner to source order.
+ * The two lists differ only in which chrome class they carry.
  */
 export declare const controlMultilineFilledClass = "ui-control-multiline ui-control--filled aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] ring-offset-background placeholder:text-muted-foreground";
 /**
@@ -47,7 +47,15 @@ export declare const controlOpenRingClass = "ui-control-trigger";
  * The clamp keeps it to one line, so a wrappable value cannot grow the control.
  */
 export declare const controlTriggerBaseClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis";
-export declare const controlTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis border-input bg-background";
+/**
+ * The trigger WITH the resting surface — `.ui-control-outlined-surface`, which paints the identical
+ * border and fill from `--control-surface-border-color` / `--control-surface-background`.
+ *
+ * It used to be the two Tailwind utilities `border-input bg-background`, and `@layer utilities`
+ * outranks `@layer components`, so those two tokens could not reach it (gh#880). The painted result
+ * is unchanged; what changed is that a theme can now reach it.
+ */
+export declare const controlTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis ui-control-outlined-surface";
 /** `controlTriggerBaseClass` + the token-driven surface — the select-family trigger. */
 export declare const controlSurfaceTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis ui-control-surface";
 export declare const controlIconClass = "size-[length:var(--control-height)] shrink-0";
@@ -59,15 +67,27 @@ export declare const tableHeadHeightClass = "h-[length:var(--table-row-height)]"
 export declare const tableCellPaddingClass = "py-[length:var(--table-cell-padding-y)]";
 /** Semantic status / badge tones — always use tokens, never raw Tailwind palette. The TEXT uses the
  * AA-strong status colours (text-*-strong, darker than the fill) so a small status label clears
- * WCAG AA on the soft tint; the border/fill keep the brighter wa-iro role. */
-export declare const toneSuccessClass = "border-success/30 bg-success/10 text-success-strong";
-export declare const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-strong";
-export declare const toneInfoClass = "border-info/30 bg-info/10 text-info-strong";
+ * WCAG AA on the soft tint; the border keeps the brighter wa-iro role.
+ *
+ * THE FILL IS AN ARBITRARY PROPERTY, NOT `bg-success/10`, AND THAT IS THE WHOLE OF gh#866 HERE.
+ * `bg-<role>/10` can only ever be the role at 10% — a derivation — so a brand that ships an
+ * independently chosen pale surface (`--success #126342` with `--success-soft #E8F5EF`, a mint
+ * that is not that green at any alpha) could not reach the chip. `[background-color:…]` is the
+ * same utility layer and the same specificity as the class it replaces, so nothing about the
+ * cascade moves; it just reads `--surface-<role>` first and falls back to the wash Tailwind itself emits,
+ * `color-mix(in oklab, … 10%, transparent)` — the verbose spelling is deliberate, because
+ * `hsl(var(--success) / 0.1)` rasterises one 8-bit step off it on `warning` (252,245,225 vs
+ * 252,246,225 over the page ground) and "near enough" is not a default this repo ships.
+ * Written at the CALL SITE rather than bound at `:root`, per docs/TOKENS.md · "Role-mirror knobs
+ * MUST be `initial`", so a scoped `[data-tenant]` reaches it instead of freezing on `<html>`. */
+export declare const toneSuccessClass = "border-success/30 [background-color:var(--surface-success,color-mix(in_oklab,hsl(var(--success))_10%,transparent))] text-success-strong";
+export declare const toneWarningClass = "border-warning/30 [background-color:var(--surface-warning,color-mix(in_oklab,hsl(var(--warning))_10%,transparent))] text-warning-strong";
+export declare const toneInfoClass = "border-info/30 [background-color:var(--surface-info,color-mix(in_oklab,hsl(var(--info))_10%,transparent))] text-info-strong";
 /** Soft BRAND pill — a tinted primary tone (border/fill keep the brand role; the TEXT uses the
  * AA-strong brand colour `text-primary-strong`, darker than the fill, so a small brand label clears
  * WCAG AA on the soft tint — `text-primary` alone is only 4.04:1 in light). For a SOLID brand fill
  * use the Badge `default` variant instead. */
 export declare const tonePrimaryClass = "border-primary/30 bg-primary/10 text-primary-strong";
-export declare const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-error-strong";
+export declare const toneDestructiveClass = "border-destructive/30 [background-color:var(--surface-destructive,color-mix(in_oklab,hsl(var(--destructive))_10%,transparent))] text-error-strong";
 export declare const toneMutedClass = "border-border bg-muted text-muted-foreground";
 export declare const toneNeutralClass = "border-border bg-muted text-muted-foreground";

package/dist/lib/control-styles.js

@@ -1,9 +1,9 @@
-const controlMultilineClass = "ui-control-multiline aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] border-input bg-background ring-offset-background placeholder:text-muted-foreground";
+const controlMultilineClass = "ui-control-multiline ui-control-outlined-surface aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] ring-offset-background placeholder:text-muted-foreground";
 const controlMultilineGhostClass = "ui-control-multiline data-[status=error]:border-destructive data-[status=warning]:border-warning w-full min-h-0 border-0 bg-transparent shadow-none placeholder:text-muted-foreground focus-visible:ring-0";
 const controlMultilineFilledClass = "ui-control-multiline ui-control--filled aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] ring-offset-background placeholder:text-muted-foreground";
 const controlOpenRingClass = "ui-control-trigger";
 const controlTriggerBaseClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis";
-const controlTriggerClass = `${controlTriggerBaseClass} border-input bg-background`;
+const controlTriggerClass = `${controlTriggerBaseClass} ui-control-outlined-surface`;
 const controlSurfaceTriggerClass = `${controlTriggerBaseClass} ui-control-surface`;
 const controlIconClass = "size-[length:var(--control-height)] shrink-0";
 const controlIconSmClass = "size-[calc(var(--control-height)-0.5rem)] shrink-0";
@@ -11,11 +11,11 @@ const controlIconLeadingClass = "size-[length:var(--control-icon-size)] shrink-0
 const tableRowHeightClass = "h-[length:var(--table-row-height)]";
 const tableHeadHeightClass = "h-[length:var(--table-row-height)]";
 const tableCellPaddingClass = "py-[length:var(--table-cell-padding-y)]";
-const toneSuccessClass = "border-success/30 bg-success/10 text-success-strong";
-const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-strong";
-const toneInfoClass = "border-info/30 bg-info/10 text-info-strong";
+const toneSuccessClass = "border-success/30 [background-color:var(--surface-success,color-mix(in_oklab,hsl(var(--success))_10%,transparent))] text-success-strong";
+const toneWarningClass = "border-warning/30 [background-color:var(--surface-warning,color-mix(in_oklab,hsl(var(--warning))_10%,transparent))] text-warning-strong";
+const toneInfoClass = "border-info/30 [background-color:var(--surface-info,color-mix(in_oklab,hsl(var(--info))_10%,transparent))] text-info-strong";
 const tonePrimaryClass = "border-primary/30 bg-primary/10 text-primary-strong";
-const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-error-strong";
+const toneDestructiveClass = "border-destructive/30 [background-color:var(--surface-destructive,color-mix(in_oklab,hsl(var(--destructive))_10%,transparent))] text-error-strong";
 const toneMutedClass = "border-border bg-muted text-muted-foreground";
 const toneNeutralClass = "border-border bg-muted text-muted-foreground";
 export {

package/dist/lib/overlay-portal.d.ts

@@ -8,11 +8,31 @@ export interface OverlayPortalProviderProps {
     children: React.ReactNode;
 }
 export declare function OverlayPortalProvider({ container, children }: OverlayPortalProviderProps): React.JSX.Element;
+export interface ThemeScopeProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+/**
+ * A themed region whose overlays keep the region's tokens.
+ *
+ * Put the theme on it — `style={tenantTheme(hex).vars}`, `data-tenant="acme"`, `className="dark"`
+ * — or on any ancestor, or in a stylesheet that never mentions React at all. The scope is read
+ * from the DOM, not from props, so all three paths behave the same.
+ *
+ * The element itself is `display: contents` by default, so dropping it into an existing flex or
+ * grid row changes no layout; pass `style={{ display: "block" }}` if you want a box.
+ */
+export declare function ThemeScope({ children, style, ...props }: ThemeScopeProps): React.JSX.Element;
 /**
  * The container this overlay should render into. An explicit prop wins, so one panel can be placed
  * elsewhere without unmounting the provider around it.
  *
  * Not exported from the public barrel: this is a contract between the provider and the overlays
  * this library ships, not a knob for consumers — a consumer that needs the value has a provider.
+ *
+ * The effect re-reads the enclosing `ThemeScope` when an overlay mounts. A `MutationObserver`
+ * covers a theme changed by an attribute; this covers the rest — a stylesheet added late, a
+ * `@media` or `@supports` branch that flipped since the snapshot was taken. It costs one enumerate
+ * + diff (1.2ms median over 2087 properties, measured in Chromium) per overlay mount and NOTHING
+ * when no `ThemeScope` is above, because the context is then `undefined`.
  */
 export declare function useOverlayPortalContainer(override?: Element): Element | undefined;

package/dist/lib/overlay-portal.js

@@ -1,17 +1,110 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { useLayoutEffect } from "@react-aria/utils";
 import { enableShadowDOM } from "react-stately/private/flags/flags";
 const OverlayPortalContext = React.createContext(void 0);
 enableShadowDOM();
 function OverlayPortalProvider({ container, children }) {
   return /* @__PURE__ */ jsx(OverlayPortalContext.Provider, { value: container, children });
 }
+const OVERLAY_THEME_HOST_ATTRIBUTE = "data-overlay-theme-host";
+const OverlayThemeRefreshContext = React.createContext(void 0);
+function collectCustomPropertyNames(style, into) {
+  for (let index = 0; index < style.length; index += 1) {
+    const name = style[index];
+    if (name.startsWith("--")) into.add(name);
+  }
+}
+function syncOverlayThemeHost(host, scope) {
+  const view = scope.ownerDocument.defaultView;
+  if (!view) return 0;
+  const rootStyle = view.getComputedStyle(scope.ownerDocument.documentElement);
+  const scopeStyle = view.getComputedStyle(scope);
+  const names = /* @__PURE__ */ new Set();
+  collectCustomPropertyNames(rootStyle, names);
+  collectCustomPropertyNames(scopeStyle, names);
+  const carried = /* @__PURE__ */ new Set();
+  for (const name of names) {
+    const value = scopeStyle.getPropertyValue(name);
+    if (value === rootStyle.getPropertyValue(name)) continue;
+    carried.add(name);
+    if (host.style.getPropertyValue(name) !== value) host.style.setProperty(name, value);
+  }
+  for (let index = host.style.length - 1; index >= 0; index -= 1) {
+    const name = host.style[index];
+    if (name.startsWith("--") && !carried.has(name)) host.style.removeProperty(name);
+  }
+  return carried.size;
+}
+function ThemeScope({ children, style, ...props }) {
+  const scopeRef = React.useRef(null);
+  const hostRef = React.useRef(null);
+  const parentContainer = React.useContext(OverlayPortalContext);
+  const [host, setHost] = React.useState();
+  const refresh = React.useCallback(() => {
+    const scope = scopeRef.current;
+    const currentHost = hostRef.current;
+    if (scope && currentHost) syncOverlayThemeHost(currentHost, scope);
+  }, []);
+  useLayoutEffect(() => {
+    const scope = scopeRef.current;
+    if (!scope) return;
+    const doc = scope.ownerDocument;
+    const parent = parentContainer ?? doc.body;
+    const element = doc.createElement("div");
+    element.setAttribute(OVERLAY_THEME_HOST_ATTRIBUTE, "");
+    element.style.display = "contents";
+    element.style.color = "hsl(var(--foreground))";
+    syncOverlayThemeHost(element, scope);
+    parent.appendChild(element);
+    hostRef.current = element;
+    setHost(element);
+    return () => {
+      element.remove();
+      hostRef.current = null;
+      setHost(void 0);
+    };
+  }, [parentContainer]);
+  React.useEffect(() => {
+    const scope = scopeRef.current;
+    if (!scope || !host) return;
+    const view = scope.ownerDocument.defaultView;
+    if (!view?.MutationObserver) return;
+    const observer = new view.MutationObserver(refresh);
+    for (let element = scope; element; element = element.parentElement) {
+      observer.observe(element, { attributes: true });
+    }
+    return () => observer.disconnect();
+  }, [host, refresh]);
+  return (
+    /*
+     * `host ?? parentContainer`, never a bare `host`: the host only exists from the first layout
+     * effect onward, and for that first commit an overlay below must still see whatever container
+     * was already in force — otherwise mounting a ThemeScope inside an `OverlayPortalProvider`
+     * would briefly send a `defaultOpen` panel back to `document.body`, out of the shadow root.
+     */
+    /* @__PURE__ */ jsx(OverlayPortalContext.Provider, { value: host ?? parentContainer, children: /* @__PURE__ */ jsx(OverlayThemeRefreshContext.Provider, { value: refresh, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scopeRef,
+        style: { display: "contents", color: "hsl(var(--foreground))", ...style },
+        ...props,
+        children
+      }
+    ) }) })
+  );
+}
 function useOverlayPortalContainer(override) {
   const fromContext = React.useContext(OverlayPortalContext);
+  const refreshOverlayTheme = React.useContext(OverlayThemeRefreshContext);
+  useLayoutEffect(() => {
+    refreshOverlayTheme?.();
+  }, [refreshOverlayTheme]);
   return override ?? fromContext;
 }
 export {
   OverlayPortalProvider,
+  ThemeScope,
   useOverlayPortalContainer
 };

package/dist/props/components/app.prop.d.ts

@@ -5,6 +5,18 @@ import type { AppLocale, AppRequestHeaders, AppTimeFormat, AppTimezone, AppTimez
 import type { AppBrand, AppDensity, AppFontSize, AppTheme } from "../../app/theme-axes.js";
 import type { AppPreferenceAxis } from "../../app/storage.js";
 import type { AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ChildrenProp, ClassNameProp, DisabledProp, IdProp, NameProp, OnValueChangeProp, ValueProp } from "../vocabulary/index.js";
+/**
+ * @see ThemeScope
+ *
+ * A marker, not a configuration carrier: the theme is read from the DOM at this element, so there
+ * is no `primary`/`tenant`/`theme` prop to get wrong. Everything a `<div>` accepts is forwarded,
+ * which is how `data-tenant`, `className="dark"` and `style={tenantTheme(hex).vars}` are applied.
+ */
+export type ThemeScopeProp = {
+    children: ChildrenProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+};
 /** @see AppProvider */
 export type AppProviderProp = {
     children: ChildrenProp;

package/dist/props/components/charts.prop.d.ts

@@ -11,6 +11,15 @@ export type ChartSeriesProp = {
     label?: string;
     /** CSS colour or token var. Defaults to the `--chart-1..6` palette by index. */
     color?: string;
+    /**
+     * AreaChart only — the filled band's colour, independent of the line's `color`. Defaults to
+     * `color`, which is the single-hue shape every other chart draws. A line has no fill and a bar's
+     * fill IS its `color`, so this is ignored there.
+     *
+     * The band's OPACITY is the `--chart-area-fill-alpha` theme knob, not a prop: density is a
+     * house style, while the hue carries meaning and belongs to the screen.
+     */
+    fillColor?: string;
 };
 /** Shared base for the cartesian charts (Line / Bar / Area). */
 type ChartCartesianBase = {
@@ -39,6 +48,23 @@ type ChartCartesianBase = {
     showLegend?: boolean;
     /** Show the cartesian background grid. */
     showGrid?: boolean;
+    /**
+     * Explicit `[min, max]` for the VALUE axis — y on a vertical chart, x on a horizontal bar.
+     * Omitted, the data sets it (recharts' default, which is zero-based for bars).
+     *
+     * A NON-ZERO BASELINE IS A CHARTING-ETHICS DECISION, not a layout one. Cropping the axis to the
+     * data's own range magnifies every wobble, and the reader has no way to tell a 2% drift from a
+     * collapse. It is legitimate where the SHAPE is the message and zero is not a meaningful
+     * reference — a price, a temperature, an index, a latency percentile — and it is misleading
+     * wherever the reader will compare MAGNITUDES, which is every bar chart and every "is this big"
+     * question. If you crop, say the range on the axis and keep `showGrid`.
+     */
+    valueDomain?: [number, number];
+    /**
+     * Explicit tick positions on the value axis, in data units. Values outside `valueDomain` are not
+     * drawn. Omitted, the axis picks its own.
+     */
+    valueTicks?: number[];
     /** `Intl.NumberFormat` options for axis ticks + tooltip values (locale is automatic). */
     numberFormat?: Intl.NumberFormatOptions;
     /** Message shown when `data` is empty. Defaults to a localized "no data". */
@@ -50,6 +76,8 @@ type ChartCartesianBase = {
 export type LineChartProp = ChartCartesianBase & {
     /** Render smooth (monotone) lines instead of straight segments. */
     curved?: boolean;
+    /** Draw a marker at every data point. Off by default — markers crowd a dense series. */
+    showDots?: boolean;
 };
 /** @see BarChart */
 export type BarChartProp = ChartCartesianBase & {
@@ -108,6 +136,8 @@ export type AreaChartProp = ChartCartesianBase & {
     stacked?: boolean;
     /** Render smooth (monotone) areas instead of straight segments. */
     curved?: boolean;
+    /** Draw a marker at every data point. Off by default — markers crowd a dense series. */
+    showDots?: boolean;
 };
 /** @see PieChart */
 export type PieChartProp = {

package/dist/props/components/index.d.ts

@@ -6,5 +6,5 @@ export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChar
 export type { AlertQueryErrorProp, AlertProp, DialogProp, DialogContentProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";
 export type { DataStateProp, InfiniteQueryStateProp, InfiniteQueryHelpers, PrefetchLinkProp, } from "./query.prop.js";
 export type { DropdownMenuPlacementProp, DropdownMenuTriggerActionProp, PaginationProp, PaginationSizeProp, PaginationAlignProp, StepsProp, StepItemProp, StepStatusProp, StepsTypeProp, TabsProp, TabItemProp, TabsVariantProp, TabsPlacementProp, TabsExtraProp, TabsOnEditProp, } from "./navigation.prop.js";
-export type { AppProviderProp, AppContextValue, AppSettingKind, AppSettingPickerProp, AppSettingToggleKind, AppSettingToggleProp, } from "./app.prop.js";
+export type { AppProviderProp, AppContextValue, AppSettingKind, AppSettingPickerProp, AppSettingToggleKind, AppSettingToggleProp, ThemeScopeProp, } from "./app.prop.js";
 export type { ZodSchemaProp, UseZodFormOptionsProp, UseZodFormReturnProp, FormRootProp, FormFieldControlProp, FieldErrorMessageProp, } from "./form.prop.js";

package/dist/props/components/navigation.prop.d.ts

@@ -1,7 +1,7 @@
 /** Navigation component prop types — @see docs/COMPONENTS.md#navigation */
 import type * as React from "react";
 import type { ReactNode } from "react";
-import type { AffixProp } from "./layout.prop.js";
+import type { AffixProp, AffixTargetProp } from "./layout.prop.js";
 import type { ActionsProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, PendingProp, PlaceholderProp, StickyProp, TextAlignProp } from "../vocabulary/index.js";
 import type { SearchSelectOptionProp } from "./data-entry.prop.js";
 /**
@@ -840,6 +840,12 @@ export type AnchorDirectionProp = "vertical" | "horizontal";
  * controlled value (`value` / `defaultValue` / `onValueChange`), which antd has no spelling for
  * at all. All three antd names stay findable — declared `never`, `@deprecated` with the
  * replacement named, and warned about in development.
+ *
+ * `target` (gh#890) is a fourth: `getContainer`'s own idea, renamed to `Affix`'s spelling and
+ * shape (`AffixTargetProp`) so the two components that share a scroll box — `Anchor` pins itself
+ * to one AND resolves which section is current inside it — share one name for it too. Unlike the
+ * other three it is additive, not a hard break: `getContainer` still works, `target` wins when
+ * both are given.
  */
 export type AnchorProp = {
     /** The entries, in document order. Ant Design `items`. */
@@ -857,7 +863,20 @@ export type AnchorProp = {
     affix?: boolean | Omit<AffixProp, "offsetBlockStart" | "offsetTop" | "target" | "children">;
     /** Tolerance, in pixels, added to the decision line. Ant Design `bounds`, default `5`. */
     bounds?: number;
-    /** The scroll box holding the sections. Ant Design `getContainer`, default `() => window`. */
+    /**
+     * The scroll box the sections are measured in AND the box `Affix` pins the nav against — one
+     * function, both halves (gh#890). `AffixTargetProp`, the same lazy-getter shape and the same
+     * name `Affix.target` / `FloatButton.BackTop.target` already spell here, so a consumer who has
+     * scoped one scrolling component already knows this one. `null` (or an absent `target`) means
+     * the viewport, matching `Affix`. Wins over `getContainer` when both are given.
+     */
+    target?: AffixTargetProp;
+    /**
+     * The scroll box holding the sections. Ant Design `getContainer`, default `() => window`.
+     *
+     * Superseded by `target`, which mirrors `Affix`'s own spelling for the identical idea; kept,
+     * still live, for a call site written before `target` existed.
+     */
     getContainer?: () => AnchorContainerProp;
     /**
      * Last word on the highlight, given the one the scroll position resolved. Ant Design

package/dist/props/components/query.prop.d.ts

@@ -46,14 +46,48 @@ export type ButtonRefetchProp = Omit<ButtonProp, "onClick" | "disabled"> & {
     query: QueryRefetchLike;
     label?: React.ReactNode;
 };
-type InfiniteQueryLike<TPage> = Pick<UseInfiniteQueryResult<InfiniteData<TPage>, unknown>, "isPending" | "isError" | "isFetching" | "isFetchingNextPage" | "error" | "data" | "hasNextPage" | "fetchNextPage" | "refetch">;
+/**
+ * TPage MUST BE INFERABLE FROM `data`, WHICH A BARE `Pick` MAKES IMPOSSIBLE (gh#889).
+ *
+ * This was `Pick<UseInfiniteQueryResult<InfiniteData<TPage>, unknown>, … | "data" | …>`. TPage is
+ * then buried under a mapped type over a generic instantiation, and TypeScript cannot run inference
+ * backwards through a mapped type — so every consumer of `InfiniteQueryState` got `TPage = unknown`
+ * from `query={q}` however well typed `q` was, which collapsed TFlat and handed `unknown` to
+ * `flatten`, `isEmpty` and `children`. The catalog example was written with
+ * `flatten={flattenItemPages as any}` and three `: any` annotations, and the cast is what kept the
+ * defect invisible: a reader could not tell whether the inference was broken or the example sloppy.
+ *
+ * Spelling `data` as its own intersection member puts `InfiniteData<TPage>` — a plain object type
+ * whose `pages` is `TPage[]` — in an inference position. The `Pick` still supplies the other eight
+ * fields, so they stay tied to tanstack's real result shape and a signature change there still
+ * breaks the build here.
+ */
+type InfiniteQueryLike<TPage> = Omit<Pick<UseInfiniteQueryResult<InfiniteData<TPage>, unknown>, "isPending" | "isError" | "isFetching" | "isFetchingNextPage" | "error" | "data" | "hasNextPage" | "fetchNextPage" | "refetch">, "data"> & {
+    data: InfiniteData<TPage> | undefined;
+};
 export type InfiniteQueryHelpers = {
     fetchNextPage: () => void;
     hasNextPage: boolean;
     isFetchingNextPage: boolean;
 };
 /** @see InfiniteQueryState — useInfiniteQuery lifecycle + load more. */
-export type InfiniteQueryStateProp<TPage, TFlat> = {
+/**
+ * TFLAT'S DEFAULT IS WHAT MAKES `flatten={flattenItemPages}` TYPE (gh#889).
+ *
+ * TypeScript infers a type parameter from argument POSITIONS. `TFlat` appears in the RETURN of
+ * `flatten`, so when `flatten` is handed a generic function BY REFERENCE the source signature is
+ * still uninstantiated and produces no inference candidate at all — `TFlat` fell to `unknown` and
+ * `isEmpty` and `children` received `unknown`. That is why the catalog example shipped as
+ * `flatten={flattenItemPages as any}` with `(it: any)` and `(items: any)`.
+ *
+ * A default is used exactly when inference yields no candidate, which is precisely this case: the
+ * flattened shape of the library's own `flattenItemPages`. An inline arrow — `flatten={(d) =>
+ * d.pages.flatMap((p) => p.rows)}` — is context-sensitive, so it DOES produce a candidate and
+ * overrides the default as before. Nothing about a custom flatten changes.
+ */
+export type InfiniteQueryStateProp<TPage, TFlat = TPage extends {
+    items: (infer TItem)[];
+} ? TItem[] : unknown> = {
     query: InfiniteQueryLike<TPage>;
     skeleton: React.ReactNode;
     empty?: React.ReactNode;

package/dist/props/registry.d.ts

@@ -702,6 +702,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/app.prop.ts";
         readonly vocabulary: readonly ["ChildrenProp"];
     };
+    readonly ThemeScopeProp: {
+        readonly group: "app";
+        readonly file: "components/app.prop.ts";
+        readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp", "IdProp"];
+    };
     readonly AppSettingPickerProp: {
         readonly group: "app";
         readonly file: "components/app.prop.ts";
@@ -2041,6 +2046,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "color";
             readonly local: true;
             readonly reason: "Per-series colour override (defaults to --chart-N).";
+        }, {
+            readonly field: "fillColor";
+            readonly local: true;
+            readonly reason: "AreaChart band colour, independent of the line's `color`.";
         }];
     };
     readonly LineChartProp: {
@@ -2078,10 +2087,22 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "numberFormat";
             readonly local: true;
             readonly reason: "Intl.NumberFormat options for ticks/tooltips.";
+        }, {
+            readonly field: "valueDomain";
+            readonly local: true;
+            readonly reason: "Explicit [min, max] on the value axis (y vertical, x horizontal).";
+        }, {
+            readonly field: "valueTicks";
+            readonly local: true;
+            readonly reason: "Explicit tick positions on the value axis.";
         }, {
             readonly field: "curved";
             readonly local: true;
             readonly reason: "Smooth (monotone) line rendering.";
+        }, {
+            readonly field: "showDots";
+            readonly local: true;
+            readonly reason: "Chart-specific point-marker toggle.";
         }];
     };
     readonly BarChartProp: {
@@ -2119,6 +2140,14 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "numberFormat";
             readonly local: true;
             readonly reason: "Intl.NumberFormat options for ticks/tooltips.";
+        }, {
+            readonly field: "valueDomain";
+            readonly local: true;
+            readonly reason: "Explicit [min, max] on the value axis (y vertical, x horizontal).";
+        }, {
+            readonly field: "valueTicks";
+            readonly local: true;
+            readonly reason: "Explicit tick positions on the value axis.";
         }, {
             readonly field: "stacked";
             readonly local: true;
@@ -2201,6 +2230,14 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "numberFormat";
             readonly local: true;
             readonly reason: "Intl.NumberFormat options for ticks/tooltips.";
+        }, {
+            readonly field: "valueDomain";
+            readonly local: true;
+            readonly reason: "Explicit [min, max] on the value axis (y vertical, x horizontal).";
+        }, {
+            readonly field: "valueTicks";
+            readonly local: true;
+            readonly reason: "Explicit tick positions on the value axis.";
         }, {
             readonly field: "stacked";
             readonly local: true;
@@ -2209,6 +2246,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "curved";
             readonly local: true;
             readonly reason: "Smooth (monotone) area rendering.";
+        }, {
+            readonly field: "showDots";
+            readonly local: true;
+            readonly reason: "Chart-specific point-marker toggle.";
         }];
     };
     readonly PieChartProp: {
@@ -3722,10 +3763,14 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "bounds";
             readonly local: true;
             readonly reason: "Ant Design `Anchor.bounds` — pixel tolerance added to the decision line.";
+        }, {
+            readonly field: "target";
+            readonly local: true;
+            readonly reason: "gh#890 — `Affix`'s own lazy scroll-box getter, same shape and name, so the pin and the scroll-spy agree on one container. Wins over `getContainer` when both are given.";
         }, {
             readonly field: "getContainer";
             readonly local: true;
-            readonly reason: "Ant Design `Anchor.getContainer` — the lazy scroll-box getter.";
+            readonly reason: "Ant Design `Anchor.getContainer` — the lazy scroll-box getter. Superseded by `target` (gh#890) but kept live for a call site written before it existed.";
         }, {
             readonly field: "getCurrentAnchor";
             readonly local: true;

package/dist/props/registry.js

@@ -698,6 +698,11 @@ const VOCABULARY_REGISTRY = {
 };
 const COMPONENT_PROP_REGISTRY = {
   AppProviderProp: { group: "app", file: "components/app.prop.ts", vocabulary: ["ChildrenProp"] },
+  ThemeScopeProp: {
+    group: "app",
+    file: "components/app.prop.ts",
+    vocabulary: ["ChildrenProp", "ClassNameProp", "IdProp"]
+  },
   AppSettingPickerProp: {
     group: "app",
     file: "components/app.prop.ts",
@@ -2494,6 +2499,11 @@ const COMPONENT_PROP_REGISTRY = {
         field: "color",
         local: true,
         reason: "Per-series colour override (defaults to --chart-N)."
+      },
+      {
+        field: "fillColor",
+        local: true,
+        reason: "AreaChart band colour, independent of the line's `color`."
       }
     ]
   },
@@ -2523,7 +2533,14 @@ const COMPONENT_PROP_REGISTRY = {
         local: true,
         reason: "Intl.NumberFormat options for ticks/tooltips."
       },
-      { field: "curved", local: true, reason: "Smooth (monotone) line rendering." }
+      {
+        field: "valueDomain",
+        local: true,
+        reason: "Explicit [min, max] on the value axis (y vertical, x horizontal)."
+      },
+      { field: "valueTicks", local: true, reason: "Explicit tick positions on the value axis." },
+      { field: "curved", local: true, reason: "Smooth (monotone) line rendering." },
+      { field: "showDots", local: true, reason: "Chart-specific point-marker toggle." }
     ]
   },
   BarChartProp: {
@@ -2552,6 +2569,12 @@ const COMPONENT_PROP_REGISTRY = {
         local: true,
         reason: "Intl.NumberFormat options for ticks/tooltips."
       },
+      {
+        field: "valueDomain",
+        local: true,
+        reason: "Explicit [min, max] on the value axis (y vertical, x horizontal)."
+      },
+      { field: "valueTicks", local: true, reason: "Explicit tick positions on the value axis." },
       { field: "stacked", local: true, reason: "Stack series into one bar." },
       { field: "horizontal", local: true, reason: "Category axis on the left." }
     ]
@@ -2619,8 +2642,15 @@ const COMPONENT_PROP_REGISTRY = {
         local: true,
         reason: "Intl.NumberFormat options for ticks/tooltips."
       },
+      {
+        field: "valueDomain",
+        local: true,
+        reason: "Explicit [min, max] on the value axis (y vertical, x horizontal)."
+      },
+      { field: "valueTicks", local: true, reason: "Explicit tick positions on the value axis." },
       { field: "stacked", local: true, reason: "Stack series areas." },
-      { field: "curved", local: true, reason: "Smooth (monotone) area rendering." }
+      { field: "curved", local: true, reason: "Smooth (monotone) area rendering." },
+      { field: "showDots", local: true, reason: "Chart-specific point-marker toggle." }
     ]
   },
   PieChartProp: {
@@ -4516,10 +4546,15 @@ const COMPONENT_PROP_REGISTRY = {
         local: true,
         reason: "Ant Design `Anchor.bounds` \u2014 pixel tolerance added to the decision line."
       },
+      {
+        field: "target",
+        local: true,
+        reason: "gh#890 \u2014 `Affix`'s own lazy scroll-box getter, same shape and name, so the pin and the scroll-spy agree on one container. Wins over `getContainer` when both are given."
+      },
       {
         field: "getContainer",
         local: true,
-        reason: "Ant Design `Anchor.getContainer` \u2014 the lazy scroll-box getter."
+        reason: "Ant Design `Anchor.getContainer` \u2014 the lazy scroll-box getter. Superseded by `target` (gh#890) but kept live for a call site written before it existed."
       },
       {
         field: "getCurrentAnchor",