@moul-dev/ui 2026.8.18 → 2026.8.21

package/dist/src/components/LogsViewer/Logs.types.d.ts

@@ -0,0 +1,208 @@
+import { StyleXStyles } from '@stylexjs/stylex';
+import { Key } from 'react-aria-components';
+import type * as React from 'react';
+export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
+export interface LogItem {
+    id: string | number;
+    timestamp?: string;
+    level?: LogLevel | string;
+    message: string;
+    attributes?: Record<string, string | number | boolean | null | undefined>;
+    raw?: string;
+    lineNumber?: number;
+}
+export type LogFilterLevel = LogLevel | 'all';
+export interface LogsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'title' | 'onCopy'> {
+    /**
+     * Array of parsed log items or raw log strings.
+     */
+    data?: (LogItem | string)[];
+    /**
+     * Raw multiline text containing log lines (e.g. from server.log).
+     */
+    text?: string;
+    /**
+     * Optional title shown in the log header toolbar.
+     */
+    title?: React.ReactNode;
+    /**
+     * Whether to show the top toolbar with search, filters, and actions.
+     * @default true
+     */
+    showToolbar?: boolean;
+    /**
+     * Whether to show line numbers in the table.
+     * @default true
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Whether to show timestamps.
+     * @default true
+     */
+    showTimestamps?: boolean;
+    /**
+     * Whether to show severity level badges.
+     * @default true
+     */
+    showLevels?: boolean;
+    /**
+     * Whether to render structured attribute chips in the message cell.
+     * @default true
+     */
+    showAttributes?: boolean;
+    /**
+     * How the inspector panel is displayed when a log row is selected.
+     * - 'drawer': opens a slide-out drawer from the side/bottom
+     * - 'inline': renders an inline details panel beneath the table
+     * - 'none': disables the inspector
+     * @default 'drawer'
+     */
+    inspectorMode?: 'drawer' | 'inline' | 'none';
+    /**
+     * Whether to show an inspector / details panel for selected log rows.
+     * @deprecated Use `inspectorMode` instead.
+     */
+    showInspector?: boolean;
+    /**
+     * Controlled open state for the drawer inspector.
+     */
+    isInspectorOpen?: boolean;
+    /**
+     * Default open state for the drawer inspector (initial uncontrolled state).
+     * Note: Changing this prop post-mount does not reset internal state; use `isInspectorOpen` for controlled state.
+     * @default false
+     */
+    defaultInspectorOpen?: boolean;
+    /**
+     * Callback fired when the drawer inspector opens or closes.
+     */
+    onInspectorOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Drawer placement direction when inspectorMode is 'drawer'.
+     * @default 'right'
+     */
+    drawerPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Drawer size when inspectorMode is 'drawer'.
+     * @default 'md'
+     */
+    drawerSize?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * Callback fired when a log row is clicked.
+     */
+    onRowClick?: (log: LogItem) => void;
+    /**
+     * Display logs in a compact table density.
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Wrap long log message lines instead of truncating with ellipsis.
+     * @default true
+     */
+    wrapLines?: boolean;
+    /**
+     * Search input placeholder.
+     * @default 'Filter logs...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Maximum height of the scrollable logs container.
+     */
+    maxHeight?: string | number;
+    /**
+     * React Aria Table selection mode.
+     * @default 'single'
+     */
+    selectionMode?: 'none' | 'single' | 'multiple';
+    /**
+     * Currently selected log keys.
+     */
+    selectedKeys?: 'all' | Iterable<Key>;
+    /**
+     * Default selected log keys (initial uncontrolled state).
+     * Note: Changing this prop post-mount does not reset internal state; use `selectedKeys` for controlled state.
+     */
+    defaultSelectedKeys?: 'all' | Iterable<Key>;
+    /**
+     * Handler fired when row selection changes.
+     */
+    onSelectionChange?: (keys: 'all' | Set<Key>) => void;
+    /**
+     * Controlled filter level.
+     */
+    filterLevel?: LogFilterLevel;
+    /**
+     * Default filter level (initial uncontrolled state).
+     * Note: Changing this prop post-mount does not reset internal state; use `filterLevel` for controlled state.
+     * @default 'all'
+     */
+    defaultFilterLevel?: LogFilterLevel;
+    /**
+     * Callback fired when active filter level changes.
+     */
+    onFilterLevelChange?: (level: LogFilterLevel) => void;
+    /**
+     * Controlled search query.
+     */
+    searchQuery?: string;
+    /**
+     * Default search query (initial uncontrolled state).
+     * Note: Changing this prop post-mount does not reset internal state; use `searchQuery` for controlled state.
+     */
+    defaultSearchQuery?: string;
+    /**
+     * Callback fired when search query changes.
+     */
+    onSearchQueryChange?: (query: string) => void;
+    /**
+     * Callback fired when the clear button is pressed.
+     */
+    onClear?: () => void;
+    /**
+     * Callback fired when download logs button is pressed.
+     */
+    onDownload?: () => void;
+    /**
+     * Callback fired when copy button is pressed.
+     */
+    onCopy?: (text: string) => void;
+    /**
+     * Controlled follow / auto-scroll mode to tail the latest logs.
+     */
+    follow?: boolean;
+    /**
+     * Default follow / auto-scroll state (initial uncontrolled state).
+     * Note: Changing this prop post-mount does not reset internal state; use `follow` for controlled state.
+     * @default false
+     */
+    defaultFollow?: boolean;
+    /**
+     * Callback fired when follow / auto-scroll state changes (e.g. paused when scrolled up).
+     */
+    onFollowChange?: (follow: boolean) => void;
+    /**
+     * Whether to show the Follow toggle button in the top toolbar.
+     * @default true
+     */
+    showFollowButton?: boolean;
+    /**
+     * Whether to highlight search term matches in log messages and inspector.
+     * @default true
+     */
+    highlightMatches?: boolean;
+    /**
+     * Custom StyleX styles.
+     */
+    style?: StyleXStyles;
+    /**
+     * Custom CSS class name.
+     */
+    className?: string;
+    /**
+     * Accessible label for the table.
+     * @default 'Server Logs'
+     */
+    'aria-label'?: string;
+}
+export type LogsViewerProps = LogsProps;

package/dist/src/components/LogsViewer/exampleLogs.d.ts

@@ -0,0 +1,3 @@
+import { LogItem } from './Logs.types';
+export declare const SERVER_LOG_RAW = "2026/08/19 11:16:49 INFO Starting mould engine server addr=\"http://localhost:8090\" env=\"development\" version=\"dev\"\n2026/08/19 11:16:49 INFO Request tracking flusher started component=\"analytics\"\n2026/08/19 11:16:50 DEBU Flushed request records component=\"analytics\" count=12\n2026/08/19 11:16:52 INFO HTTP request bytes_sent=48 ip=\"127.0.0.1\" latency=\"182.4\u00B5s\" method=\"GET\" path=\"/api/health\" status=200\n2026/08/19 11:16:55 INFO HTTP request bytes_sent=1420 email=\"alex@example.com\" ip=\"192.168.1.45\" latency=\"3.12ms\" method=\"GET\" path=\"/api/mouls/posts/records\" status=200 user_id=\"usr_01j7k9p2\"\n2026/08/19 11:17:02 WARN HTTP request bytes_sent=68 ip=\"192.168.1.45\" latency=\"410.5\u00B5s\" method=\"GET\" path=\"/api/mouls/nonexistent/records\" status=404 error=\"moul 'nonexistent' not found\"\n2026/08/19 11:17:08 WARN Request tracking channel full, dropping request component=\"analytics\" path=\"/api/events\"\n2026/08/19 11:17:15 WARN Background job failed, scheduled for retry error=\"dial tcp: lookup smtp.mailgun.org: no such host\" jobID=\"job_01j7k8a\" nextAttemptAt=\"2026-08-19 11:18:15\" worker=\"SendEmail\"\n2026/08/19 11:17:21 ERRO HTTP request bytes_sent=112 email=\"alex@example.com\" ip=\"192.168.1.80\" latency=\"14.85ms\" method=\"POST\" path=\"/api/mouls/orders/records\" status=500 user_id=\"usr_01j7k9p2\" error=\"database locked (sqlite busy)\"\n2026/08/19 11:17:25 ERRO After-webhook execution failed err=\"Post \\\"https://webhook.site/test\\\": context deadline exceeded\" url=\"https://webhook.site/test\"\n2026/08/19 11:17:30 ERRO Failed to start Litestream replication err=\"credentials not set in environment (AWS_ACCESS_KEY_ID)\"\n2026/08/19 11:17:40 INFO Cleaned up old requests count=42\n2026/08/19 11:17:40 INFO Cleaned up old visits count=15\n2026/08/19 11:17:40 INFO Cleaned up expired revoked tokens count=0\n2026/08/19 11:17:55 INFO Stopping Litestream replication...\n2026/08/19 11:17:55 INFO Server stopped gracefully\n2026/08/19 11:18:02 FATA Server failed to run err=\"listen tcp :8090: bind: address already in use\"";
+export declare const SERVER_LOGS: LogItem[];

package/dist/src/components/LogsViewer/index.d.ts

@@ -0,0 +1,4 @@
+export { SERVER_LOG_RAW, SERVER_LOGS } from './exampleLogs';
+export { HighlightText, type HighlightTextProps, LogAttributeChip, type LogAttributeChipProps, LogCopyIconButton, type LogCopyIconButtonProps, LogLevelBadge, type LogLevelBadgeProps, Logs, LogsViewer, } from './Logs';
+export type { LogFilterLevel, LogItem, LogLevel, LogsProps, LogsViewerProps, } from './Logs.types';
+export { normalizeLogLevel, parseAttributes, parseLogLine, parseLogs, stripAttributes, } from './parseLogs';

package/dist/src/components/LogsViewer/parseLogs.d.ts

@@ -0,0 +1,21 @@
+import { LogItem, LogLevel } from './Logs.types';
+/**
+ * Normalizes any log level string into standard LogLevel.
+ */
+export declare function normalizeLogLevel(levelStr?: string): LogLevel;
+/**
+ * Parses key="value" or key=value key-value pairs from a log string.
+ */
+export declare function parseAttributes(text: string): Record<string, string | number | boolean | null>;
+/**
+ * Strips key=value pairs from the string to obtain the clean base message.
+ */
+export declare function stripAttributes(text: string): string;
+/**
+ * Parses a single log line into a structured LogItem.
+ */
+export declare function parseLogLine(rawLine: string, index?: number): LogItem;
+/**
+ * Parses raw text or list of log strings into LogItem[].
+ */
+export declare function parseLogs(input?: string | (LogItem | string)[]): LogItem[];

package/dist/src/components/NumberField/NumberField.styles.d.ts

@@ -11,12 +11,20 @@ export declare const styles: Readonly<{
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "stretch">;
         readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
         readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
         readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
         readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "border-color, box-shadow">;
         readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
         readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
+        readonly ':hover': stylex.StyleXClassNameFor<":hover", {
+            readonly borderColor: stylex.StyleXVar<string>;
+        }>;
+        readonly '@media (prefers-reduced-motion: reduce)': stylex.StyleXClassNameFor<"@media (prefers-reduced-motion: reduce)", {
+            readonly transitionProperty: "none";
+        }>;
     }>;
     readonly groupSm: Readonly<{
         readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;

package/dist/src/components/SearchField/SearchField.styles.d.ts

@@ -11,11 +11,19 @@ export declare const styles: Readonly<{
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
         readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
         readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
         readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "border-color, box-shadow">;
         readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
         readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
+        readonly ':hover': stylex.StyleXClassNameFor<":hover", {
+            readonly borderColor: stylex.StyleXVar<string>;
+        }>;
+        readonly '@media (prefers-reduced-motion: reduce)': stylex.StyleXClassNameFor<"@media (prefers-reduced-motion: reduce)", {
+            readonly transitionProperty: "none";
+        }>;
     }>;
     readonly groupSm: Readonly<{
         readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
@@ -87,6 +95,21 @@ export declare const styles: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
         readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly '::-webkit-search-cancel-button': stylex.StyleXClassNameFor<"::-webkit-search-cancel-button", {
+            readonly display: "none";
+            readonly WebkitAppearance: "none";
+        }>;
+        readonly '::-webkit-search-decoration': stylex.StyleXClassNameFor<"::-webkit-search-decoration", {
+            readonly display: "none";
+            readonly WebkitAppearance: "none";
+        }>;
+        readonly '::-webkit-search-results-button': stylex.StyleXClassNameFor<"::-webkit-search-results-button", {
+            readonly display: "none";
+        }>;
+        readonly '::-webkit-search-results-decoration': stylex.StyleXClassNameFor<"::-webkit-search-results-decoration", {
+            readonly display: "none";
+        }>;
     }>;
     readonly inputSm: Readonly<{
         readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;

package/dist/src/components/Sidebar/Sidebar.d.ts

@@ -7,6 +7,7 @@ interface SidebarContextValue {
     onSelectionChange?: (key: string) => void;
     variant: 'solid' | 'glass';
     onCollapseToggle: () => void;
+    showCollapseToggle?: boolean;
 }
 export declare function useSidebar(): SidebarContextValue;
 export interface SidebarProps {
@@ -62,12 +63,13 @@ export interface SidebarDividerProps {
 }
 export declare const SidebarDivider: React.ForwardRefExoticComponent<SidebarDividerProps & React.RefAttributes<HTMLDivElement>>;
 export interface SidebarAsideProps {
+    'aria-label'?: string;
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
     showCollapseToggle?: boolean;
 }
-export declare const SidebarAside: React.ForwardRefExoticComponent<SidebarAsideProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SidebarAside: React.ForwardRefExoticComponent<SidebarAsideProps & React.RefAttributes<HTMLElement>>;
 export interface SidebarMainProps {
     style?: StyleXStyles;
     className?: string;

package/dist/src/components/Sidebar/Sidebar.styles.d.ts

@@ -33,8 +33,12 @@ export declare const styles: Readonly<{
     readonly glass: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
-        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "blur(20px)">;
-        readonly WebkitBackdropFilter: stylex.StyleXClassNameFor<"WebkitBackdropFilter", "blur(20px)">;
+        readonly '@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))': stylex.StyleXClassNameFor<"@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))", {
+            readonly backgroundColor: stylex.StyleXVar<string>;
+            readonly borderColor: stylex.StyleXVar<string>;
+            readonly backdropFilter: "blur(20px)";
+            readonly WebkitBackdropFilter: "blur(20px)";
+        }>;
     }>;
     readonly header: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
@@ -303,9 +307,9 @@ export declare const styles: Readonly<{
     }>;
     readonly layout: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
-        readonly height: stylex.StyleXClassNameFor<"height", "100vh">;
-        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "100vh">;
-        readonly width: stylex.StyleXClassNameFor<"width", "100vw">;
+        readonly height: stylex.StyleXClassNameFor<"height", "100%">;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "100%">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;

package/dist/src/components/TextArea/TextArea.styles.d.ts

@@ -16,6 +16,8 @@ export declare const styles: Readonly<{
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;

package/dist/src/components/TextField/TextField.styles.d.ts

@@ -11,6 +11,8 @@ export declare const styles: Readonly<{
         readonly width: stylex.StyleXClassNameFor<"width", "100%">;
         readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
         readonly outline: stylex.StyleXClassNameFor<"outline", "none">;

package/dist/src/components/ToggleButton/ToggleButton.d.ts

@@ -6,6 +6,6 @@ export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'style'>
     className?: string;
     size?: 'sm' | 'md' | 'lg';
     variant?: 'primary' | 'secondary';
-    isSquare?: boolean;
+    isIcon?: boolean;
 }
 export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/ToggleButton/ToggleButton.styles.d.ts

@@ -4,8 +4,10 @@ export declare const styles: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
         readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
         readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
         readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
         readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, border-color, color, transform">;
         readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
         readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
@@ -26,21 +28,24 @@ export declare const styles: Readonly<{
         }>;
     }>;
     readonly sm: Readonly<{
-        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
     }>;
     readonly md: Readonly<{
-        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
     }>;
     readonly lg: Readonly<{
-        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
@@ -208,16 +213,19 @@ export declare const styles: Readonly<{
     readonly selectionIndicatorSecondary: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
     }>;
-    readonly squareSm: Readonly<{
-        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
-        readonly aspectRatio: stylex.StyleXClassNameFor<"aspectRatio", "1/1">;
+    readonly iconSm: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
     }>;
-    readonly squareMd: Readonly<{
-        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
-        readonly aspectRatio: stylex.StyleXClassNameFor<"aspectRatio", "1/1">;
+    readonly iconMd: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
     }>;
-    readonly squareLg: Readonly<{
-        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
-        readonly aspectRatio: stylex.StyleXClassNameFor<"aspectRatio", "1/1">;
+    readonly iconLg: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
     }>;
 }>;

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "2026.08.18";
+export declare const version = "2026.08.21";
 export { Alert } from './components/Alert';
 export type { AlertProps, AlertVariant } from './components/Alert/Alert';
 export { AlertDialog, AlertDialogBody, AlertDialogFooter, AlertDialogHeader, } from './components/AlertDialog';
@@ -49,6 +49,8 @@ export type { LineChartProps } from './components/LineChart';
 export { LineChart } from './components/LineChart';
 export { Link } from './components/Link';
 export type { LinkProps } from './components/Link/Link';
+export type { HighlightTextProps, LogAttributeChipProps, LogFilterLevel, LogItem, LogLevel, LogLevelBadgeProps, LogsProps, LogsViewerProps, } from './components/LogsViewer';
+export { HighlightText, LogAttributeChip, LogLevelBadge, Logs, LogsViewer, normalizeLogLevel, parseAttributes, parseLogLine, parseLogs, SERVER_LOG_RAW, SERVER_LOGS, stripAttributes, } from './components/LogsViewer';
 export { Modal, ModalBody, ModalDialog, ModalFooter, ModalHeader, ModalOverlay, } from './components/Modal';
 export type { ModalBodyProps, ModalDialogProps, ModalFooterProps, ModalHeaderProps, ModalOverlayProps, ModalProps, } from './components/Modal/Modal';
 export { NumberField } from './components/NumberField';
@@ -101,4 +103,5 @@ export { Typography, TypographyHeading, TypographyLabel, TypographyParagraph, Ty
 export type { HeadingProps, ParagraphProps, SpanProps, TypographyLabelProps, TypographyProps, TypographyTag, } from './components/Typography/Typography';
 export type { ThemeProviderProps } from './theme/ThemeProvider';
 export { ThemeProvider } from './theme/ThemeProvider';
+export type { Tokens } from './tokens/tokens.stylex';
 export { tokens } from './tokens/tokens.stylex';

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

@@ -119,3 +119,4 @@ export declare const tokens: stylex.VarGroup<Readonly<{
     colorChart7: string;
     colorChart8: string;
 }>, symbol>;
+export type Tokens = typeof tokens;

package/dist/tokens.stylex.js

@@ -0,0 +1,126 @@
+"use client";
+import "@stylexjs/stylex";
+//#region src/tokens/tokens.stylex.ts
+var e = {
+	colorNeutral50: "var(--x1ox3f4o)",
+	colorNeutral100: "var(--x1oziaxx)",
+	colorNeutral200: "var(--xekkakv)",
+	colorNeutral300: "var(--x4npmm6)",
+	colorNeutral400: "var(--x6l5ye8)",
+	colorNeutral500: "var(--x1s9rx7n)",
+	colorNeutral600: "var(--x7rwqrp)",
+	colorNeutral700: "var(--x1ol9w3z)",
+	colorNeutral800: "var(--xaubso4)",
+	colorNeutral900: "var(--x21z8aa)",
+	colorPrimary50: "var(--x1l7m7gb)",
+	colorPrimary100: "var(--xvy7zpp)",
+	colorPrimary200: "var(--x189jvvz)",
+	colorPrimary300: "var(--x1smr4m2)",
+	colorPrimary400: "var(--x1p3wd7v)",
+	colorPrimary500: "var(--x11vz4nw)",
+	colorPrimary600: "var(--x19wncxt)",
+	colorPrimary700: "var(--xms5kwx)",
+	colorPrimary800: "var(--x1f1ph2q)",
+	colorPrimary900: "var(--x27tw8h)",
+	colorError300: "var(--xywa26s)",
+	colorError400: "var(--x1ttemnr)",
+	colorError500: "var(--xgm7y0w)",
+	colorError600: "var(--x14tkvwa)",
+	colorError700: "var(--xle5duh)",
+	colorWarning300: "var(--xxkj1oe)",
+	colorWarning400: "var(--xvbe47b)",
+	colorWarning500: "var(--x9boa8o)",
+	colorWarning600: "var(--x1foz1o3)",
+	colorWarning700: "var(--x1i80a2t)",
+	colorSuccess300: "var(--x1eg0uv7)",
+	colorSuccess400: "var(--x1xkz733)",
+	colorSuccess500: "var(--xo79180)",
+	colorSuccess600: "var(--xftmch4)",
+	colorSuccess700: "var(--x6beaur)",
+	colorBg: "var(--x1poa4dm)",
+	colorBgSubtle: "var(--xg2wbmg)",
+	colorBgElevated: "var(--x1qnu6yg)",
+	colorFg: "var(--x1jfchzy)",
+	colorFgSubtle: "var(--xaffrw6)",
+	colorFgOnPrimary: "var(--x16n9mb9)",
+	colorBorder: "var(--x1t7g4u6)",
+	colorBorderSubtle: "var(--xrlp4ei)",
+	colorBorderFocus: "var(--x79fgis)",
+	colorBgGlass: "var(--x7we1u4)",
+	colorBorderGlass: "var(--x8ovk6j)",
+	colorShadow: "var(--x1qvbbfx)",
+	colorOverlay: "var(--x2r2dxw)",
+	colorAlertBgInfo: "var(--x1yncxg9)",
+	colorAlertBorderInfo: "var(--xgvswlc)",
+	colorAlertHoverInfo: "var(--xdv3703)",
+	colorAlertActiveInfo: "var(--x1b4xit2)",
+	colorAlertBgAccent: "var(--xfh678y)",
+	colorAlertBorderAccent: "var(--xtwqyzw)",
+	colorAlertHoverAccent: "var(--x2hivg9)",
+	colorAlertActiveAccent: "var(--x1wzp30q)",
+	colorAlertBgSuccess: "var(--xvq252x)",
+	colorAlertBorderSuccess: "var(--x1iepgx6)",
+	colorAlertHoverSuccess: "var(--x1gcqxgm)",
+	colorAlertActiveSuccess: "var(--x1epzsal)",
+	colorAlertBgWarning: "var(--xg2n39v)",
+	colorAlertBorderWarning: "var(--x1n16z78)",
+	colorAlertHoverWarning: "var(--xq3y2id)",
+	colorAlertActiveWarning: "var(--xf8i1ro)",
+	colorAlertBgError: "var(--x1u4wyvx)",
+	colorAlertBorderError: "var(--xwq48n1)",
+	colorAlertHoverError: "var(--x1cujurv)",
+	colorAlertActiveError: "var(--x3091pa)",
+	fontSizeXs: "var(--xpanzj7)",
+	fontSizeSm: "var(--xz9ra21)",
+	fontSizeMd: "var(--x19jnf71)",
+	fontSizeLg: "var(--x16hg6gx)",
+	fontSizeXl: "var(--xkl0paq)",
+	fontSizeXxl: "var(--x18r5va)",
+	fontSize3xl: "var(--x1cwqm9m)",
+	fontSize4xl: "var(--x14r6drk)",
+	lineHeightXs: "var(--x1vx0k0f)",
+	lineHeightSm: "var(--x186dp4y)",
+	lineHeightMd: "var(--x1bapz3m)",
+	lineHeightLg: "var(--x107177a)",
+	lineHeightXl: "var(--x1x2zchm)",
+	lineHeightXxl: "var(--x1t135xi)",
+	lineHeight3xl: "var(--xqmssti)",
+	lineHeight4xl: "var(--x1458rh6)",
+	fontWeightNormal: "var(--x1oo7w7q)",
+	fontWeightMedium: "var(--x1i7new4)",
+	fontWeightSemibold: "var(--xrtlgup)",
+	fontWeightBold: "var(--x1jugmoa)",
+	fontFamilyBase: "var(--xb7uvbd)",
+	spacing1: "var(--x1jforli)",
+	spacing2: "var(--x9epbqz)",
+	spacing3: "var(--x1fim08e)",
+	spacing4: "var(--x1djehx3)",
+	spacing5: "var(--xpmkuee)",
+	spacing6: "var(--x1xsmz2k)",
+	spacing7: "var(--x1aetgvy)",
+	spacing8: "var(--x3461u0)",
+	radiusNone: "var(--x10dfn0a)",
+	radiusSm: "var(--xcxkm4p)",
+	radiusMd: "var(--x11qts0k)",
+	radiusLg: "var(--x8ikvy7)",
+	radiusFull: "var(--x69bofi)",
+	shadowSm: "var(--x1nbpjwp)",
+	shadowMd: "var(--xi6zbv0)",
+	shadowLg: "var(--xckknmd)",
+	zIndexBase: "var(--x1x05ep0)",
+	zIndexDropdown: "var(--x1r4igc)",
+	zIndexModal: "var(--xjyalnt)",
+	zIndexTooltip: "var(--x1yamzkk)",
+	zIndexToast: "var(--xd3kluz)",
+	colorChart1: "var(--x1sjgkb4)",
+	colorChart2: "var(--xndyysw)",
+	colorChart3: "var(--x97jlmp)",
+	colorChart4: "var(--x1te5qoh)",
+	colorChart5: "var(--x174xad0)",
+	colorChart6: "var(--xljzat3)",
+	colorChart7: "var(--x76stw)",
+	colorChart8: "var(--x2x0qih)",
+	__varGroupHash__: "x1x2wves"
+};
+//#endregion
+export { e as tokens };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moul-dev/ui",
-  "version": "2026.08.18",
+  "version": "2026.08.21",
   "description": "Accessible, zero-runtime React component library built on React Aria and StyleX",
   "license": "MIT",
   "type": "module",
@@ -39,6 +39,14 @@
       "types": "./dist/src/index.d.ts",
       "import": "./dist/moul-ui.js"
     },
+    "./tokens": {
+      "types": "./dist/src/tokens/tokens.stylex.d.ts",
+      "import": "./dist/tokens.stylex.js"
+    },
+    "./tokens.stylex": {
+      "types": "./dist/src/tokens/tokens.stylex.d.ts",
+      "import": "./dist/tokens.stylex.js"
+    },
     "./style": {
       "style": "./dist/assets/stylex.css",
       "default": "./dist/assets/stylex.css"
@@ -61,6 +69,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
     "@stylexjs/stylex": "^0.19.0",
     "input-otp": "^1.4.2",
     "react-aria": "^3.50.0",