panelui-native 0.12.0 → 0.14.0

package/README.md

@@ -90,42 +90,58 @@ overlays, and the toast viewport.
 
 | Component | What it does |
 | --- | --- |
-| `Accordion` | Collapsible sections — five variants, single or multiple selection |
-| `Alert` | Status message with a built-in icon — info, success, warning, destructive |
-| `Avatar` | User image with initials fallback, four sizes, `Avatar.Badge` overlay |
-| `Badge` | Status label, dot, or a count clamped at 99+ |
-| `BottomSheet` | Draggable bottom sheet with swipe-to-dismiss |
-| `Button` | Variants (including social sign-in), sizes, loading, theme-aware icon slots |
-| `Card` | Content surface with `Header`, `Content` and `Footer` |
-| `Checkbox` | Animated checkbox with label, description, and a checkable card variant |
-| `Dialog` | Modal dialog with backdrop, title, description and footer actions |
-| `EmptyState` | Placeholder for an empty list or screen, with a stacked-icon media slot |
-| `Frame` | Widget shell — header row with action, inset panel of rows, caption footer |
+| `Accordion` | Collapsible sections with single or multiple selection |
+| `Alert` | Status message with a built-in icon |
+| `Attachment` | File row with upload states, built on Item |
+| `Avatar` | User image with an initials fallback and an optional badge overlay |
+| `Badge` | Compact status label, dot, or notification count |
+| `BottomSheet` | Draggable sheet anchored to the bottom of the screen |
+| `Button` | Pressable action with variants, sizes, loading state and icon slots |
+| `Card` | Content surface with header, body and footer |
+| `Checkbox` | Animated checkbox, as a row or a selectable card |
+| `Chip` | Interactive pill — a filter, a tag, or a removable token |
+| `Dialog` | Modal dialog with a backdrop and footer actions |
+| `EmptyState` | Placeholder for a list or screen with no content |
+| `Frame` | Widget shell — a card of rows sitting in a titled tray |
+| `HeatmapChart` | Contribution grid with a themed colour ramp and a readout |
 | `Input` | Text field with label, description and error message |
-| `InputGroup` | Input with leading and trailing decorators, auto-measured |
+| `InputGroup` | Input with leading and trailing decorators |
+| `Item` | Row of media, text and actions for lists and settings |
 | `Label` | Form field label with required, invalid and disabled states |
-| `Progress` | Determinate and indeterminate progress bar, optionally captioned |
+| `LineChart` | Animated time series, drawn on the UI thread |
+| `Marker` | Inline note between conversation turns |
+| `Message` | Chat turn with avatar, bubble, header and footer |
+| `MessageScroller` | Scroll behaviour a chat transcript needs |
+| `Popover` | Panel anchored to the element that opened it |
+| `Progress` | Determinate and indeterminate progress bar |
 | `RadioGroup` | Single-select list of options |
+| `ScrollCanvas` | Image frame whose contents move as you scroll |
 | `ScrollFade` | Fades the edges of a scroll container |
-| `SectionRail` | Floating section navigator — bars that expand into a jump list |
-| `Select` | Picker shown in a bottom sheet, in place, or floating over the page |
+| `ScrollText` | Text that resolves word by word as you scroll |
+| `SectionRail` | Floating section navigator for a long screen |
+| `Select` | Picker shown in a bottom sheet, expanded in place, or floating over the page |
+| `Separator` | Horizontal or vertical rule between content |
 | `Shimmer` | Animated highlight sweeping across content |
 | `Skeleton` | Shimmer placeholder for loading content |
 | `Slider` | Pick a value by dragging a thumb along a track |
 | `Spinner` | Indeterminate loading indicator |
-| `Steps` | Stepper for multi-step flows, horizontal or vertical |
+| `Steps` | Stepper for multi-step flows |
+| `Surface` | Elevated container with a variant ladder |
 | `Switch` | Animated on/off toggle |
-| `Tabs` | Segmented navigation with animated indicator |
+| `Tabs` | Segmented navigation with an animated indicator |
+| `ThinkingOrb` | Dotted orb saying which kind of busy an agent is |
+| `Timeline` | Vertical sequence of events |
+| `Toast` | Transient notification queue with swipe to dismiss |
 | `ToggleButton` | A button that stays down, on its own or in a group |
-| `Timeline` | Vertical sequence of events — dot, icon, numbered, card or compact, with per-item tones |
-| `Toast` | Transient notification queue with swipe-to-dismiss |
-| `Typography` | Semantic text presets — `h1`–`h6`, body sizes, inline code |
+| `Typography` | Semantic text presets |
 
-Plus `PanelUIProvider`, `Portal`, `AnimatedPressable`, `Text`, a set of SVG icons (with brand
-marks for Google, Facebook and Apple), and the `cn` class-merging helper.
+Plus `PanelUIProvider`, `Portal`, `AnimatedPressable`, `KeyboardAvoider`, `ScrollProgress`,
+`Text`, a set of SVG icons (with brand marks for Google, Facebook and Apple), and the `cn`
+class-merging helper.
 
 **Hooks:** `useTheme`, `useThemeMode`, `useToast`, `useCopyToClipboard`, `useDisclosure`,
-`useBreakpoint`, `useKeyboard`, `useDebouncedValue`, `usePrevious`.
+`useBreakpoint`, `useKeyboard`, `useKeyboardAvoidance`, `useScrollSections`,
+`useRevealProgress`, `useDebouncedValue`, `usePrevious`.
 
 Icons inside a coloured surface inherit a readable colour automatically — `Button` provides the
 foreground its variant reads against, so an icon in `startContent` follows the theme without a

package/lib/module/components/button/index.js

@@ -104,13 +104,15 @@ const CONTENT_COLOR_VAR = {
   social: '--color-foreground'
 };
 /**
- * Height given to the native host, matching the styled scale above.
+ * Height given to the platform button, matching the styled scale above.
  *
- * The host is told its size rather than asked to work it out. `matchContents`
- * measures the platform's own content a frame late and again when that content
- * changes — so the button renders at nothing, collapses against whatever sits
- * above it, and jolts into place on the first press. Width comes from ordinary
- * layout instead, which is why a native button fills its container.
+ * It goes on the button rather than on the host, and that distinction is the
+ * whole fix for the jump. A host sized to a number with an unsized control
+ * inside it hands the platform a box the control never agreed to: SwiftUI and
+ * Compose both lay out against their own intrinsic size and only settle into
+ * the box when something forces a second pass — which for a button is the
+ * first press. Given a definite height of its own, the button has nothing left
+ * to recompute, and the host follows it with `matchContents`.
  */
 const NATIVE_HEIGHT = {
   sm: 36,
@@ -168,13 +170,14 @@ export const Button = /*#__PURE__*/forwardRef(({
     } = nativeUI;
     const isStringLabel = typeof children === 'string';
     return /*#__PURE__*/_jsx(Host, {
-      style: {
-        height: NATIVE_HEIGHT[size ?? 'md']
-      },
+      matchContents: true,
       children: /*#__PURE__*/_jsx(NativeButton, {
         label: isStringLabel ? children : undefined,
         variant: NATIVE_VARIANT[variant ?? 'primary'],
         disabled: isDisabled,
+        style: {
+          height: NATIVE_HEIGHT[size ?? 'md']
+        },
         onPress: props.onPress,
         children: isStringLabel ? undefined : /*#__PURE__*/_jsx(RNHostView, {
           matchContents: true,

package/lib/module/components/button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","tv","useCSSVariable","AnimatedPressable","Text","IconColorProvider","getNativeUI","Spinner","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","buttonVariants","slots","root","label","spinner","variants","variant","primary","secondary","outline","ghost","destructive","social","size","sm","md","lg","icon","fullWidth","true","disabled","defaultVariants","SPINNER_SIZE","CONTENT_COLOR_VAR","NATIVE_HEIGHT","NATIVE_VARIANT","Button","children","className","labelClassName","loading","startContent","endContent","native","props","ref","isDisabled","nativeUI","themedColor","contentColor","undefined","Host","NativeButton","RNHostView","isStringLabel","style","height","onPress","matchContents","color","accessibilityRole","accessibilityState","busy","displayName"],"sourceRoot":"../../../../src","sources":["components/button/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","tv","useCSSVariable","AnimatedPressable","Text","IconColorProvider","getNativeUI","Spinner","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","buttonVariants","slots","root","label","spinner","variants","variant","primary","secondary","outline","ghost","destructive","social","size","sm","md","lg","icon","fullWidth","true","disabled","defaultVariants","SPINNER_SIZE","CONTENT_COLOR_VAR","NATIVE_HEIGHT","NATIVE_VARIANT","Button","children","className","labelClassName","loading","startContent","endContent","native","props","ref","isDisabled","nativeUI","themedColor","contentColor","undefined","Host","NativeButton","RNHostView","isStringLabel","matchContents","style","height","onPress","color","accessibilityRole","accessibilityState","busy","displayName"],"sourceRoot":"../../../../src","sources":["components/button/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/chip/index.js

@@ -0,0 +1,313 @@
+"use strict";
+
+/**
+ * Chip — a compact, interactive token.
+ *
+ * Where Badge only shows and ToggleButton owns a stateful toolbar, Chip is the
+ * thing in between: a small pill you can *press*, mark as *selected*, or
+ * *remove*. It is the filter in a filter bar, the tag on a photo, the removable
+ * recipient in a "To:" field — small, dense, and touchable.
+ *
+ * The close button is its own hit target nested inside the pill, so tapping the
+ * ✕ removes the chip without also firing the chip's own `onPress`. That split
+ * is the whole reason a removable chip needs a component and not just a styled
+ * Badge.
+ *
+ * ```tsx
+ * <Chip>Design</Chip>
+ *
+ * <Chip variant="info" onClose={() => remove('design')}>Design</Chip>
+ *
+ * <Chip selected={on} onPress={() => setOn(!on)}>
+ *   <CheckIcon size={14} />
+ *   <Chip.Label>Available</Chip.Label>
+ * </Chip>
+ * ```
+ */
+import { createContext, forwardRef, useCallback, useContext, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { IconColorProvider, XIcon } from "../../icons/index.js";
+import { AnimatedPressable } from "../../primitives/animated-pressable.js";
+import { Text } from "../../primitives/text.js";
+import { cn } from "../../utils/cn.js";
+import { selectionTick } from "../../utils/haptics.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const chipVariants = tv({
+  slots: {
+    root: 'flex-row items-center self-start rounded-full border border-transparent',
+    label: 'font-medium',
+    close: 'items-center justify-center rounded-full -mr-1 aspect-square opacity-70'
+  },
+  variants: {
+    variant: {
+      /** The resting tag — a quiet neutral fill. */
+      default: {
+        root: 'bg-secondary',
+        label: 'text-secondary-foreground'
+      },
+      /** The accent fill, for the one chip that leads. */
+      primary: {
+        root: 'bg-primary',
+        label: 'text-primary-foreground'
+      },
+      /** Just an outline — the lightest a chip gets while still being a shape. */
+      outline: {
+        root: 'border-border bg-transparent',
+        label: 'text-foreground'
+      },
+      success: {
+        root: 'bg-success-subtle',
+        label: 'text-success-foreground'
+      },
+      warning: {
+        root: 'bg-warning-subtle',
+        label: 'text-warning-foreground'
+      },
+      info: {
+        root: 'bg-info-subtle',
+        label: 'text-info-foreground'
+      },
+      destructive: {
+        root: 'bg-destructive-subtle',
+        label: 'text-destructive-foreground'
+      }
+    },
+    size: {
+      sm: {
+        root: 'h-6 gap-1 px-2',
+        label: 'text-xs'
+      },
+      md: {
+        root: 'h-7 gap-1.5 px-2.5',
+        label: 'text-sm'
+      },
+      lg: {
+        root: 'h-9 gap-2 px-3.5',
+        label: 'text-base'
+      }
+    },
+    /**
+     * The filter "on" state — a loud accent surface that wins over the resting
+     * variant, so any chip can be a filter without picking a second colour.
+     */
+    selected: {
+      true: {
+        root: 'border-primary/24 bg-accent',
+        label: 'text-accent-foreground'
+      }
+    },
+    /** Trims the trailing padding so the close target hugs the right edge. */
+    closable: {
+      true: {
+        root: 'pr-1'
+      }
+    },
+    disabled: {
+      true: {
+        root: 'opacity-[0.56]'
+      }
+    }
+  },
+  compoundVariants: [{
+    size: 'sm',
+    closable: true,
+    class: {
+      close: 'h-4'
+    }
+  }, {
+    size: 'md',
+    closable: true,
+    class: {
+      close: 'h-5'
+    }
+  }, {
+    size: 'lg',
+    closable: true,
+    class: {
+      close: 'h-6'
+    }
+  }],
+  defaultVariants: {
+    variant: 'default',
+    size: 'md'
+  }
+});
+/** Which foreground token each variant paints its icons and ✕ with. */
+const TINT_VAR = {
+  default: '--color-secondary-foreground',
+  primary: '--color-primary-foreground',
+  outline: '--color-foreground',
+  success: '--color-success-foreground',
+  warning: '--color-warning-foreground',
+  info: '--color-info-foreground',
+  destructive: '--color-destructive-foreground'
+};
+
+/** The ✕ scales with the pill so it never looks stranded in a large chip. */
+const CLOSE_ICON = {
+  sm: 11,
+  md: 13,
+  lg: 15
+};
+
+/* -------------------------------------------------------------------------- */
+/* State context                                                              */
+/* -------------------------------------------------------------------------- */
+
+const ChipContext = /*#__PURE__*/createContext(null);
+
+/**
+ * The chip's own state, for anything rendered inside it — an icon that swaps
+ * when the chip is selected, a count that only shows when it is on.
+ */
+export function useChip() {
+  const ctx = useContext(ChipContext);
+  if (!ctx) {
+    throw new Error('useChip must be used within a <Chip>');
+  }
+  return {
+    selected: ctx.selected,
+    disabled: ctx.disabled
+  };
+}
+
+/* -------------------------------------------------------------------------- */
+/* Chip                                                                       */
+/* -------------------------------------------------------------------------- */
+
+const ChipRoot = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  labelClassName,
+  variant = 'default',
+  size = 'md',
+  selected,
+  disabled = false,
+  start,
+  onClose,
+  closeLabel = 'Remove',
+  haptics = false,
+  onPress,
+  ...props
+}, ref) => {
+  const isToggle = selected !== undefined;
+  const isSelected = selected ?? false;
+  const closable = onClose !== undefined;
+  // Only the whole chip becoming pressable warrants the press animation; a
+  // static attribute tag stays a plain View so it does not invite a tap.
+  const pressable = onPress !== undefined || isToggle;
+  const slots = chipVariants({
+    variant,
+    size,
+    selected: isSelected,
+    closable,
+    disabled
+  });
+
+  // Icons and the ✕ inherit this, so they track the surface they sit on
+  // instead of every caller hardcoding a hex that is wrong in one theme.
+  const tint = useCSSVariable(isSelected ? '--color-accent-foreground' : TINT_VAR[variant]);
+  const handlePress = useCallback(event => {
+    if (haptics) selectionTick();
+    onPress?.(event);
+  }, [haptics, onPress]);
+  const handleClose = useCallback(() => {
+    if (haptics) selectionTick();
+    onClose?.();
+  }, [haptics, onClose]);
+  const labelClasses = slots.label();
+  const state = useMemo(() => ({
+    selected: isSelected,
+    disabled,
+    labelClasses
+  }), [isSelected, disabled, labelClasses]);
+  const body = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [start, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+      className: slots.label({
+        className: labelClassName
+      }),
+      children: children
+    }) : children, closable ? /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: closeLabel
+      // A small pill leaves little room for the ✕; the slop gives the
+      // finger the target the pixels do not.
+      ,
+      hitSlop: 8,
+      disabled: disabled,
+      onPress: handleClose,
+      className: slots.close(),
+      children: /*#__PURE__*/_jsx(XIcon, {
+        size: CLOSE_ICON[size]
+      })
+    }) : null]
+  });
+  const sharedProps = {
+    accessibilityRole: 'button',
+    // A toggle chip is read out as checked/unchecked; a plain pressable one
+    // as a button. A static tag gets neither, so it is not announced as
+    // something to press.
+    accessibilityState: {
+      disabled,
+      ...(isToggle ? {
+        selected: isSelected
+      } : {})
+    },
+    'aria-pressed': isToggle ? isSelected : undefined,
+    disabled,
+    className: slots.root({
+      className
+    })
+  };
+  return /*#__PURE__*/_jsx(ChipContext.Provider, {
+    value: state,
+    children: /*#__PURE__*/_jsx(IconColorProvider, {
+      color: typeof tint === 'string' ? tint : undefined,
+      children: pressable ? /*#__PURE__*/_jsx(AnimatedPressable, {
+        ref: ref,
+        onPress: handlePress,
+        ...sharedProps,
+        ...props,
+        children: body
+      }) : /*#__PURE__*/_jsx(View, {
+        ref: ref,
+        className: slots.root({
+          className
+        }),
+        ...props,
+        children: body
+      })
+    })
+  });
+});
+ChipRoot.displayName = 'Chip';
+
+/* -------------------------------------------------------------------------- */
+/* Chip.Label                                                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The label, when the chip holds more than a string — an icon beside text. It
+ * reads the selected state itself, so composing the two does not mean threading
+ * the colour through by hand.
+ */
+function ChipLabel({
+  className,
+  children
+}) {
+  const ctx = useContext(ChipContext);
+  if (!ctx) {
+    throw new Error('Chip.Label must be used within a <Chip>');
+  }
+  return /*#__PURE__*/_jsx(Text, {
+    className: cn(ctx.labelClasses, className),
+    children: children
+  });
+}
+ChipLabel.displayName = 'Chip.Label';
+export const Chip = Object.assign(ChipRoot, {
+  Label: ChipLabel
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","forwardRef","useCallback","useContext","useMemo","Pressable","View","tv","useCSSVariable","IconColorProvider","XIcon","AnimatedPressable","Text","cn","selectionTick","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","chipVariants","slots","root","label","close","variants","variant","default","primary","outline","success","warning","info","destructive","size","sm","md","lg","selected","true","closable","disabled","compoundVariants","class","defaultVariants","TINT_VAR","CLOSE_ICON","ChipContext","useChip","ctx","Error","ChipRoot","children","className","labelClassName","start","onClose","closeLabel","haptics","onPress","props","ref","isToggle","undefined","isSelected","pressable","tint","handlePress","event","handleClose","labelClasses","state","body","accessibilityRole","accessibilityLabel","hitSlop","sharedProps","accessibilityState","Provider","value","color","displayName","ChipLabel","Chip","Object","assign","Label"],"sourceRoot":"../../../../src","sources":["components/chip/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/frame/index.js

@@ -1,25 +1,31 @@
 "use strict";
 
 /**
- * Frame — a widget shell: a titled surface wrapping an inset panel of rows,
- * with an optional action on the header row and a caption underneath.
+ * Frame — a widget shell: a card of rows sitting in a tray, with the tray's
+ * one exposed strip along the top carrying the title.
  *
- * Layout follows the nested-radius rule (inner radius = outer radius minus the
- * gap between them), which is why the panel is `rounded-xl` inside a
- * `rounded-2xl` shell. Since v0.4.0 the radius scale is theme-scoped, so this
- * relationship holds while the absolute values change per theme.
+ * The two surfaces are nested rather than stacked, and only one edge of the
+ * outer one is ever visible. The panel is flush to the shell's left, right and
+ * bottom, so the shell reads as something the card is *sitting in* rather than
+ * as a border around it — and the strip left at the top is the header, which
+ * is why the header needs no rule under it and no background of its own.
+ *
+ * The shell's radius is the larger of the two, and the panel's top corners are
+ * tighter. That is the reverse of the usual nested-radius rule, and it is
+ * deliberate: with only the top corners free, matching them would make the two
+ * surfaces read as one misdrawn shape. The panel's bottom corners are not set
+ * at all — the shell clips them, so they take its radius exactly.
  *
  * ```tsx
  * <Frame>
  *   <Frame.Header>
- *     <Frame.Title>Usage Type</Frame.Title>
- *     <Frame.Action>Amount</Frame.Action>
+ *     <Frame.Title>Agent monitor</Frame.Title>
+ *     <Frame.Action>All agents under 25% token limit</Frame.Action>
  *   </Frame.Header>
  *   <Frame.Panel>
  *     <Frame.Row>…</Frame.Row>
  *     <Frame.Row>…</Frame.Row>
  *   </Frame.Panel>
- *   <Frame.Footer>Updated 2 minutes ago</Frame.Footer>
  * </Frame>
  * ```
  *
@@ -37,19 +43,26 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 const frameVariants = tv({
   slots: {
     root: '',
-    panel: 'overflow-hidden rounded-xl border border-border bg-card'
+    // Flush left, right and bottom: no side or bottom border, because the
+    // shell's own edge is already there, and no bottom radius, because the
+    // shell clips it. Only the top corners and the rule under the header are
+    // the panel's to draw.
+    panel: 'overflow-hidden rounded-t-2xl border-t border-border bg-card'
   },
   variants: {
     variant: {
+      // `overflow-hidden` is load-bearing — it is what makes the panel's
+      // bottom corners take the shell's radius instead of squaring off
+      // against it.
       default: {
-        root: 'rounded-2xl border border-border bg-surface p-1.5'
+        root: 'overflow-hidden rounded-3xl border border-border bg-surface'
       },
       // No shell: the panel is the whole widget. For a Frame nested inside a
       // card that already draws a border, where the shell's own edge sitting
       // just inside it reads as a double line.
       plain: {
         root: '',
-        panel: 'rounded-2xl'
+        panel: 'rounded-3xl border border-border'
       }
     }
   },
@@ -72,26 +85,32 @@ const FrameRoot = /*#__PURE__*/forwardRef(({
 }));
 FrameRoot.displayName = 'Frame';
 /**
- * The header row: title on the left, `Frame.Action` on the right. Add
- * `className="flex-col items-start"` when you want a description underneath.
+ * The header row — the strip of shell left exposed above the panel. Title on
+ * the left, `Frame.Action` on the right. Add `className="flex-col items-start"`
+ * when you want a description underneath.
  */
 const FrameHeader = /*#__PURE__*/forwardRef(({
   className,
   ...props
 }, ref) => /*#__PURE__*/_jsx(View, {
   ref: ref,
-  className: cn('flex-row items-center justify-between gap-3 px-3 pb-2.5 pt-2', className),
+  className: cn('flex-row items-center justify-between gap-3 px-4 pb-3 pt-2.5', className),
   ...props
 }));
 FrameHeader.displayName = 'Frame.Header';
+
+/**
+ * Muted by default. The header is a caption on the tray the card sits in, not
+ * a heading over a section — the card's own rows carry the weight.
+ */
 const FrameTitle = /*#__PURE__*/forwardRef(({
   className,
   ...props
 }, ref) => /*#__PURE__*/_jsx(Text, {
   ref: ref,
-  size: "base",
-  weight: "medium",
-  className: cn('text-foreground', className),
+  size: "sm",
+  muted: true,
+  className: className,
   ...props
 }));
 FrameTitle.displayName = 'Frame.Title';
@@ -108,7 +127,7 @@ const FrameAction = /*#__PURE__*/forwardRef(({
   className: cn('flex-row items-center gap-2', className),
   ...props,
   children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-    size: "base",
+    size: "sm",
     muted: true,
     children: children
   }) : children
@@ -151,8 +170,8 @@ function divideChildren(children) {
   });
 }
 /**
- * The inset card holding the frame's content — the raised surface sitting in
- * from the shell's edges, with its own smaller radius.
+ * The card holding the frame's content — flush to the shell on three sides,
+ * with the header strip above it.
  */
 const FramePanel = /*#__PURE__*/forwardRef(({
   className,
@@ -235,22 +254,6 @@ FrameSection.displayName = 'Frame.Section';
 
 /** Parts the panel divides. Declared after them, since it holds references. */
 const DIVIDABLE = new Set([FrameRow, FrameSection]);
-/** Muted caption under the panel. Strings are wrapped for you. */
-const FrameFooter = /*#__PURE__*/forwardRef(({
-  className,
-  children,
-  ...props
-}, ref) => /*#__PURE__*/_jsx(View, {
-  ref: ref,
-  className: cn('flex-row items-center gap-2 px-3 pb-1.5 pt-2.5', className),
-  ...props,
-  children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-    size: "sm",
-    muted: true,
-    children: children
-  }) : children
-}));
-FrameFooter.displayName = 'Frame.Footer';
 export const Frame = Object.assign(FrameRoot, {
   Header: FrameHeader,
   Title: FrameTitle,
@@ -258,7 +261,6 @@ export const Frame = Object.assign(FrameRoot, {
   Description: FrameDescription,
   Panel: FramePanel,
   Section: FrameSection,
-  Row: FrameRow,
-  Footer: FrameFooter
+  Row: FrameRow
 });
 //# sourceMappingURL=index.js.map