@multiplatform.one/components 6.6.0 → 7.0.0

package/src/surfaces.tsx

@@ -1,4 +1,4 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Preset, Surface, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { createContext, forwardRef, useContext } from "react";
 import {
@@ -30,6 +30,32 @@ import {
  * `tamagui` import path.
  */
 
+// ── Nested scale (LC-73) ─────────────────────────────────────────────────
+// Polaris / Primer: the deeper a surface nests, the tighter its padding
+// and control chrome. Compact density steps size+space down one level.
+// Never wrap `density: "comfortable"` inside a compact ancestor — that
+// would step nested controls UP.
+
+function NestedScale({ density, children }: { density: string; children: ReactNode }) {
+  if (density === "compact") return children;
+  return <Preset overrides={{ density: "compact" }}>{children}</Preset>;
+}
+
+// ── Overlay frame focus (LC-71) ──────────────────────────────────────────
+// Radix Dialog.Content / Primer Dialog are tabIndex=-1 and auto-focused on
+// open. The frame is not a control: UA :focus-visible must not ring the
+// panel. Inner controls ring on keyboard-origin focus.
+
+const overlayFrameFocus = {
+  outlineWidth: 0,
+  outlineStyle: "none" as any,
+};
+
+const overlayFrameFocusStyle = {
+  outlineWidth: 0,
+  outlineStyle: "none" as any,
+} as const;
+
 // ── Card ──────────────────────────────────────────────────────────────────
 
 /**
@@ -50,7 +76,7 @@ export interface CardProps extends TamaguiCardProps {
 }
 
 function CardRoot({ children, tier = "content", ...props }: CardProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ component: "Card" });
   // Axiom 1 child-clip cap: the padded container's radius may not exceed its
   // own inset. cardSurface carries the cap already; the elevated tier layers
   // containerRadius over elevatedSurface (which other, row-owning overlays
@@ -67,24 +93,27 @@ function CardRoot({ children, tier = "content", ...props }: CardProps) {
   // keeps bare children off the border on that tier.
   return (
     <TamaguiCard {...knobProps.panelPadding} {...tierProps} {...knobProps.gap} {...props}>
-      {children}
+      <NestedScale density={knobProps.density}>{children}</NestedScale>
     </TamaguiCard>
   );
 }
 
 // padding={0} kills the tamagui size-variant default padding — the Card
-// frame already owns the inset, so Header/Footer padding would double it.
+// frame already owns the inset (LC-09), so Header/Footer padding would
+// double it. heading/body/gap ride the nested scale of the Card children.
 export function CardHeader({ children, ...props }: ViewProps & { children?: ReactNode }) {
+  const { knobProps } = useResolvedKnobs({ component: "Card" });
   return (
-    <TamaguiCard.Header padding={0} {...props}>
+    <TamaguiCard.Header padding={0} {...knobProps.heading} {...knobProps.gap} {...props}>
       {children}
     </TamaguiCard.Header>
   );
 }
 
 export function CardFooter({ children, ...props }: ViewProps & { children?: ReactNode }) {
+  const { knobProps } = useResolvedKnobs({ component: "Card" });
   return (
-    <TamaguiCard.Footer padding={0} {...props}>
+    <TamaguiCard.Footer padding={0} {...knobProps.body} {...knobProps.gap} {...props}>
       {children}
     </TamaguiCard.Footer>
   );
@@ -129,23 +158,37 @@ export const DialogContent = forwardRef<
   TamaguiElement,
   TamaguiDialogContentProps & { children?: ReactNode }
 >(function DialogContent({ children, ...props }, ref) {
-  const { knobProps } = useResolvedKnobs();
+  return (
+    <Surface size="md">
+      <DialogContentInner ref={ref} {...props}>
+        {children}
+      </DialogContentInner>
+    </Surface>
+  );
+});
+
+const DialogContentInner = forwardRef<
+  TamaguiElement,
+  TamaguiDialogContentProps & { children?: ReactNode }
+>(function DialogContentInner({ children, ...props }, ref) {
+  const { knobProps } = useResolvedKnobs({ component: "DialogContent" });
   return (
     <Dialog.Content
       ref={ref}
-      {...knobProps.surface}
-      {...knobProps.borderRadius}
+      {...knobProps.elevatedSurface}
       {...knobProps.containerRadius}
-      elevation={knobProps.elevation}
       {...knobProps.panelPadding}
       {...knobProps.gap}
       transition={knobProps.transition}
       enterStyle={overlayEnterExit}
       exitStyle={overlayEnterExit}
+      {...overlayFrameFocus}
+      focusStyle={overlayFrameFocusStyle}
+      focusVisibleStyle={overlayFrameFocusStyle}
       {...props}
     >
       <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
-        {children}
+        <NestedScale density={knobProps.density}>{children}</NestedScale>
       </DialogRegionContext.Provider>
     </Dialog.Content>
   );
@@ -184,10 +227,16 @@ export const DialogOverlay = forwardRef<
 });
 
 // ── PopoverContent ───────────────────────────────────────────────────────
+// OVERLAY_ANCHOR_GAP rule (theme/layoutTokens): free popovers size to
+// content, start-aligned to their anchor with the shared gap (the caller's
+// tamagui <Popover offset={OVERLAY_ANCHOR_GAP}>), flipping/shifting at
+// viewport edges. This frame is the overlay's single surface owner —
+// border + radius come only from the elevatedSurface recipe here; children
+// must not draw their own outer border.
 
 export const PopoverContent = forwardRef<TamaguiElement, ViewProps & { children?: ReactNode }>(
   function PopoverContent({ children, ...props }, ref) {
-    const { knobProps } = useResolvedKnobs();
+    const { knobProps } = useResolvedKnobs({ component: "PopoverContent" });
     return (
       <Popover.Content
         ref={ref}
@@ -195,9 +244,12 @@ export const PopoverContent = forwardRef<TamaguiElement, ViewProps & { children?
         transition={knobProps.transition}
         enterStyle={overlayEnterExit}
         exitStyle={overlayEnterExit}
+        {...overlayFrameFocus}
+        focusStyle={overlayFrameFocusStyle}
+        focusVisibleStyle={overlayFrameFocusStyle}
         {...props}
       >
-        {children}
+        <NestedScale density={knobProps.density}>{children}</NestedScale>
       </Popover.Content>
     );
   },
@@ -207,15 +259,22 @@ export const PopoverContent = forwardRef<TamaguiElement, ViewProps & { children?
 
 export const SheetFrame = forwardRef<TamaguiElement, ViewProps & { children?: ReactNode }>(
   function SheetFrame({ children, ...props }, ref) {
-    const { knobProps } = useResolvedKnobs();
+    const { knobProps } = useResolvedKnobs({ component: "SheetFrame" });
     const frameProps = {
       ref,
       ...knobProps.surface,
       ...knobProps.borderRadius,
       ...knobProps.panelPadding,
+      ...overlayFrameFocus,
+      focusStyle: overlayFrameFocusStyle,
+      focusVisibleStyle: overlayFrameFocusStyle,
       ...props,
     };
-    return <Sheet.Frame {...frameProps}>{children}</Sheet.Frame>;
+    return (
+      <Sheet.Frame {...frameProps}>
+        <NestedScale density={knobProps.density}>{children}</NestedScale>
+      </Sheet.Frame>
+    );
   },
 );
 
@@ -228,23 +287,25 @@ export { SheetModal } from "./SheetModal";
 export type { SheetModalProps } from "./SheetModal";
 
 // ── Panel ────────────────────────────────────────────────────────────────
-// A plain View that applies surface + borderRadius + elevation + padding.
-// Useful as a generic knob-aware container.
+// Polaris Card / Primer Box: bordered elevated frame. Spec class SF-OVERLAY
+// (`elevatedSurface` + cap + padding + gap). Nested chrome steps down once.
 
 export const Panel = forwardRef<TamaguiElement, ViewProps & { children?: ReactNode }>(
   function Panel({ children, ...props }, ref) {
-    const { knobProps } = useResolvedKnobs();
+    const { knobProps } = useResolvedKnobs({ component: "Panel" });
     const viewProps = {
       ref,
-      ...knobProps.surface,
-      ...knobProps.borderRadius,
+      ...knobProps.elevatedSurface,
       ...knobProps.containerRadius,
-      elevation: knobProps.elevation,
       ...knobProps.panelPadding,
       ...knobProps.gap,
       ...props,
     };
-    return <View {...viewProps}>{children}</View>;
+    return (
+      <View {...viewProps}>
+        <NestedScale density={knobProps.density}>{children}</NestedScale>
+      </View>
+    );
   },
 );
 

package/src/tamagui.spec.ts

@@ -59,9 +59,11 @@ const ALLOWLIST_VALUE_NAMES = [
   "Paragraph",
   "SizableText",
   "Text",
-  // actions / feedback (standalone-safe)
-  "Button",
-  "Spinner",
+  // actions / feedback: none left. Button left this list 2026-08-13 (raw
+  // primitive knob-dead, LC-18 — bare `Button` is the house shadow in
+  // ./Button.tsx); Spinner followed the same day (LC-70 census: raw Spinner
+  // spins at animation "none" — bare `Spinner` is the forms house version).
+  // Raw rides the TamaguiButton / TamaguiSpinner escape hatches.
   // overlay composition roots
   "Adapt",
   "AlertDialog",
@@ -94,6 +96,7 @@ const ALLOWLIST_VALUE_NAMES = [
 ] as const;
 
 const ESCAPE_HATCHES: ReadonlyArray<[prefixed: string, raw: string]> = [
+  ["TamaguiButton", "Button"],
   ["TamaguiCheckbox", "Checkbox"],
   ["TamaguiInput", "Input"],
   ["TamaguiLabel", "Label"],
@@ -101,12 +104,24 @@ const ESCAPE_HATCHES: ReadonlyArray<[prefixed: string, raw: string]> = [
   ["TamaguiRadioGroup", "RadioGroup"],
   ["TamaguiSelect", "Select"],
   ["TamaguiSlider", "Slider"],
+  ["TamaguiSpinner", "Spinner"],
   ["TamaguiSwitch", "Switch"],
   ["TamaguiTextArea", "TextArea"],
   ["TamaguiToggleGroup", "ToggleGroup"],
 ];
 
-const HOUSE_SHADOWS = ["Avatar", "Card", "Fieldset", "Image", "Menu", "Tabs", "Toast", "Tooltip"];
+const HOUSE_SHADOWS = [
+  "Avatar",
+  "Button",
+  "Card",
+  "Fieldset",
+  "Image",
+  "Menu",
+  "Spinner",
+  "Tabs",
+  "Toast",
+  "Tooltip",
+];
 
 describe("curated tamagui surface", () => {
   it("does not export bare interactive primitives that have house forms equivalents", () => {

package/src/tamagui.ts

@@ -12,8 +12,11 @@
 //   utilities, and overlay composition roots that house surfaces
 //   (DialogContent, PopoverContent, SheetFrame) are designed to compose with.
 // - NEVER re-export a bare interactive primitive that has a house equivalent
-//   in @multiplatform.one/forms (Checkbox, Switch, RadioGroup, Select,
-//   Slider, ToggleGroup, Input, TextArea, Label, Form, Progress).
+//   in @multiplatform.one/forms (Button, Checkbox, Switch, RadioGroup,
+//   Select, Slider, ToggleGroup, Input, TextArea, Label, Form, Progress).
+//   Bare `Button` is the house shadow (./Button.tsx wrapping the forms
+//   Button) so knob fragments and the LC-54 press floor reach every
+//   components-imported Button.
 // - Deliberate raw usage goes through the explicit `Tamagui*`-prefixed
 //   escape hatches below (same precedent as TamaguiToast in index.ts) so the
 //   rawness is visible and greppable at the import site.
@@ -38,8 +41,13 @@ export {
 // Text primitives (no house replacement)
 export { Anchor, H1, H2, H3, H4, H5, H6, Heading, Paragraph, SizableText, Text } from "tamagui";
 
-// Actions / feedback primitives that work standalone (no footgun anatomy)
-export { Button, Spinner } from "tamagui";
+// Actions / feedback primitives: NONE re-exported raw anymore.
+// Button is a house shadow (./Button.tsx over the forms Button — LC-18/LC-54,
+// see p-results/fix-button-knob-totality.md). Spinner followed in the LC-70
+// census 2026-08-13: the raw primitive ignores the animation knob (spins at
+// animation "none" / prefers-reduced-motion) and the size knob; the bare name
+// is the knob-consuming forms Spinner re-exported via index.ts. Raw stays
+// reachable as TamaguiButton / TamaguiSpinner below.
 
 // Overlay composition roots — the house DialogContent / PopoverContent /
 // SheetFrame surfaces are designed to compose inside these raw roots.
@@ -74,7 +82,6 @@ export {
 // Types for the allowlisted surface
 export type {
   AnchorProps,
-  ButtonProps,
   CircleProps,
   ColorTokens,
   DialogProps,
@@ -92,7 +99,6 @@ export type {
   SizableTextProps,
   SizeTokens,
   SpaceTokens,
-  SpinnerProps,
   SquareProps,
   TamaguiConfig,
   TamaguiElement,
@@ -113,6 +119,7 @@ export type {
 // imports the prefixed name so the choice is explicit at the call site.
 // Prefer the forms field for new code.
 export {
+  Button as TamaguiButton,
   Checkbox as TamaguiCheckbox,
   Input as TamaguiInput,
   Label as TamaguiLabel,
@@ -120,6 +127,7 @@ export {
   RadioGroup as TamaguiRadioGroup,
   Select as TamaguiSelect,
   Slider as TamaguiSlider,
+  Spinner as TamaguiSpinner,
   Switch as TamaguiSwitch,
   TextArea as TamaguiTextArea,
   ToggleGroup as TamaguiToggleGroup,

package/src/views/Calendar.stories.tsx

@@ -54,6 +54,7 @@ export const Default = {
   render: () => (
     <Calendar
       events={events}
+      initialDate={new Date(2026, 2, 10)}
       onEventClick={(event) => console.log("Clicked:", event.id)}
       height={500}
     />
@@ -277,7 +278,7 @@ export const Keyboard = {
     docs: {
       description: {
         story:
-          "Tab to the grid, arrows move the focused day (crossing a month edge navigates the period with a directional slide), Enter selects the focused day. Event chips are focusable buttons with full accessible names; an aria-live region announces period changes.",
+          "Tab to the grid, arrows move the focused day (crossing a month edge navigates the period with a directional slide), Enter selects the focused day. The LC-71 keyboard ring paints on the focused day-number disc only — never the cell, never unfocused days. Event chips are focusable buttons with full accessible names; an aria-live region announces period changes.",
       },
     },
   },