@multiplatform.one/components 6.7.0 → 7.0.0

package/src/views/TreeView.stories.tsx

@@ -150,3 +150,22 @@ export const Empty = {
     </YStack>
   ),
 };
+
+/**
+ * Carbon: a collapsed ancestor of the selected node keeps a muted fill so
+ * the selection is not lost when its parent is closed.
+ */
+export const ContainsSelection = {
+  name: "Contains Selection",
+  render: () => (
+    <YStack height={280}>
+      <TreeView
+        nodes={nodes}
+        ariaLabel="Collapsed ancestor still shows selection"
+        selectedId="button"
+        defaultExpandedIds={["src"]}
+        height={260}
+      />
+    </YStack>
+  ),
+};

package/src/views/TreeView.tsx

@@ -4,7 +4,10 @@ import { FlashList, type FlashListRef } from "@shopify/flash-list";
 import {
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
+  getGroupPosition,
+  keyboardFocusRingProps,
   pressTargetHitSlop,
+  stackRadiusProps,
   useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
@@ -30,7 +33,7 @@ import React, {
   useState,
   type ReactNode,
 } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { Text, View, XStack, YStack, type YStackProps } from "tamagui";
 import { autoScrollVelocity } from "./kanbanDnd";
 import {
@@ -150,6 +153,7 @@ interface FlatNode<T> {
   hasChildren: boolean;
   isExpanded: boolean;
   index: number;
+  parentId: string | null;
 }
 
 /**
@@ -230,6 +234,21 @@ function collectBranchIds<T>(items: TreeNode<T>[], into: Set<string> = new Set()
   return into;
 }
 
+/** Ancestor ids of `id` (root → parent), or null when the node is absent. */
+function findNodePath<T>(items: TreeNode<T>[], id: string, trail: string[] = []): string[] | null {
+  for (const node of items) {
+    if (node.id === id) return trail;
+    if (node.children?.length) {
+      const found = findNodePath(node.children, id, [...trail, node.id]);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/** Typeahead window matching menu rows (DropdownMenu) and Finder/VS Code jump-to. */
+const TYPEAHEAD_MS = 600;
+
 function defaultNodeIcon(hasChildren: boolean, isExpanded: boolean, iconSize: number): ReactNode {
   if (hasChildren) {
     return isExpanded ? (
@@ -242,20 +261,22 @@ function defaultNodeIcon(hasChildren: boolean, isExpanded: boolean, iconSize: nu
 }
 
 /**
- * Generic virtualized tree view (EUI-inspired flat directory chrome).
+ * Generic virtualized tree view.
  *
- * Flattens the tree for virtualization using `@shopify/flash-list`
- * and uses `@tanstack/react-hotkeys` for keyboard navigation.
- * Rows are compact XStacks: optional expansion caret, node icon, label.
+ * Visual language is the VS Code / Primer / Carbon / Finder consensus:
+ * flush rows (SP-EDGE), twistie + icon + label, indent guides at each
+ * depth, selected = accent fill, keyboard focus = one inset ring on the
+ * active row (LC-71), stacked-group radius on the first/last row (LC-72).
  *
- * Motion (Axiom 4): expanding/collapsing a branch FLIPs the surviving rows
- * from their previous offsets and fades the revealed children in, while the
- * caret rotates — all tweened with `knobProps.transition`, transform/opacity
- * only (native-safe). Initial mount renders settled (no wiggle) and
- * `animation: none` / reduced motion renders every toggle instantly.
+ * Keyboard follows the WAI-ARIA tree pattern those systems share: one tab
+ * stop, arrows move, Right expands then enters, Left collapses then climbs
+ * to the parent, Home/End, typeahead. Pressing a branch row toggles it
+ * (EUI/VS Code), so the caret is an indicator, not a sub-44px control.
  *
- * Pressing a branch row toggles it (EUI/VS Code semantics), so the expand
- * target is the full row — the caret itself is a non-interactive indicator.
+ * Motion (Axiom 4): expanding/collapsing a branch FLIPs surviving rows
+ * and fades revealed children; the caret rotates. Tweened with
+ * `knobProps.transition`, transform/opacity only. `animation: none` /
+ * reduced motion jumps.
  *
  * @typeParam T - Additional data type stored on the nodes
  */
@@ -280,30 +301,31 @@ export function TreeView<T = unknown>({
 }: TreeViewProps<T>) {
   const { t } = useTranslation();
   const emptyMessage = emptyMessageProp ?? t("No items found");
-  const { knobProps, control } = useResolvedKnobs();
+  const compressed = display === "compressed";
+  // Compressed display forces compact density stepping; default display
+  // leaves the density knob in charge.
+  const { knobProps, control } = useResolvedKnobs(compressed ? { compact: true } : undefined);
   // UX-P02 / Axiom 15: the selected row paints `$accentBackground`; its label
   // must sit on the accent fill with a luminance-computed foreground (the
   // scheme `$color` ink measured 2.59:1 on the accent).
   const onAccentLabel = useReadableTextOn("$accentBackground");
   const transition = knobProps.transition;
-  const compressed = display === "compressed";
-  const sz = knobProps.sizeToken;
-
-  const estimateSize =
-    estimateSizeProp ??
-    (compressed ? (sz === "$5" ? 32 : 28) : sz === "$3" ? 30 : sz === "$5" ? 40 : 36);
-  const height = heightProp ?? (sz === "$3" ? 320 : sz === "$5" ? 480 : 400);
-  const expandIconSize = compressed ? 14 : sz === "$3" ? 16 : sz === "$5" ? 20 : 18;
-  const nodeIconSize = compressed ? 14 : 18;
-  const caretSize = compressed ? 12 : 14;
+  const nestedPx = knobProps.nestedControl.px;
+
+  // Row height rides nestedControl (Carbon 32/24, VS Code ~22, house
+  // nested px is 32 at medium / 28 compact) — not a private pixel table.
+  const estimateSize = estimateSizeProp ?? nestedPx;
+  const height = heightProp ?? (nestedPx <= 28 ? 320 : nestedPx >= 36 ? 480 : 400);
+  const expandIconSize = nestedPx <= 28 ? 14 : nestedPx >= 36 ? 18 : 16;
+  const nodeIconSize = nestedPx <= 28 ? 14 : 18;
+  const caretSize = nestedPx <= 28 ? 12 : 14;
   // Collapsed caret encodes the expansion direction (inline-end), so it
   // mirrors in RTL via glyph swap (useDirection, Axiom 15); the rotation
   // sign flips with it so the expanded state still points down.
   const isRTL = useDirection() === "rtl";
   const CollapsedCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
   const expandedCaretRotation = isRTL ? "-90deg" : "90deg";
-  const indentStep = compressed ? 12 : 16;
-  const labelFontSize = compressed ? 12 : 14;
+  const indentStep = knobProps.space === "small" ? 12 : knobProps.space === "large" ? 20 : 16;
   // SP-EDGE row density (spec TreeView rows): the space knob steps the row
   // padding — never an outer tree inset (LC-02). House space-map pattern
   // (getTableCellPadding precedent); medium keeps the previous 6/8
@@ -321,14 +343,22 @@ export function TreeView<T = unknown>({
   const containerRef = useRef<HTMLDivElement>(null);
   const flashListRef = useRef<FlashListRef<FlatNode<T>>>(null);
   const [focusedIndex, setFocusedIndex] = useState(-1);
+  // LC-71: ring is a React flag, not a render-time wasKeyboardFocus() read —
+  // Tab-away/Tab-back with the same activedescendant must still re-paint.
+  const [keyboardRing, setKeyboardRing] = useState(false);
+  const typeaheadRef = useRef({ buffer: "", at: 0 });
   // Axiom 12: the tree is one tab stop (aria-activedescendant pattern) — but
   // Tab-in with no active row painted NOTHING (ring suppressed on the
   // container, no row highlighted until an arrow was pressed). On
   // keyboard-origin focus, light up the first row so position is visible.
   if (typeof document !== "undefined") ensureKeyboardModalityTracking();
   const handleContainerFocus = useCallback(() => {
-    if (!wasKeyboardFocus()) return;
-    setFocusedIndex((prev) => (prev < 0 ? 0 : prev));
+    const kb = wasKeyboardFocus();
+    setKeyboardRing(kb);
+    if (kb) setFocusedIndex((prev) => (prev < 0 ? 0 : prev));
+  }, []);
+  const handleContainerBlur = useCallback(() => {
+    setKeyboardRing(false);
   }, []);
   const [expandedIds, setExpandedIds] = useState<Set<string>>(() => {
     if (defaultExpandedIds) return new Set(defaultExpandedIds);
@@ -383,18 +413,25 @@ export function TreeView<T = unknown>({
   const flatNodes = useMemo(() => {
     const result: FlatNode<T>[] = [];
 
-    const walk = (items: TreeNode<T>[], depth: number) => {
+    const walk = (items: TreeNode<T>[], depth: number, parentId: string | null) => {
       for (const node of items) {
         const hasChildren = (node.children?.length ?? 0) > 0;
         const isExpanded = expandedIds.has(node.id);
-        result.push({ node, depth, hasChildren, isExpanded, index: result.length });
+        result.push({
+          node,
+          depth,
+          hasChildren,
+          isExpanded,
+          index: result.length,
+          parentId,
+        });
         if (isExpanded && node.children) {
-          walk(node.children, depth + 1);
+          walk(node.children, depth + 1, node.id);
         }
       }
     };
 
-    walk(nodes, 0);
+    walk(nodes, 0, null);
     return result;
   }, [nodes, expandedIds]);
 
@@ -407,6 +444,24 @@ export function TreeView<T = unknown>({
     [flatNodes.length],
   );
 
+  const focusRow = useCallback(
+    (index: number) => {
+      setKeyboardRing(true);
+      setFocusedIndex(index);
+      scrollToIndex(index);
+    },
+    [scrollToIndex],
+  );
+
+  // Carbon: a collapsed ancestor of the selected node inherits a muted
+  // "contains selection" fill so the selection is not lost off-screen.
+  const collapsedSelectedAncestors = useMemo(() => {
+    if (!selectedId) return new Set<string>();
+    const path = findNodePath(nodes, selectedId);
+    if (!path) return new Set<string>();
+    return new Set(path.filter((id) => !expandedIds.has(id)));
+  }, [nodes, selectedId, expandedIds]);
+
   // ── Drag-reorder (LC-42 DRAG-ANATOMY / LC-43 DND-A11Y) ─────────────────
   // Opt-in via `onNodeMove`. The ghost is an overlay clone outside the
   // FlashList (virtualization-safe); hit-testing is pure math over the
@@ -900,8 +955,9 @@ export function TreeView<T = unknown>({
     hotkeyOverrides?.next ?? "ArrowDown",
     () => {
       if (moveKeyboardDrag("down")) return;
+      setKeyboardRing(true);
       setFocusedIndex((prev) => {
-        const next = prev < 0 ? 0 : Math.min(prev + 1, flatNodes.length - 1);
+        const next = prev < 0 ? 0 : Math.min(prev + 1, Math.max(0, flatNodes.length - 1));
         scrollToIndex(next);
         return next;
       });
@@ -913,9 +969,10 @@ export function TreeView<T = unknown>({
     hotkeyOverrides?.prev ?? "ArrowUp",
     () => {
       if (moveKeyboardDrag("up")) return;
+      setKeyboardRing(true);
       setFocusedIndex((prev) => {
         const next = prev < 0 ? flatNodes.length - 1 : Math.max(prev - 1, 0);
-        scrollToIndex(next);
+        if (next >= 0) scrollToIndex(next);
         return next;
       });
     },
@@ -927,10 +984,17 @@ export function TreeView<T = unknown>({
     () => {
       // While lifted: nest into the previous sibling (kanban grammar).
       if (moveKeyboardDrag("right")) return;
+      // APG / Primer / Carbon / VS Code: collapsed → expand; expanded → first child.
       if (focusedIndex >= 0 && focusedIndex < flatNodes.length) {
-        const { node, hasChildren, isExpanded } = flatNodes[focusedIndex];
-        if (hasChildren && !isExpanded) {
-          toggleNode(node);
+        const flat = flatNodes[focusedIndex];
+        if (flat.hasChildren && !flat.isExpanded) {
+          setKeyboardRing(true);
+          toggleNode(flat.node);
+        } else if (flat.hasChildren && flat.isExpanded) {
+          const child = focusedIndex + 1;
+          if (child < flatNodes.length && flatNodes[child].parentId === flat.node.id) {
+            focusRow(child);
+          }
         }
       }
     },
@@ -942,10 +1006,15 @@ export function TreeView<T = unknown>({
     () => {
       // While lifted: un-nest to after the current parent.
       if (moveKeyboardDrag("left")) return;
+      // APG / Primer / Carbon / Finder: expanded → collapse; else climb to parent.
       if (focusedIndex >= 0 && focusedIndex < flatNodes.length) {
-        const { node, hasChildren, isExpanded } = flatNodes[focusedIndex];
-        if (hasChildren && isExpanded) {
-          toggleNode(node);
+        const flat = flatNodes[focusedIndex];
+        if (flat.hasChildren && flat.isExpanded) {
+          setKeyboardRing(true);
+          toggleNode(flat.node);
+        } else if (flat.parentId) {
+          const parentIndex = flatNodes.findIndex((f) => f.node.id === flat.parentId);
+          if (parentIndex >= 0) focusRow(parentIndex);
         }
       }
     },
@@ -1000,10 +1069,7 @@ export function TreeView<T = unknown>({
   useHotkey(
     hotkeyOverrides?.first ?? "Home",
     () => {
-      if (flatNodes.length > 0) {
-        setFocusedIndex(0);
-        scrollToIndex(0);
-      }
+      if (flatNodes.length > 0) focusRow(0);
     },
     hotkeyOpts,
   );
@@ -1011,15 +1077,38 @@ export function TreeView<T = unknown>({
   useHotkey(
     hotkeyOverrides?.last ?? "End",
     () => {
-      if (flatNodes.length > 0) {
-        const last = flatNodes.length - 1;
-        setFocusedIndex(last);
-        scrollToIndex(last);
-      }
+      if (flatNodes.length > 0) focusRow(flatNodes.length - 1);
     },
     hotkeyOpts,
   );
 
+  const handleTreeKeyDown = useCallback(
+    (e: any) => {
+      const key = e?.key as string | undefined;
+      if (!key || key.length !== 1) return;
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      if (key === " ") return;
+      if (dragUiRef.current) return;
+      if (flatNodes.length === 0) return;
+      e.preventDefault?.();
+      const now = Date.now();
+      const state = typeaheadRef.current;
+      state.buffer = now - state.at > TYPEAHEAD_MS ? key : state.buffer + key;
+      state.at = now;
+      const query = state.buffer.toLowerCase();
+      const start = focusedIndex >= 0 ? focusedIndex : -1;
+      const n = flatNodes.length;
+      for (let i = 1; i <= n; i++) {
+        const idx = (start + i) % n;
+        if (flatNodes[idx].node.label.toLowerCase().startsWith(query)) {
+          focusRow(idx);
+          return;
+        }
+      }
+    },
+    [flatNodes, focusedIndex, focusRow],
+  );
+
   if (nodes.length === 0) {
     return <EmptyState compact title={emptyMessage} {...stackProps} />;
   }
@@ -1053,7 +1142,10 @@ export function TreeView<T = unknown>({
         }
         tabIndex={0}
         outlineWidth={0}
+        outlineStyle={"none" as any}
         onFocus={handleContainerFocus}
+        onBlur={handleContainerBlur}
+        onKeyDown={handleTreeKeyDown}
         position="relative"
         style={{
           height,
@@ -1064,7 +1156,16 @@ export function TreeView<T = unknown>({
           data={flatNodes}
           drawDistance={overscan * estimateSize}
           keyExtractor={(item) => item.node.id}
-          extraData={{ focused: effectiveFocused, selectedId, expandedIds, motion, dragUi, settle }}
+          extraData={{
+            focused: effectiveFocused,
+            selectedId,
+            expandedIds,
+            motion,
+            dragUi,
+            settle,
+            keyboardRing,
+            collapsedSelectedAncestors,
+          }}
           {...(canReorder && {
             onScroll: (e: any) => {
               const y = e?.nativeEvent?.contentOffset?.y;
@@ -1086,11 +1187,15 @@ export function TreeView<T = unknown>({
                   ? node.icon
                   : defaultNodeIcon(hasChildren, isExpanded, nodeIconSize);
 
+            const containsSelected = collapsedSelectedAncestors.has(node.id);
+            const groupPosition = getGroupPosition(index, flatNodes.length);
+
             const labelContent = renderNode ? (
               renderNode(node, depth)
             ) : (
               <Text
-                fontSize={labelFontSize}
+                {...knobProps.body}
+                {...knobProps.label}
                 color={isSelected && onAccentLabel ? onAccentLabel : "$color"}
                 numberOfLines={1}
                 flexShrink={1}
@@ -1130,10 +1235,14 @@ export function TreeView<T = unknown>({
                 id={`${treeId}-node-${index}`}
                 {...{ "data-treeview-row": node.id }}
                 {...(isDropParent && { "data-treeview-drop-parent": "true" })}
+                {...(isFocused && { "data-focused": true })}
+                {...{ "data-group-position": groupPosition }}
                 role="treeitem"
                 aria-expanded={hasChildren ? isExpanded : undefined}
                 aria-selected={isSelected}
                 aria-level={depth + 1}
+                aria-setsize={flatNodes.length}
+                aria-posinset={index + 1}
                 alignItems="center"
                 minHeight={estimateSize}
                 paddingVertical={rowPadY}
@@ -1141,9 +1250,11 @@ export function TreeView<T = unknown>({
                 paddingInlineStart={rowPadX + depth * indentStep}
                 gap="$2"
                 cursor="pointer"
+                position="relative"
                 y={rowY}
                 opacity={rowOpacity}
                 transition={rowTransition as any}
+                {...stackRadiusProps(groupPosition, knobProps.borderRadius.borderRadius)}
                 onLayout={(e: any) => {
                   const h = e?.nativeEvent?.layout?.height;
                   if (typeof h === "number" && h > 0) rowHeights.current.set(node.id, h);
@@ -1155,12 +1266,13 @@ export function TreeView<T = unknown>({
                     ? componentColors.interactive.background
                     : isSelected
                       ? "$accentBackground"
-                      : isFocused
+                      : containsSelected
                         ? componentColors.interactive.background
                         : "transparent"
                 }
                 // Row hover/press come from the knob state recipes (A-STATE);
-                // selection tint stays sticky underneath them.
+                // selection tint stays sticky underneath them. Focus is the
+                // ring channel (LC-71) — never a second fill.
                 hoverStyle={{
                   ...(control.hoverKnobProps as any),
                   ...(isSelected && { backgroundColor: "$accentBackground" }),
@@ -1169,15 +1281,13 @@ export function TreeView<T = unknown>({
                   ...(control.pressKnobProps as any),
                   ...(isSelected && { backgroundColor: "$accentBackground" }),
                 }}
-                // Focus ring (Axiom 12): ≥2px, non-removable — also visible on
-                // selected rows; inset so the virtualized viewport can't clip it.
-                outlineWidth={isFocused ? 2 : 0}
-                outlineStyle="solid"
-                outlineColor="$outlineColor"
-                outlineOffset={-2}
+                // LC-71: keyboard ring on the focused row only (activedescendant).
+                // Selected is fill above; selected + keyboard-focused = both.
+                {...(isFocused && keyboardRing ? keyboardFocusRingProps : { outlineWidth: 0 })}
                 onPress={() => {
                   // A completed drag's terminating click is not a selection.
                   if (suppressClickRef.current) return;
+                  setKeyboardRing(false);
                   setFocusedIndex(index);
                   // Branch rows toggle on press (EUI/VS Code semantics): the
                   // whole row is the expand target, not a sub-44px caret.
@@ -1185,6 +1295,25 @@ export function TreeView<T = unknown>({
                   onNodeSelect?.(node);
                 }}
               >
+                {depth > 0
+                  ? Array.from({ length: depth }, (_, guide) => {
+                      const inset = rowPadX + guide * indentStep + expandIconSize / 2;
+                      return (
+                        <View
+                          key={`guide-${guide}`}
+                          position="absolute"
+                          top={0}
+                          bottom={0}
+                          width={1}
+                          pointerEvents="none"
+                          backgroundColor={isSelected ? "$color1" : "$borderColor"}
+                          opacity={isSelected ? 0.35 : 0.5}
+                          {...(isRTL ? { right: inset } : { left: inset })}
+                        />
+                      );
+                    })
+                  : null}
+
                 {showExpansionArrows ? (
                   hasChildren ? (
                     <View
@@ -1315,7 +1444,13 @@ export function TreeView<T = unknown>({
               >
                 {overlayNode.icon ?? defaultNodeIcon(overlayHasChildren, false, nodeIconSize)}
               </View>
-              <Text fontSize={labelFontSize} color="$color" numberOfLines={1} flexShrink={1}>
+              <Text
+                {...knobProps.body}
+                {...knobProps.label}
+                color="$color"
+                numberOfLines={1}
+                flexShrink={1}
+              >
                 {overlayNode.label}
               </Text>
             </XStack>

package/types/Accordion/index.d.ts

@@ -1,12 +1,20 @@
 import type { ReactNode } from "react";
-import type { YStackProps as StackProps, TamaguiElement } from "tamagui";
+import type { SizeTokens, YStackProps as StackProps, TamaguiElement } from "tamagui";
 export type AccordionVariant = "plain" | "card";
 export type AccordionType = "single" | "multiple";
-interface AccordionCommonProps extends Omit<StackProps, "onChange"> {
+interface AccordionCommonProps extends Omit<StackProps, "onChange" | "size"> {
     /** Visual variant: "plain" = edge-to-edge divider rows, "card" = each item on its own surface */
     variant?: AccordionVariant;
     /** Disable every item */
     disabled?: boolean;
+    /**
+     * Compact density. Steps space (and the paired size step the density
+     * recipe owns) down one level. Distinct from `size` — density is tightness,
+     * size is the control scale. Nested accordions always compact.
+     */
+    compact?: boolean;
+    /** Size-knob override (control height + label type). Not a density switch. */
+    size?: SizeTokens;
     children?: ReactNode;
 }
 export interface AccordionSingleModeProps extends AccordionCommonProps {

package/types/Accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Accordion/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,IAAI,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAQzE,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;AAChD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElD,UAAU,oBAAqB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACjE,iGAAiG;IACjG,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,wBAAyB,SAAQ,oBAAoB;IACpE,6CAA6C;IAC7C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,0BAA2B,SAAQ,oBAAoB;IACtE,uCAAuC;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,MAAM,cAAc,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AAenF,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACzE,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qCAAqC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oCAAoC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,qBAAsB,SAAQ,UAAU;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2UD,eAAO,MAAM,SAAS;;;;CAIpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Accordion/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,IAAI,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAkBrF,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;AAChD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElD,UAAU,oBAAqB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAAC;IAC1E,iGAAiG;IACjG,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,wBAAyB,SAAQ,oBAAoB;IACpE,6CAA6C;IAC7C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,0BAA2B,SAAQ,oBAAoB;IACtE,uCAAuC;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,MAAM,cAAc,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AAenF,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACzE,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qCAAqC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oCAAoC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,qBAAsB,SAAQ,UAAU;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6fD,eAAO,MAAM,SAAS;;;;CAIpB,CAAC"}

package/types/Alert/index.d.ts

@@ -12,10 +12,16 @@ export interface AlertProps extends Omit<GetProps<typeof AlertFrame>, "role" | "
     icon?: ReactNode | null;
     /** Custom trailing action slot (any node; Buttons inherit the intent and render solid). */
     action?: ReactNode;
-    /** Convenience action button label (renders a compact intent Button). */
+    /** Convenience action button label (nested-scale ghost control, 44px press floor). */
     actionLabel?: string;
     /** Press handler for the convenience action button. */
     onAction?: () => void;
+    /** Custom secondary action slot (Primer/Polaris: at most two actions). */
+    secondaryAction?: ReactNode;
+    /** Convenience secondary action label. */
+    secondaryActionLabel?: string;
+    /** Press handler for the convenience secondary action. */
+    onSecondaryAction?: () => void;
     /** Show a dismiss (X) button. */
     dismissible?: boolean;
     /** Called when the dismiss button is pressed. */
@@ -24,7 +30,7 @@ export interface AlertProps extends Omit<GetProps<typeof AlertFrame>, "role" | "
     visible?: boolean;
     /** Uncontrolled initial visibility (default true). */
     defaultVisible?: boolean;
-    /** Tighter padding/type for dense layouts. */
+    /** Tighter padding/type for dense layouts (density compact + nested-scale). */
     compact?: boolean;
 }
 declare const AlertFrame: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {

package/types/Alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAYjD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO,UAAU,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACxF,kFAAkF;IAClF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,uBAAuB;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAsBD,QAAA,MAAM,UAAU;;;6CAQd,CAAC;AA8LH;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAOtC;AAED,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAaxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO,UAAU,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACxF,kFAAkF;IAClF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,uBAAuB;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0EAA0E;IAC1E,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAsBD,QAAA,MAAM,UAAU;;;6CAQd,CAAC;AA6WH;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAOtC;AAED,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC"}

package/types/AnimateHeight/index.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import type { TamaguiElement, TransitionProp, YStackProps as StackProps } from "tamagui";
+/**
+ * AnimateHeight — the house auto-height primitive.
+ *
+ * CSS cannot transition to `height: auto` — intrinsic (content-driven) height
+ * changes snap no matter what `transition` is set, because height never
+ * appears as an interpolable value. This container measures its content
+ * (ResizeObserver on web, onLayout on native) and drives a NUMERIC `height`
+ * through the house `transition` token. The web css driver tweens it; the RN
+ * driver applies layout props directly (Axiom 4 native constraint), so native
+ * lands correct heights without a decorative tween — no worse than before,
+ * while mount/unmount sequencing still works on both platforms.
+ *
+ * Two modes:
+ *  - follower (no `open` prop): always mounted; height tracks the content's
+ *    intrinsic height, so content that grows or shrinks while visible tweens
+ *    instead of snapping.
+ *  - collapsible (`open: boolean`): `false` tweens to 0 and unmounts children
+ *    once the collapse settles (immediately when nothing can tween, e.g.
+ *    reduced motion or no measurement yet); `true` remounts children and
+ *    tweens 0 → measured height, then keeps following content changes.
+ *
+ * Reduced motion is respected CONDITIONALLY: the transition resolves through
+ * the knob system (`useResolvedKnobs`), which is `undefined` under OS
+ * `prefers-reduced-motion` or `animation="none"` — heights then apply
+ * instantly, with no decorative tween, but state changes still land.
+ *
+ * Padding belongs INSIDE children (or on a wrapper around this component):
+ * the measured box is the children's wrapper, so padding on AnimateHeight
+ * itself would be excluded from the animated height.
+ */
+export interface AnimateHeightProps extends Omit<StackProps, "height" | "children"> {
+    /**
+     * Collapsible mode. Omit entirely for follower mode (height always tracks
+     * content). `false` collapses to 0 and unmounts children at rest.
+     */
+    open?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Settle time before finalizing (unmounting / releasing a clamp) — token
+ * settle + buffer. Exported for siblings that sequence work after a height
+ * tween (e.g. CodeBlock's reveal releases its maxHeight clamp on settle).
+ */
+export declare function settleMs(transition: TransitionProp | undefined): number;
+export declare const AnimateHeight: import("react").ForwardRefExoticComponent<AnimateHeightProps & import("react").RefAttributes<TamaguiElement>>;
+//# sourceMappingURL=index.d.ts.map

package/types/AnimateHeight/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AnimateHeight/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM,SAAS,CAAC;AAGzF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,UAAU,CAAC;IACjF;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAqBD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,UAAU,EAAE,cAAc,GAAG,SAAS,GAAG,MAAM,CAMvE;AAED,eAAO,MAAM,aAAa,+GA4JzB,CAAC"}

package/types/Avatar/getInitials.d.ts

@@ -3,4 +3,30 @@
  * "Ada Lovelace" → "AL", "john.doe@x" → "JD", "Ada" → "AD".
  */
 export declare function getInitials(name: string): string;
+/**
+ * Polaris-style deterministic initials fill. Tokens only — the same seed
+ * always lands on the same ramp pair so two "AB" avatars match.
+ */
+export declare const FALLBACK_TONES: readonly [{
+    readonly bg: "$blue4";
+    readonly fg: "$blue12";
+}, {
+    readonly bg: "$green4";
+    readonly fg: "$green12";
+}, {
+    readonly bg: "$orange4";
+    readonly fg: "$orange12";
+}, {
+    readonly bg: "$purple4";
+    readonly fg: "$purple12";
+}, {
+    readonly bg: "$yellow4";
+    readonly fg: "$yellow12";
+}, {
+    readonly bg: "$red4";
+    readonly fg: "$red12";
+}];
+export type FallbackTone = (typeof FALLBACK_TONES)[number];
+export declare function fallbackToneIndex(seed: string): number;
+export declare function fallbackTone(seed: string | undefined): FallbackTone | undefined;
 //# sourceMappingURL=getInitials.d.ts.map

package/types/Avatar/getInitials.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getInitials.d.ts","sourceRoot":"","sources":["../../src/Avatar/getInitials.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAUhD"}
+{"version":3,"file":"getInitials.d.ts","sourceRoot":"","sources":["../../src/Avatar/getInitials.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAUhD;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;EAOjB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAMtD;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAI/E"}