@mechane-ai/elements 0.12.0 → 0.14.0

package/dist/packages/core/src/text.d.ts

@@ -9,7 +9,7 @@ type TextProps = ComponentProps<'span'> & {
     readonly xstyle?: PlacementStyle;
 };
 type HeadingProps = ComponentProps<'h1'> & {
-    readonly compact?: boolean;
+    readonly isCompact?: boolean;
 };
 type SubheadingProps = ComponentProps<'h2'>;
 type MutedProps = ComponentProps<'p'>;
@@ -22,7 +22,7 @@ type StatusProps = ComponentProps<'span'> & {
     readonly tone?: StatusTone;
 };
 export declare function Text({ variant, tone, xstyle, ...props }: TextProps): ReactNode;
-export declare function Heading({ compact, ...props }: HeadingProps): ReactNode;
+export declare function Heading({ isCompact, ...props }: HeadingProps): ReactNode;
 export declare function Subheading(props: SubheadingProps): ReactNode;
 export declare function Muted(props: MutedProps): ReactNode;
 export declare function Identifier(props: IdentifierProps): ReactNode;

package/dist/packages/feedback/src/async-region.d.ts

@@ -1,17 +1,25 @@
 import type { ReactNode } from 'react';
+export type LoadingScopeProps = {
+    readonly identity: string | number;
+    /** Preserve elapsed loading time when a document hands its first read to React. */
+    readonly initialStartedAt?: number;
+    readonly children: ReactNode;
+};
+export declare function LoadingScope({ identity, initialStartedAt, children }: LoadingScopeProps): ReactNode;
 export type ContentRevealProps = {
-    readonly enter: boolean;
-    readonly fill?: boolean | undefined;
+    readonly shouldEnter: boolean;
     readonly children: ReactNode;
 };
-export declare function ContentReveal({ enter, fill, children }: ContentRevealProps): ReactNode;
+export declare function ContentReveal({ shouldEnter, children }: ContentRevealProps): ReactNode;
+export type AsyncRegionState = 'pending' | 'ready' | 'failed';
 export type AsyncRegionProps = {
-    readonly pending: boolean;
     readonly label: string;
     readonly placeholder: ReactNode;
-    readonly children?: ReactNode;
-    readonly fill?: boolean | undefined;
-    readonly startedAt?: number | undefined;
-    readonly delayMs?: number | undefined;
-};
-export declare function AsyncRegion({ pending, label, placeholder, children, fill, startedAt, delayMs, }: AsyncRegionProps): ReactNode;
+} & ({
+    readonly state: 'pending';
+    readonly children?: never;
+} | {
+    readonly state: 'ready' | 'failed';
+    readonly children: ReactNode;
+});
+export declare function AsyncRegion(props: AsyncRegionProps): ReactNode;

package/dist/packages/feedback/src/control-placeholders.d.ts

@@ -1,16 +1,21 @@
 import type { ReactNode } from 'react';
 import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
 export type ButtonPlaceholderProps = {
-    readonly width?: number | string;
     readonly xstyle?: PlacementStyle;
-};
+} & ({
+    readonly isIconOnly: true;
+    readonly width?: never;
+} | {
+    readonly isIconOnly?: false;
+    readonly width?: number | string;
+});
 export type FieldPlaceholderProps = {
     readonly label?: string;
     readonly hint?: string;
-    readonly multiline?: boolean;
+    readonly isMultiline?: boolean;
     readonly rows?: number;
     readonly width?: number | string;
     readonly xstyle?: PlacementStyle;
 };
-export declare function ButtonPlaceholder({ width, xstyle }: ButtonPlaceholderProps): ReactNode;
-export declare function FieldPlaceholder({ label, hint, multiline, rows, width, xstyle, }: FieldPlaceholderProps): ReactNode;
+export declare function ButtonPlaceholder({ width, isIconOnly, xstyle }: ButtonPlaceholderProps): ReactNode;
+export declare function FieldPlaceholder({ label, hint, isMultiline, rows, width, xstyle, }: FieldPlaceholderProps): ReactNode;

package/dist/packages/feedback/src/feedback.d.ts

@@ -4,8 +4,8 @@ type EmptyStateProps = Omit<ComponentProps<'div'>, 'title'> & {
     readonly action?: ReactNode;
 };
 type NoticeProps = ComponentProps<'div'> & {
-    readonly error?: boolean;
+    readonly hasError?: boolean;
 };
 export declare function EmptyState({ title, children, action, ...props }: EmptyStateProps): ReactNode;
-export declare function Notice({ error, ...props }: NoticeProps): ReactNode;
+export declare function Notice({ hasError, ...props }: NoticeProps): ReactNode;
 export {};

package/dist/packages/feedback/src/index.d.ts

@@ -1,7 +1,6 @@
 export { EmptyState, Notice } from './feedback.tsx';
 export type { ButtonPlaceholderProps, FieldPlaceholderProps } from './control-placeholders.tsx';
 export { ButtonPlaceholder, FieldPlaceholder } from './control-placeholders.tsx';
-export { Loading } from './loading.tsx';
 export type { ProgressProps, MeterProps } from './progress.tsx';
 export { Progress, Meter } from './progress.tsx';
 export type { SkeletonProps, SkeletonTextProps, SpinnerProps } from './skeleton.tsx';
@@ -10,5 +9,5 @@ export type { ExternalToast as ToastOptions } from 'sonner';
 export { toast } from 'sonner';
 export type { ToasterProps } from './toast.tsx';
 export { Toaster } from './toast.tsx';
-export type { AsyncRegionProps, ContentRevealProps } from './async-region.tsx';
-export { AsyncRegion, ContentReveal } from './async-region.tsx';
+export type { AsyncRegionProps, AsyncRegionState, ContentRevealProps, LoadingScopeProps } from './async-region.tsx';
+export { AsyncRegion, ContentReveal, LoadingScope } from './async-region.tsx';

package/dist/packages/forms/src/form-actions.d.ts

@@ -4,8 +4,8 @@ type FormActionsAlignment = 'start' | 'end';
 export type FormActionsProps = {
     readonly children: ReactNode;
     readonly align?: FormActionsAlignment;
-    readonly separated?: boolean;
+    readonly hasSeparator?: boolean;
     readonly xstyle?: PlacementStyle;
 };
-export declare function FormActions({ children, align, separated, xstyle }: FormActionsProps): ReactNode;
+export declare function FormActions({ children, align, hasSeparator, xstyle }: FormActionsProps): ReactNode;
 export {};

package/dist/packages/forms/src/forms.d.ts

@@ -17,7 +17,7 @@ export type InputProps = Omit<BaseInputProps, 'value' | 'defaultValue' | 'onChan
 type NativeTextareaProps = ComponentProps<'textarea'>;
 type TextareaProps = Omit<NativeTextareaProps, 'value' | 'defaultValue' | 'onChange' | 'readOnly'> & TextValueProperties<NonNullable<NativeTextareaProps['value']>, NonNullable<NativeTextareaProps['onChange']>, NonNullable<BaseInputProps['onValueChange']>> & {
     readonly xstyle?: PlacementStyle;
-    readonly compact?: boolean;
+    readonly isCompact?: boolean;
     readonly appearance?: TextareaAppearance;
 };
 declare function FieldRoot({ className, style, xstyle, ...props }: FieldRootProps): ReactNode;
@@ -31,5 +31,5 @@ export declare const Field: {
     Error: typeof FieldError;
 };
 export declare function Input({ className, style, xstyle, ...props }: InputProps): ReactNode;
-export declare function Textarea({ compact, appearance, value, defaultValue, onValueChange, name, disabled, readOnly, required, className, style, xstyle, ...props }: TextareaProps): ReactNode;
+export declare function Textarea({ isCompact, appearance, value, defaultValue, onValueChange, name, disabled, readOnly, required, className, style, xstyle, ...props }: TextareaProps): ReactNode;
 export {};

package/dist/packages/forms/src/selection-styles.d.ts

@@ -1,5 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
-import { conditions } from '../../foundations/src/tokens.stylex.ts';
+import { conditions } from '../../foundations/src/constants.stylex.ts';
 export declare const selectionStyles: Readonly<{
     readonly trigger: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;

package/dist/packages/foundations/src/constants.stylex.d.ts

@@ -0,0 +1,90 @@
+export declare const darkColors: {
+    canvas: string;
+    surface: string;
+    ink: string;
+    inkHover: string;
+    inverse: string;
+    muted: string;
+    faint: string;
+    line: string;
+    focus: string;
+    accent: string;
+    accentSoft: string;
+    warning: string;
+    warningSoft: string;
+    danger: string;
+    dangerHover: string;
+    dangerSoft: string;
+    overlay: string;
+};
+export declare const darkChartColors: {
+    series1: string;
+    series2: string;
+    series3: string;
+    series4: string;
+    series5: string;
+    series6: string;
+    negative: string;
+    positive: string;
+    missing: string;
+};
+export declare const darkAvatarColors: {
+    identity1: string;
+    identity2: string;
+    identity3: string;
+    identity4: string;
+    identity5: string;
+    identity6: string;
+    identity7: string;
+    identity8: string;
+    identity9: string;
+    identity10: string;
+    identity11: string;
+    identity12: string;
+    identity13: string;
+    identity14: string;
+    identity15: string;
+    identity16: string;
+    identity17: string;
+    identity18: string;
+    identity19: string;
+    identity20: string;
+    identity21: string;
+    identity22: string;
+    identity23: string;
+    identity24: string;
+};
+export declare const darkSyntaxColors: {
+    keyword: string;
+    string: string;
+    comment: string;
+    number: string;
+    type: string;
+};
+export declare const loading: {
+    delaySeconds: number;
+    revealMs: number;
+    placeholderMs: number;
+};
+export declare const darkShadows: {
+    popup: string;
+};
+export declare const layers: {
+    sticky: string;
+    backdrop: string;
+    dialog: string;
+    popup: string;
+    tooltip: string;
+    skipLink: string;
+};
+export declare const tableGeometry: {
+    rowHeight: number;
+    headerHeight: number;
+};
+export declare const conditions: {
+    coarsePointer: string;
+    hoverPointer: string;
+    compactText: string;
+    compactTable: string;
+    reducedMotion: string;
+};

package/dist/packages/foundations/src/control-styles.d.ts

@@ -25,6 +25,10 @@ export declare const controlStyles: Readonly<{
         readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
         readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
     }>;
+    readonly iconButton: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+    }>;
     readonly field: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "block">;
         readonly width: stylex.StyleXClassNameFor<"width", "100%">;
@@ -62,6 +66,23 @@ export declare const controlStyles: Readonly<{
         readonly resize: stylex.StyleXClassNameFor<"resize", "vertical">;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
     }>;
+    readonly plainTextarea: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "30dvh">;
+        readonly fieldSizing: stylex.StyleXClassNameFor<"fieldSizing", "content">;
+        readonly resize: stylex.StyleXClassNameFor<"resize", "none">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
+            readonly outlineStyle: "none";
+        }>;
+        readonly ':disabled': stylex.StyleXClassNameFor<":disabled", {
+            readonly backgroundColor: "transparent";
+        }>;
+    }>;
     readonly group: Readonly<{
         readonly position: stylex.StyleXClassNameFor<"position", "relative">;
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;

package/dist/packages/foundations/src/tokens.d.ts

@@ -0,0 +1,2 @@
+export { conditions, darkAvatarColors, darkChartColors, darkColors, darkShadows, darkSyntaxColors, layers, loading, tableGeometry, } from './constants.stylex.ts';
+export { avatarColors, chartColors, colors, controls, motion, pageGeometry, radii, shadows, spacing, syntaxColors, typography, } from './tokens.stylex.ts';

package/dist/packages/foundations/src/tokens.stylex.d.ts

@@ -18,25 +18,6 @@ export declare const colors: stylex.VarGroup<Readonly<{
     dangerSoft: string;
     overlay: string;
 }>, symbol>;
-export declare const darkColors: {
-    canvas: string;
-    surface: string;
-    ink: string;
-    inkHover: string;
-    inverse: string;
-    muted: string;
-    faint: string;
-    line: string;
-    focus: string;
-    accent: string;
-    accentSoft: string;
-    warning: string;
-    warningSoft: string;
-    danger: string;
-    dangerHover: string;
-    dangerSoft: string;
-    overlay: string;
-};
 export declare const chartColors: stylex.VarGroup<Readonly<{
     series1: string;
     series2: string;
@@ -48,17 +29,6 @@ export declare const chartColors: stylex.VarGroup<Readonly<{
     positive: string;
     missing: string;
 }>, symbol>;
-export declare const darkChartColors: {
-    series1: string;
-    series2: string;
-    series3: string;
-    series4: string;
-    series5: string;
-    series6: string;
-    negative: string;
-    positive: string;
-    missing: string;
-};
 export declare const avatarColors: stylex.VarGroup<Readonly<{
     identity1: string;
     identity2: string;
@@ -85,32 +55,6 @@ export declare const avatarColors: stylex.VarGroup<Readonly<{
     identity23: string;
     identity24: string;
 }>, symbol>;
-export declare const darkAvatarColors: {
-    identity1: string;
-    identity2: string;
-    identity3: string;
-    identity4: string;
-    identity5: string;
-    identity6: string;
-    identity7: string;
-    identity8: string;
-    identity9: string;
-    identity10: string;
-    identity11: string;
-    identity12: string;
-    identity13: string;
-    identity14: string;
-    identity15: string;
-    identity16: string;
-    identity17: string;
-    identity18: string;
-    identity19: string;
-    identity20: string;
-    identity21: string;
-    identity22: string;
-    identity23: string;
-    identity24: string;
-};
 export declare const syntaxColors: stylex.VarGroup<Readonly<{
     keyword: string;
     string: string;
@@ -118,13 +62,6 @@ export declare const syntaxColors: stylex.VarGroup<Readonly<{
     number: string;
     type: string;
 }>, symbol>;
-export declare const darkSyntaxColors: {
-    keyword: string;
-    string: string;
-    comment: string;
-    number: string;
-    type: string;
-};
 export declare const spacing: stylex.VarGroup<Readonly<{
     xxs: string;
     xs: string;
@@ -186,25 +123,3 @@ export declare const shadows: stylex.VarGroup<Readonly<{
     popup: string;
     selection: string;
 }>, symbol>;
-export declare const darkShadows: {
-    popup: string;
-};
-export declare const layers: {
-    sticky: string;
-    backdrop: string;
-    dialog: string;
-    popup: string;
-    tooltip: string;
-    skipLink: string;
-};
-export declare const tableGeometry: {
-    rowHeight: number;
-    headerHeight: number;
-};
-export declare const conditions: {
-    coarsePointer: string;
-    hoverPointer: string;
-    compactText: string;
-    compactTable: string;
-    reducedMotion: string;
-};

package/dist/packages/layout/src/app-shell.d.ts

@@ -5,7 +5,7 @@ type AppShellProps = {
     readonly footer?: ReactNode;
     readonly children: ReactNode;
     readonly mainId?: string;
-    readonly focus?: boolean;
+    readonly shouldFocus?: boolean;
 };
-export declare function AppShell({ sidebarHeader, sidebar, footer, children, mainId, focus, }: AppShellProps): ReactNode;
+export declare function AppShell({ sidebarHeader, sidebar, footer, children, mainId, shouldFocus, }: AppShellProps): ReactNode;
 export {};

package/dist/packages/layout/src/page-toolbar.d.ts

@@ -3,14 +3,14 @@ import { Button } from '../../core/src/index.ts';
 type PageToolbarProps = {
     readonly title: ReactNode;
     readonly actions?: ReactNode;
-    readonly breadcrumb?: boolean;
-    readonly navigation?: boolean;
+    readonly showBreadcrumb?: boolean;
+    readonly showNavigation?: boolean;
     readonly views?: ReactNode;
     readonly leading?: ReactNode;
 };
 type ToolbarActionProps = Omit<ComponentProps<typeof Button>, 'variant' | 'xstyle'> & {
     readonly icon?: ReactNode;
 };
-export declare function PageToolbar({ title, actions, breadcrumb, navigation, views, leading, }: PageToolbarProps): ReactNode;
+export declare function PageToolbar({ title, actions, showBreadcrumb, showNavigation, views, leading, }: PageToolbarProps): ReactNode;
 export declare function ToolbarAction({ icon, children, ...props }: ToolbarActionProps): ReactNode;
 export {};

package/dist/packages/layout/src/record-page.d.ts

@@ -13,7 +13,7 @@ export type RecordPageToolbarProps = {
     readonly backHref: string;
     readonly onBack?: () => void;
     readonly actions?: ReactNode;
-    readonly navigation?: boolean;
+    readonly showNavigation?: boolean;
 };
 export type RecordPageHeaderProps = {
     readonly title: ReactNode;
@@ -26,7 +26,7 @@ export type RecordPageAsideProps = {
     readonly label?: string;
 };
 declare function RecordPageRoot({ children }: RecordPageRootProps): ReactNode;
-declare function RecordPageToolbar({ backLabel, backHref, onBack, actions, navigation, }: RecordPageToolbarProps): ReactNode;
+declare function RecordPageToolbar({ backLabel, backHref, onBack, actions, showNavigation, }: RecordPageToolbarProps): ReactNode;
 declare function RecordPageBody({ children }: RecordPageBodyProps): ReactNode;
 declare function RecordPageContent({ children }: RecordPageContentProps): ReactNode;
 declare function RecordPageHeader({ title, description, icon, titleRef }: RecordPageHeaderProps): ReactNode;

package/dist/packages/layout/src/resizable.d.ts

@@ -10,14 +10,14 @@ export type ResizablePaneProps = {
     readonly initialSizePercent?: number;
     readonly minimumSizePercent?: number;
     readonly maximumSizePercent?: number;
-    readonly collapsible?: boolean;
+    readonly canCollapse?: boolean;
 } & Omit<ComponentProps<'div'>, 'id' | 'onResize'>;
 export type ResizableHandleProps = {
     readonly 'aria-label': string;
     readonly 'disabled'?: boolean;
 } & Omit<ComponentProps<'div'>, 'children'>;
 declare function ResizableRoot({ orientation, initialSizes, onSizesChange, disabled, ref, ...props }: ResizableRootProps): ReactNode;
-declare function ResizablePane({ id, initialSizePercent, minimumSizePercent, maximumSizePercent, collapsible, ref, ...props }: ResizablePaneProps): ReactNode;
+declare function ResizablePane({ id, initialSizePercent, minimumSizePercent, maximumSizePercent, canCollapse, ref, ...props }: ResizablePaneProps): ReactNode;
 declare function ResizableHandle({ ref, ...props }: ResizableHandleProps): ReactNode;
 export declare const Resizable: {
     Root: typeof ResizableRoot;

package/dist/packages/layout/src/sidebar.d.ts

@@ -23,15 +23,15 @@ type NavigationProps = {
 };
 type NavigationItemProps = ComponentProps<typeof BaseButton> & {
     readonly icon?: ReactNode;
-    readonly selected?: boolean;
+    readonly isSelected?: boolean;
 };
 type NavigationLinkProps = ComponentProps<'a'> & {
     readonly icon?: ReactNode;
-    readonly selected?: boolean;
+    readonly isSelected?: boolean;
 };
 type SidebarLabelProps = {
     readonly children: ReactNode;
-    readonly grow?: boolean;
+    readonly shouldGrow?: boolean;
 };
 type SidebarFooterLayout = 'inline' | 'navigation';
 type SidebarFooterProps = {
@@ -45,9 +45,9 @@ export declare function NavigationSection({ children, label, }: {
     readonly children: ReactNode;
     readonly label: string;
 }): ReactNode;
-export declare function NavigationItem({ children, icon, selected, onClick, className, style, ...props }: NavigationItemProps): ReactNode;
-export declare function NavigationLink({ children, icon, selected, onClick, className, style, ...props }: NavigationLinkProps): ReactNode;
-export declare function SidebarLabel({ children, grow }: SidebarLabelProps): ReactNode;
+export declare function NavigationItem({ children, icon, isSelected, onClick, className, style, ...props }: NavigationItemProps): ReactNode;
+export declare function NavigationLink({ children, icon, isSelected, onClick, className, style, ...props }: NavigationLinkProps): ReactNode;
+export declare function SidebarLabel({ children, shouldGrow }: SidebarLabelProps): ReactNode;
 export declare function SidebarFooter({ children, layout }: SidebarFooterProps): ReactNode;
 export declare function SidebarToggle(): ReactNode;
 export {};

package/dist/packages/layout/src/view-stack.d.ts

@@ -2,8 +2,8 @@ import type { ReactNode } from 'react';
 declare function ViewStackRoot({ children }: {
     readonly children: ReactNode;
 }): ReactNode;
-declare function ViewStackPanel({ active, children }: {
-    readonly active: boolean;
+declare function ViewStackPanel({ isActive, children, }: {
+    readonly isActive: boolean;
     readonly children: ReactNode;
 }): ReactNode;
 export declare const ViewStack: {

package/dist/packages/layout/src/workbench.d.ts

@@ -4,10 +4,10 @@ export declare function Workbench({ header, children, inspector, }: {
     readonly children: ReactNode;
     readonly inspector?: ReactNode;
 }): ReactNode;
-export declare function WorkbenchScroll({ label, children, flush, scrollRestorationId, }: {
+export declare function WorkbenchScroll({ label, children, isFlush, scrollRestorationId, }: {
     readonly label: string;
     readonly children: ReactNode;
-    readonly flush?: boolean;
+    readonly isFlush?: boolean;
     readonly scrollRestorationId?: string;
 }): ReactNode;
 export declare function WorkbenchFooter({ children }: {

package/dist/packages/navigation/src/commands/command.d.ts

@@ -12,15 +12,15 @@ export type CommandAction = {
     readonly label: string;
     readonly description?: string;
     readonly shortcut?: CommandShortcut;
-    readonly disabled?: boolean;
+    readonly isDisabled?: boolean;
     readonly onSelect: () => void;
 };
 export type CommandShortcutsOptions = {
     readonly commands: ReadonlyArray<CommandAction>;
     readonly target: RefObject<HTMLElement | null> | HTMLElement | null;
-    readonly enabled: boolean;
+    readonly isEnabled: boolean;
 };
-export declare function useCommandShortcuts({ commands, target, enabled }: CommandShortcutsOptions): void;
+export declare function useCommandShortcuts({ commands, target, isEnabled }: CommandShortcutsOptions): void;
 export type ShortcutHintProps = {
     readonly shortcut: CommandShortcut;
 };

package/dist/packages/navigation/src/index.d.ts

@@ -1,5 +1,5 @@
 export { Kbd, Breadcrumb } from './navigation.tsx';
-export type { PageNavigationItem, PageNavigationProps } from './page-navigation.tsx';
-export { PageNavigation } from './page-navigation.tsx';
+export type { PageNavigationItem, PageNavigationProps, PageNavigationPlaceholderProps } from './page-navigation.tsx';
+export { PageNavigation, PageNavigationPlaceholder } from './page-navigation.tsx';
 export { SkipLink } from './skip-link.tsx';
 export { Tabs } from './tabs.tsx';

package/dist/packages/navigation/src/page-navigation.d.ts

@@ -9,6 +9,11 @@ export type PageNavigationProps<ItemId extends string = string> = {
     readonly selectedId: ItemId;
     readonly onNavigate?: (id: ItemId) => void;
     readonly label?: string;
-    readonly embedded?: boolean;
+    readonly isEmbedded?: boolean;
 };
-export declare function PageNavigation<ItemId extends string>({ items, selectedId, onNavigate, label, embedded, }: PageNavigationProps<ItemId>): ReactNode;
+export type PageNavigationPlaceholderProps = {
+    readonly items: ReadonlyArray<Pick<PageNavigationItem, 'id' | 'label'>>;
+    readonly isEmbedded?: boolean;
+};
+export declare function PageNavigationPlaceholder({ items, isEmbedded }: PageNavigationPlaceholderProps): ReactNode;
+export declare function PageNavigation<ItemId extends string>({ items, selectedId, onNavigate, label, isEmbedded, }: PageNavigationProps<ItemId>): ReactNode;

package/dist/packages/overlays/src/drawer.d.ts

@@ -9,14 +9,14 @@ type DrawerPopupProps = ComponentProps<typeof BaseDrawer.Popup> & {
     readonly xstyle?: PlacementStyle;
 };
 type DrawerTitleProps = ComponentProps<typeof BaseDrawer.Title> & {
-    readonly visuallyHidden?: boolean;
+    readonly isVisuallyHidden?: boolean;
 };
 type DrawerDescriptionProps = ComponentProps<typeof BaseDrawer.Description>;
 declare function DrawerRoot<Payload = unknown>(props: DrawerRootProps<Payload>): ReactNode;
 declare function DrawerBackdrop({ className, style, ...props }: DrawerBackdropProps): ReactNode;
 declare function DrawerViewport({ className, style, ...props }: DrawerViewportProps): ReactNode;
 declare function DrawerPopup({ className, style, xstyle, ...props }: DrawerPopupProps): ReactNode;
-declare function DrawerTitle({ className, style, visuallyHidden, ...props }: DrawerTitleProps): ReactNode;
+declare function DrawerTitle({ className, style, isVisuallyHidden, ...props }: DrawerTitleProps): ReactNode;
 declare function DrawerDescription({ className, style, ...props }: DrawerDescriptionProps): ReactNode;
 export declare const Drawer: {
     createHandle: typeof BaseDrawer.createHandle;

package/dist/{pierre-diff-sUAU-xeL.js → pierre-diff-C_j0nxwS.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./pierre-theme-CBAncKdH.js";
+import { n as e, t } from "./pierre-theme-BUeJim8s.js";
 import { t as n } from "./viewer-styles-CpHqp5Qv.js";
 import * as r from "@stylexjs/stylex";
 import { useCallback as i, useState as a } from "react";
@@ -28,7 +28,7 @@ function h(e) {
 function g(e) {
 	return e.patch === void 0 ? [c(h(e.before), h(e.after), {}, !0)] : l(e.patch, { throwOnError: !0 }).flatMap((e) => e.files);
 }
-function _({ files: t, layout: c, wrap: l, showUnchanged: u, annotations: p, maxHeight: h, label: g }) {
+function _({ files: t, layout: c, shouldWrap: l, showUnchanged: u, annotations: p, maxHeight: h, label: g }) {
 	let [_] = a(() => new s()), v = i((e) => {
 		e === null ? _.cleanUp() : _.setup(e);
 	}, [_]);