@moul-dev/ui 2026.8.18 → 2026.8.20

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/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/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,6 +4,7 @@ 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 transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, border-color, color, transform">;
@@ -208,15 +209,15 @@ export declare const styles: Readonly<{
     readonly selectionIndicatorSecondary: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
     }>;
-    readonly squareSm: Readonly<{
+    readonly iconSm: Readonly<{
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly aspectRatio: stylex.StyleXClassNameFor<"aspectRatio", "1/1">;
     }>;
-    readonly squareMd: Readonly<{
+    readonly iconMd: Readonly<{
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly aspectRatio: stylex.StyleXClassNameFor<"aspectRatio", "1/1">;
     }>;
-    readonly squareLg: Readonly<{
+    readonly iconLg: Readonly<{
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly aspectRatio: stylex.StyleXClassNameFor<"aspectRatio", "1/1">;
     }>;

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "2026.08.18";
+export declare const version = "2026.08.20";
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moul-dev/ui",
-  "version": "2026.08.18",
+  "version": "2026.08.20",
   "description": "Accessible, zero-runtime React component library built on React Aria and StyleX",
   "license": "MIT",
   "type": "module",
@@ -61,6 +61,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",