@thewhileloop/whileui 4.0.0 → 4.1.0

package/README.md

@@ -18,6 +18,8 @@ bun add @thewhileloop/whileui
 bun add react@^19.3.0 react-native@^0.88.0 uniwind@^1.12.2 tailwindcss@^4.0.0 react-native-reanimated react-native-safe-area-context react-native-screens
 # Only if you use Select, Popover, Tooltip, or HoverCard:
 bun add @rn-primitives/portal @rn-primitives/hooks @rn-primitives/slot @rn-primitives/select @rn-primitives/popover @rn-primitives/tooltip @rn-primitives/hover-card
+# Only if you import @thewhileloop/whileui/markdown:
+bun add markdown-it
 ```
 
 Use `npm install` instead of `bun add` if you prefer npm.
@@ -230,17 +232,33 @@ function MyScreen() {
   `@source './node_modules/@thewhileloop/whileui/dist';` or every component renders unstyled.
 - **Reference:** Block props in `packages/ui/src/blocks` (core) and `apps/showcase/templates/` (auth, profile); flow patterns in README "Flow Patterns" section.
 
+### Composition grammar
+
+- Start with one page canvas and flat sections. Add a `Surface` only when grouping or
+  elevation communicates something; do not wrap every section in a card.
+- Use `level="base"` for grouped content, `raised` for selectable or floating regions,
+  and `overlay` for content above the page. Avoid nesting more than one surfaced level.
+- Express hierarchy through `Text` variants before custom font-size classes. Keep one
+  primary action per region and constrain long-form content with `Container`.
+- Forms use `FormField`; its disabled and invalid state flows into `Input`, `Textarea`,
+  `NumericInput`, and `Select`. Pass a control prop only to override that inherited state.
+- Chat mechanics belong to `ChatConversation` + `SmartInput`. Message payloads, tools,
+  reasoning, approvals, sources, and action rows are application-owned compositions.
+- Import Markdown and code rendering from their optional subpaths. Do not make the root
+  package pay for content rendering when the screen does not use it.
+
 ## Components
 
 ### Primitives
 
-| Component     | Notes                            |
-| ------------- | -------------------------------- |
-| **Text**      | Themed text with variant support |
-| **View**      | Themed view wrapper              |
-| **Pressable** | Themed pressable wrapper         |
-| **Stack**     | Vertical flex layout with gap    |
-| **Row**       | Horizontal flex layout with gap  |
+| Component     | Notes                                            |
+| ------------- | ------------------------------------------------ |
+| **Text**      | Themed text with variant support                 |
+| **Surface**   | Token-backed base, raised, and overlay container |
+| **View**      | Themed view wrapper                              |
+| **Pressable** | Themed pressable wrapper                         |
+| **Stack**     | Vertical flex layout with gap                    |
+| **Row**       | Horizontal flex layout with gap                  |
 
 ### Root Providers
 
@@ -273,6 +291,7 @@ function MyScreen() {
 | Component       | Variants                                                | Notes                                                                           |
 | --------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------- |
 | **Card**        | padding (none, sm, default, lg), unstyled               | Compound: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter |
+| **Surface**     | level (base, raised, overlay)                           | Shared radius, padding, border, shadow, and optional frosted treatment          |
 | **Badge**       | default, secondary, destructive, outline, success       | BadgeText sub-component                                                         |
 | **FAB**         | default, secondary, destructive, surface; sm/default/lg | Floating action button. `label` required; pass your own icon as children        |
 | **Alert**       | default, destructive, success, warning                  | AlertTitle & AlertDescription                                                   |
@@ -364,11 +383,12 @@ Copy from `apps/showcase/templates/auth/`:
 
 ### Chat
 
-| Block                 | Description                                      |
-| --------------------- | ------------------------------------------------ |
-| **Chat**              | AI-style chat: messages, suggestions, SmartInput |
-| **ChatMessageBubble** | Message bubble (user/assistant, big/small text)  |
-| **ChatSuggestions**   | Suggestion chips when empty                      |
+| Block                 | Description                                                     |
+| --------------------- | --------------------------------------------------------------- |
+| **Chat**              | Opinionated messages, suggestions, and SmartInput composition   |
+| **ChatConversation**  | Constrained conversation viewport that follows streaming output |
+| **ChatMessageBubble** | Message bubble (user/assistant, big/small text)                 |
+| **ChatSuggestions**   | Suggestion chips when empty                                     |
 
 ### Profile & Settings (Copy from showcase templates)
 
@@ -447,6 +467,11 @@ soft variant, overlay, surface, interaction state and shadow. Those are exactly
 `deriveThemeColors` computes, so hand-writing them produces a second derivation that
 drifts from the library's. Override a derived value by assigning to the result.
 
+`WHILEUI_PRESET_SOFT` is the airy default. `WHILEUI_PRESET_ATELIER` is the stronger
+product preset: tighter geometry, opaque surfaces, firmer borders, real shadows, and no
+blur. Use it as the acceptance check that a screen still has enough visual weight when
+the soft treatment is removed.
+
 ### FAB
 
 One primary action, raised above the content. It owns no icon dependency — pass the
@@ -558,7 +583,7 @@ import { AppShell, Header, BottomNav, ScrollView } from '@thewhileloop/whileui';
 | Forms      | FormField + Input/NumericInput/LabeledField + DatePickerModal + FormModalScreen    |
 | Settings   | ProfileHeader + SettingsSection + SettingsItem (+ FormModalScreen for edits)       |
 | E-commerce | ProductCard list → CheckoutSummary + ActionBar                                     |
-| Chat       | Chat + ChatSuggestions + SmartInput (attach, send). Extensible for images/tags     |
+| Chat       | Chat, or ChatConversation + SmartInput for custom message/tool/source compositions |
 | App shell  | AppShell + Header + BottomNav + content                                            |
 | Loading    | AppShell (`loading`) + PageSkeleton/ScreenSkeleton (keep header mounted)           |
 
@@ -1000,6 +1025,17 @@ import { Button, ButtonText, ButtonIcon } from '@thewhileloop/whileui';
 | loading   | `boolean`                                                                     | `false`     | Show a spinner, expose busy state, and block input |
 | className | `string`                                                                      | —           | Additional Tailwind classes                        |
 
+## Text
+
+`Text` maps semantic roles to the active visual typography tokens; custom font-size
+classes are unnecessary for normal hierarchy. `heading` also sets
+`accessibilityRole="header"` unless the caller supplies another role.
+
+| Prop    | Type                                                                                          | Default     |
+| ------- | --------------------------------------------------------------------------------------------- | ----------- |
+| variant | `'default' \| 'heading' \| 'title' \| 'subtitle' \| 'body' \| 'caption' \| 'label' \| 'code'` | `'default'` |
+| size    | `'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl'`                                    | by variant  |
+
 ## Input
 
 ```tsx
@@ -1008,6 +1044,9 @@ import { Input } from '@thewhileloop/whileui';
 <Input placeholder="Email" variant="default" value={value} onChangeText={setValue} />;
 ```
 
+On web, filled Input, Textarea, NumericInput, and SmartInput surfaces preserve their
+themed background, foreground, and caret when the browser autofills them.
+
 | Prop                 | Type                              | Default     | Description                                                           |
 | -------------------- | --------------------------------- | ----------- | --------------------------------------------------------------------- |
 | variant              | `'default' \| 'error' \| 'plain'` | `'default'` | Input style; `plain` drops border and fill for a large display figure |
@@ -1088,6 +1127,30 @@ import {
 </FormField>;
 ```
 
+`invalid` and `disabled` are inherited by `Input`, `Textarea`, `NumericInput`, and
+`Select`. An explicit control prop wins. `useFormFieldState()` exposes the same state for
+custom controls; labels, hints, messages, density, and required indicators remain part
+of the compound field rather than each input.
+
+## Surface
+
+```tsx
+import { Surface } from '@thewhileloop/whileui';
+
+<Surface level="raised" padding="default">
+  {/* grouped content */}
+</Surface>;
+```
+
+| Prop     | Type                                  | Default     | Description                         |
+| -------- | ------------------------------------- | ----------- | ----------------------------------- |
+| level    | `'base' \| 'raised' \| 'overlay'`     | `'base'`    | Semantic background and depth tier  |
+| padding  | `'none' \| 'sm' \| 'default' \| 'lg'` | `'default'` | Token-backed interior spacing       |
+| radius   | `'sm' \| 'md' \| 'lg' \| 'xl'`        | `'xl'`      | Token-backed corner radius          |
+| bordered | `boolean`                             | `true`      | Draw the theme hairline border      |
+| shadow   | `'none' \| 'sm' \| 'md' \| 'lg'`      | by level    | Override the level's depth          |
+| frosted  | `boolean`                             | `false`     | Enable the optional frosted overlay |
+
 ## LabeledField
 
 ```tsx
@@ -1380,6 +1443,10 @@ import {
 </Select>;
 ```
 
+Focused and pressed options use the subtle interaction-state tokens; the primary token
+marks the selected indicator without replacing the option's foreground colour. Long
+selected values stay on one line and truncate without displacing the trigger chevron.
+
 `SelectContent` supports optional frosted props:
 
 | Prop          | Type                                                               | Default       |
@@ -1738,9 +1805,34 @@ import { SmartInput, Button, ButtonText } from '@thewhileloop/whileui';
 />;
 ```
 
-## Chat
+## ChatConversation / Chat
+
+`ChatConversation` is the low-level viewport for custom conversation screens. Its content stays constrained on wide windows, follows new or streaming output while the reader is near the bottom, and stops following after the reader scrolls upward. Compose it with `SmartInput`; the application owns message data, streaming, tools, approvals, and sources.
 
-AI-style chat: message list, suggestion chips when empty, SmartInput with attach/send slots. Uses semantic tokens; theme via `global.css`. Copy-paste block — edit directly. `renderMessage` for markdown/code, `loadingIndicator` for typing state.
+It is a `ScrollView` for a bounded active transcript. Paginate or window historical messages; use a virtualized list when the full history can grow without a bound.
+
+```tsx
+import { ChatConversation, SmartInput, View } from '@thewhileloop/whileui';
+
+<View className="flex-1">
+  <ChatConversation contentContainerClassName="gap-4 px-4 py-6">
+    {messages.map((message) => (
+      <ProductMessage key={message.id} message={message} />
+    ))}
+  </ChatConversation>
+  <SmartInput
+    value={value}
+    onChangeText={setValue}
+    onSubmitEditing={send}
+    submitBehavior="submit"
+    leftSlot={<AttachButton />}
+    centerSlot={<ModelSelect />}
+    rightSlot={<SendButton />}
+  />
+</View>;
+```
+
+`Chat` is the opinionated convenience composition: message bubbles, suggestion chips, and `SmartInput` with attach/send slots. It uses semantic tokens; theme via `global.css`. Use `renderMessage` for markdown, code, tool calls, reasoning, or sources, and `loadingIndicator` for streaming feedback.
 
 ```tsx
 import { Chat, type ChatMessage } from '@thewhileloop/whileui';
@@ -1777,6 +1869,26 @@ const [value, setValue] = useState('');
 | `inputSafeArea`          | `boolean`            | SmartInput safe-area (default `true`)             |
 | `keyboardVerticalOffset` | `number`             | For header offset when keyboard opens             |
 
+`ChatConversation` extends React Native `ScrollViewProps`, forwards its ref, and adds `contentContainerClassName` to style the constrained inner column. Caller `onScroll` and `onContentSizeChange` callbacks are preserved.
+
+### Optional Markdown and code
+
+These are explicit subpaths so the root package remains independent of a Markdown
+parser. Install `markdown-it` only in applications that render Markdown.
+
+```tsx
+import { Markdown } from '@thewhileloop/whileui/markdown';
+import { CodeBlock } from '@thewhileloop/whileui/code';
+
+<Markdown onLinkPress={openLink}>{assistantText}</Markdown>
+<CodeBlock code={source} language="TypeScript" actions={<CopyButton />} />
+```
+
+`Markdown` supports headings, paragraphs, emphasis, links, lists, quotes, rules, inline
+code, and fenced code. It never opens links or writes to the clipboard itself:
+`onLinkPress` and `codeActions` keep those capabilities in the application. `CodeBlock`
+is dependency-free and accepts an application-owned `actions` slot.
+
 ## DatePickerModal / DatePickerInline / DateRangePickerModal / TimePickerModal
 
 Date selection blocks using react-native-calendars. Theme-aware via `useCalendarTheme` (Uniwind light/dark). Optional `theme` prop for custom RN color strings (hex/rgb/hsl/named). `CalendarTheme` maps to react-native-calendars Theme and supports `arrowColor`, `disabledArrowColor`, and optional font keys.

package/dist/blocks/chat/chat-conversation.d.ts

@@ -0,0 +1,8 @@
+import { type ScrollViewInstance, type ScrollViewProps } from 'react-native';
+import type { ForwardRefComponent } from '../../lib/ref-types';
+/** ScrollView viewport for a bounded active transcript; virtualize unbounded history. */
+export interface ChatConversationProps extends ScrollViewProps {
+    contentContainerClassName?: string;
+}
+declare const ChatConversation: ForwardRefComponent<ScrollViewInstance, ChatConversationProps>;
+export { ChatConversation };

package/dist/blocks/chat/chat-conversation.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useRef } from 'react';
+import { ScrollView, View, } from 'react-native';
+import { cn } from '../../lib/cn';
+const BOTTOM_THRESHOLD = 48;
+function assignRef(ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+}
+const ChatConversation = React.forwardRef(({ className, contentContainerClassName, contentContainerStyle, keyboardShouldPersistTaps = 'handled', onContentSizeChange, onScroll, scrollEventThrottle = 64, children, ...props }, forwardedRef) => {
+    const scrollRef = useRef(null);
+    const followsOutputRef = useRef(true);
+    const setRef = useCallback((instance) => {
+        scrollRef.current = instance;
+        assignRef(forwardedRef, instance);
+    }, [forwardedRef]);
+    const handleScroll = useCallback((event) => {
+        const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+        const distanceFromBottom = contentSize.height - layoutMeasurement.height - contentOffset.y;
+        followsOutputRef.current = distanceFromBottom <= BOTTOM_THRESHOLD;
+        onScroll?.(event);
+    }, [onScroll]);
+    const handleContentSizeChange = useCallback((width, height) => {
+        onContentSizeChange?.(width, height);
+        if (followsOutputRef.current) {
+            scrollRef.current?.scrollToEnd({ animated: true });
+        }
+    }, [onContentSizeChange]);
+    return (_jsx(ScrollView, { ref: setRef, className: cn('flex-1', className), contentContainerStyle: { flexGrow: 1 }, keyboardShouldPersistTaps: keyboardShouldPersistTaps, onContentSizeChange: handleContentSizeChange, onScroll: handleScroll, scrollEventThrottle: scrollEventThrottle, ...props, children: _jsx(View, { className: cn('w-full max-w-3xl flex-1 self-center', contentContainerClassName), style: contentContainerStyle, children: children }) }));
+});
+ChatConversation.displayName = 'ChatConversation';
+export { ChatConversation };

package/dist/blocks/chat/chat.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, useEffect } from 'react';
-import { View, ScrollView, Pressable, KeyboardAvoidingView, Platform, useWindowDimensions, } from 'react-native';
+import React from 'react';
+import { View, Pressable, KeyboardAvoidingView, Platform, useWindowDimensions } from 'react-native';
 import { Text } from '../../components/text';
 import { SmartInput } from '../layout/smart-input';
+import { ChatConversation } from './chat-conversation';
 import { cn } from '../../lib/cn';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
@@ -49,23 +50,16 @@ export function ChatSuggestions({ suggestions, onSelect, className }) {
 }
 const EMPTY_SUGGESTIONS = [];
 export function Chat({ messages, value, onChangeText, onSend, placeholder = 'Message...', suggestions = EMPTY_SUGGESTIONS, onSuggestionPress, leftSlot, rightSlot, loading = false, header, emptyTitle, emptyDescription, exampleMessage, renderMessage, loadingIndicator, inputSafeArea = true, keyboardVerticalOffset = 0, className, messagesClassName, }) {
-    const scrollRef = useRef(null);
     const visual = useVisualTokens();
     const emptyTitleTypography = typographyStyle(visual, 'emphasis');
     const emptyDescriptionTypography = typographyStyle(visual, 'label');
     const isEmpty = messages.length === 0;
     const showSuggestions = isEmpty && suggestions.length > 0;
-    useEffect(() => {
-        if (!showSuggestions && messages.length > 0) {
-            scrollRef.current?.scrollToEnd({ animated: true });
-        }
-    }, [messages.length, showSuggestions]);
     const defaultRightSlot = rightSlot ?? (_jsx(ChatSendButton, { onPress: onSend, disabled: loading || !value.trim() }));
-    return (_jsxs(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: keyboardVerticalOffset, style: { flex: 1 }, className: className, children: [header, _jsx(ScrollView, { ref: scrollRef, className: cn('flex-1', messagesClassName), contentContainerStyle: {
-                    flexGrow: 1,
+    return (_jsxs(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: keyboardVerticalOffset, style: { flex: 1 }, className: className, children: [header, _jsx(ChatConversation, { className: cn('flex-1', messagesClassName), contentContainerStyle: {
                     paddingBottom: 8,
                     justifyContent: showSuggestions ? 'center' : 'flex-end',
-                }, keyboardShouldPersistTaps: "handled", children: showSuggestions ? (_jsxs(View, { className: "flex-1 justify-center", children: [exampleMessage && (_jsx(View, { className: "mb-6 px-4", children: renderMessage ? (renderMessage(exampleMessage)) : (_jsx(ChatMessageBubble, { message: exampleMessage })) })), emptyTitle && (_jsx(Text, { className: "mb-1 text-center font-medium text-foreground", style: emptyTitleTypography, children: emptyTitle })), emptyDescription && (_jsx(Text, { className: "mb-4 text-center text-muted-foreground", style: emptyDescriptionTypography, children: emptyDescription })), _jsx(ChatSuggestions, { suggestions: suggestions, onSelect: onSuggestionPress ?? (() => { }) })] })) : (_jsxs(View, { className: "gap-3 px-4 pt-4", children: [messages.map((msg) => renderMessage ? (_jsx(React.Fragment, { children: renderMessage(msg) }, msg.id)) : (_jsx(ChatMessageBubble, { message: msg }, msg.id))), loading && loadingIndicator && _jsx(View, { className: "px-4", children: loadingIndicator })] })) }), _jsx(SmartInput, { value: value, onChangeText: onChangeText, placeholder: placeholder, leftSlot: leftSlot, rightSlot: defaultRightSlot, editable: !loading, safeArea: inputSafeArea })] }));
+                }, children: showSuggestions ? (_jsxs(View, { className: "flex-1 justify-center", children: [exampleMessage && (_jsx(View, { className: "mb-6 px-4", children: renderMessage ? (renderMessage(exampleMessage)) : (_jsx(ChatMessageBubble, { message: exampleMessage })) })), emptyTitle && (_jsx(Text, { className: "mb-1 text-center font-medium text-foreground", style: emptyTitleTypography, children: emptyTitle })), emptyDescription && (_jsx(Text, { className: "mb-4 text-center text-muted-foreground", style: emptyDescriptionTypography, children: emptyDescription })), _jsx(ChatSuggestions, { suggestions: suggestions, onSelect: onSuggestionPress ?? (() => { }) })] })) : (_jsxs(View, { className: "gap-3 px-4 pt-4", children: [messages.map((msg) => renderMessage ? (_jsx(React.Fragment, { children: renderMessage(msg) }, msg.id)) : (_jsx(ChatMessageBubble, { message: msg }, msg.id))), loading && loadingIndicator && _jsx(View, { className: "px-4", children: loadingIndicator })] })) }), _jsx(SmartInput, { value: value, onChangeText: onChangeText, placeholder: placeholder, leftSlot: leftSlot, rightSlot: defaultRightSlot, editable: !loading, safeArea: inputSafeArea })] }));
 }
 function ChatSendButton({ onPress, disabled }) {
     const interaction = useInteractionTokens();

package/dist/blocks/chat/index.d.ts

@@ -1 +1,2 @@
 export { Chat, ChatMessageBubble, ChatSuggestions, type ChatMessage, type ChatProps, type ChatSuggestionsProps, } from './chat';
+export { ChatConversation, type ChatConversationProps } from './chat-conversation';

package/dist/blocks/chat/index.js

@@ -1 +1,2 @@
 export { Chat, ChatMessageBubble, ChatSuggestions, } from './chat';
+export { ChatConversation } from './chat-conversation';

package/dist/blocks/layout/smart-input.js

@@ -7,6 +7,7 @@ import { focusRing } from '../../lib/focus-ring';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
+import { webAutofillField } from '../../lib/web-autofill';
 import { controlRecipe, shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
 // The examples list is joined into one string so it can be an effect dependency without
 // re-running on every render. A NUL byte cannot appear in a placeholder.
@@ -143,5 +144,5 @@ export const SmartInput = forwardRef(function SmartInput({ leftSlot, centerSlot,
                     { maxHeight: visual.smartInputMaxHeight },
                     !editable ? { opacity: interaction.disabledOpacity } : null,
                     style,
-                ], className: cn('flex-1 text-foreground placeholder:text-muted-foreground', focusRing, variant === 'bar' && 'border-border bg-muted', variant === 'card' && 'bg-transparent', inputClassName), multiline: true, submitBehavior: submitBehavior, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, placeholder: placeholderState.placeholder, value: value, defaultValue: defaultValue, onChangeText: placeholderState.onChangeText, editable: editable, ...props }), _jsx(SmartInputSlot, { children: rightSlot })] }));
+                ], className: cn('flex-1 text-foreground placeholder:text-muted-foreground', focusRing, variant === 'bar' && 'border-border bg-muted', variant === 'bar' && webAutofillField, variant === 'card' && 'bg-transparent', inputClassName), multiline: true, submitBehavior: submitBehavior, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, placeholder: placeholderState.placeholder, value: value, defaultValue: defaultValue, onChangeText: placeholderState.onChangeText, editable: editable, ...props }), _jsx(SmartInputSlot, { children: rightSlot })] }));
 });

package/dist/code.d.ts

@@ -0,0 +1 @@
+export { CodeBlock, type CodeBlockProps } from './components/code-block';

package/dist/code.js

@@ -0,0 +1 @@
+export { CodeBlock } from './components/code-block';

package/dist/components/card/card.d.ts

@@ -1,6 +1,6 @@
 import { type ViewInstance, type ViewProps, type TextInstance, type TextProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
-import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
+import type { FrostedSurfaceProps } from '../../lib/frosted-surface';
 import { type ShadowTier } from '../../lib/recipes';
 import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const cardVariants: import("tailwind-variants").TVReturnType<{

package/dist/components/card/card.js

@@ -1,13 +1,12 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { View, } from 'react-native';
 import { Text } from '../text';
+import { Surface } from '../surface';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
-import { useFrostedSurface } from '../../lib/frosted-surface';
 import { useVisualTokens } from '../../lib/visual-tokens';
-import { useThemeColors } from '../../lib/theme-colors';
-import { shadowStyle, surfacePadding, typographyStyle } from '../../lib/recipes';
+import { typographyStyle } from '../../lib/recipes';
 const cardVariants = tv({
     base: 'border border-border bg-card',
     variants: {
@@ -28,27 +27,7 @@ const cardVariants = tv({
     },
 });
 const Card = React.forwardRef(({ className, padding, unstyled, shadow = 'sm', frosted = false, blurIntensity, blurTintToken, style, children, ...props }, ref) => {
-    const visual = useVisualTokens();
-    const colors = useThemeColors();
-    const frostedSurface = useFrostedSurface({
-        frosted,
-        blurIntensity,
-        blurTintToken,
-        defaultTintToken: 'card',
-        defaultBlurPreset: 'subtle',
-    });
-    const effectivePadding = surfacePadding(visual, padding ?? 'default');
-    const cardStyle = [
-        {
-            borderRadius: unstyled ? 0 : visual.radiusXl,
-            padding: unstyled ? 0 : effectivePadding,
-            borderWidth: unstyled ? 0 : visual.borderWidthHairline,
-        },
-        unstyled ? null : shadowStyle(visual, colors, shadow),
-        frostedSurface.surfaceStyle,
-        style,
-    ];
-    return (_jsxs(View, { ref: ref, className: cn(cardVariants({ padding, unstyled }), frosted && 'relative overflow-hidden bg-transparent', className), style: cardStyle, ...props, children: [frostedSurface.overlay, children] }));
+    return (_jsx(Surface, { ref: ref, level: "base", padding: unstyled ? 'none' : (padding ?? 'default'), bordered: !unstyled, shadow: unstyled ? 'none' : shadow, frosted: frosted, blurIntensity: blurIntensity, blurTintToken: blurTintToken, className: cn(cardVariants({ padding, unstyled }), className), style: [unstyled ? { borderRadius: 0 } : null, style], ...props, children: children }));
 });
 Card.displayName = 'Card';
 const CardHeader = React.forwardRef(({ className, ...props }, ref) => {

package/dist/components/code-block/code-block.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type ViewProps } from 'react-native';
+export interface CodeBlockProps extends Omit<ViewProps, 'children'> {
+    code: string;
+    language?: string;
+    actions?: React.ReactNode;
+}
+declare function CodeBlock({ code, language, actions, className, ...props }: CodeBlockProps): React.JSX.Element;
+declare namespace CodeBlock {
+    var displayName: string;
+}
+export { CodeBlock };

package/dist/components/code-block/code-block.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollView, View } from 'react-native';
+import { Surface } from '../surface';
+import { Text } from '../text';
+import { cn } from '../../lib/cn';
+import { useVisualTokens } from '../../lib/visual-tokens';
+function CodeBlock({ code, language, actions, className, ...props }) {
+    const label = language ? `${language} code` : 'Code';
+    const visual = useVisualTokens();
+    return (_jsxs(Surface, { level: "base", padding: "none", radius: "lg", shadow: "none", className: cn('overflow-hidden bg-muted', className), ...props, children: [language || actions ? (_jsxs(View, { className: "flex-row items-center justify-between border-b border-border px-3 py-2", children: [_jsx(Text, { variant: "caption", children: language ?? 'Code' }), actions] })) : null, _jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { padding: visual.surfacePaddingSm }, children: _jsx(Text, { variant: "code", className: "bg-transparent px-0 py-0 text-foreground", accessibilityLabel: label, selectable: true, children: code }) })] }));
+}
+CodeBlock.displayName = 'CodeBlock';
+export { CodeBlock };

package/dist/components/code-block/index.d.ts

@@ -0,0 +1 @@
+export { CodeBlock, type CodeBlockProps } from './code-block';

package/dist/components/code-block/index.js

@@ -0,0 +1 @@
+export { CodeBlock } from './code-block';

package/dist/components/form-field/form-field.d.ts

@@ -45,6 +45,14 @@ declare const formControlVariants: import("tailwind-variants").TVReturnType<{
         false: "";
     };
 }, undefined>>;
+type FormFieldDensity = NonNullable<VariantProps<typeof formFieldVariants>['density']>;
+export interface FormFieldState {
+    density: FormFieldDensity;
+    invalid: boolean;
+    disabled: boolean;
+    required: boolean;
+}
+export declare function useFormFieldState(): FormFieldState;
 export interface FormFieldProps extends ViewProps, VariantProps<typeof formFieldVariants> {
     invalid?: boolean;
     disabled?: boolean;

package/dist/components/form-field/form-field.js

@@ -41,6 +41,9 @@ const FormFieldContext = createContext({
     disabled: false,
     required: false,
 });
+export function useFormFieldState() {
+    return useContext(FormFieldContext);
+}
 const FormField = React.forwardRef(({ className, density = 'default', invalid = false, disabled = false, required = false, ...props }, ref) => {
     const interaction = useInteractionTokens();
     const contextValue = useMemo(() => ({ density, invalid, disabled, required }), [density, disabled, invalid, required]);

package/dist/components/form-field/index.d.ts

@@ -1 +1 @@
-export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, type FormFieldProps, type FormLabelProps, type FormControlProps, type FormHintProps, type FormMessageProps, } from './form-field';
+export { FormField, FormLabel, FormControl, FormHint, FormMessage, useFormFieldState, formFieldVariants, formControlVariants, type FormFieldProps, type FormLabelProps, type FormControlProps, type FormHintProps, type FormMessageProps, type FormFieldState, } from './form-field';

package/dist/components/form-field/index.js

@@ -1 +1 @@
-export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, } from './form-field';
+export { FormField, FormLabel, FormControl, FormHint, FormMessage, useFormFieldState, formFieldVariants, formControlVariants, } from './form-field';

package/dist/components/input/input.d.ts

@@ -25,6 +25,7 @@ declare const inputVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined>>;
 export interface InputProps extends TextInputProps, VariantProps<typeof inputVariants> {
+    'aria-invalid'?: boolean;
     className?: string;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;

package/dist/components/input/input.js

@@ -8,6 +8,8 @@ import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { typographyStyle } from '../../lib/recipes';
+import { webAutofillField } from '../../lib/web-autofill';
+import { useFormFieldState } from '../form-field/form-field';
 const inputVariants = tv({
     base: 'w-full border-border bg-muted text-foreground',
     variants: {
@@ -22,27 +24,30 @@ const inputVariants = tv({
         variant: 'default',
     },
 });
-const Input = React.forwardRef(({ className, prefix, suffix, inputClassName, variant, editable = true, placeholderTextColor, onFocus, onBlur, ...props }, ref) => {
+const Input = React.forwardRef(({ className, prefix, suffix, inputClassName, variant, editable, 'aria-invalid': ariaInvalid, placeholderTextColor, onFocus, onBlur, ...props }, ref) => {
     const colors = useThemeColors();
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
+    const field = useFormFieldState();
+    const effectiveEditable = editable ?? !field.disabled;
+    const effectiveVariant = variant ?? (field.invalid ? 'error' : 'default');
     // The border is on this wrapper and the focus is on the TextInput inside it, so the
     // wrapper learns about focus from the events rather than a pseudo-class.
     const [focused, setFocused] = useState(false);
-    const plain = variant === 'plain';
-    return (_jsxs(View, { className: cn('flex-row items-center border-border bg-muted', inputVariants({ variant }), focused && !plain && focusFieldWrapper, className), style: [
+    const plain = effectiveVariant === 'plain';
+    return (_jsxs(View, { className: cn('flex-row items-center border-border bg-muted', inputVariants({ variant: effectiveVariant }), focused && !plain && focusFieldWrapper, className), style: [
             {
                 minHeight: visual.controlHeightDefault,
                 borderWidth: plain ? 0 : visual.borderWidthControl,
                 borderRadius: visual.radiusLg,
                 paddingHorizontal: plain ? 0 : visual.controlPaddingXDefault,
             },
-            !editable ? { opacity: interaction.disabledOpacity } : undefined,
-        ], children: [prefix && (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })), _jsx(TextInput, { ref: ref, className: cn('flex-1 text-foreground placeholder:text-muted-foreground web:outline-none', inputClassName), style: {
+            !effectiveEditable ? { opacity: interaction.disabledOpacity } : undefined,
+        ], children: [prefix && (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })), _jsx(TextInput, { ref: ref, className: cn('flex-1 text-foreground placeholder:text-muted-foreground web:outline-none', !plain && webAutofillField, inputClassName), style: {
                     ...typographyStyle(visual, 'label'),
                     minHeight: visual.controlHeightDefault - 2,
                     paddingVertical: visual.controlPaddingYDefault,
-                }, editable: editable, placeholderTextColor: placeholderTextColor ?? colors.placeholder, onFocus: (event) => {
+                }, editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, placeholderTextColor: placeholderTextColor ?? colors.placeholder, onFocus: (event) => {
                     setFocused(true);
                     onFocus?.(event);
                 }, onBlur: (event) => {

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

@@ -0,0 +1 @@
+export { Markdown, type MarkdownProps } from './markdown';

package/dist/components/markdown/index.js

@@ -0,0 +1 @@
+export { Markdown } from './markdown';

package/dist/components/markdown/markdown.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type StyleProp, type TextStyle, type ViewProps } from 'react-native';
+export interface MarkdownProps extends Omit<ViewProps, 'children'> {
+    children: string;
+    onLinkPress?: (url: string) => void;
+    codeActions?: (code: string, language: string | undefined) => React.ReactNode;
+    textStyle?: StyleProp<TextStyle>;
+    selectable?: boolean;
+}
+declare function Markdown({ children, onLinkPress, codeActions, textStyle, selectable, className, ...props }: MarkdownProps): React.JSX.Element;
+declare namespace Markdown {
+    var displayName: string;
+}
+export { Markdown };