@djangocfg/ui-tools 2.1.418 → 2.1.419

package/src/tools/forms/NotionEditor/README.md

@@ -0,0 +1,237 @@
+# NotionEditor
+
+Notion-style WYSIWYG markdown editor built on **TipTap v3**.
+
+Lazy-loaded sibling of [`MarkdownEditor`](../MarkdownEditor/) — same
+markdown round-trip, but with a heavier extension stack and the
+floating menus (slash / bubble / drag handle) that users expect from a
+"document" editor.
+
+```tsx
+import { NotionEditor } from '@djangocfg/ui-tools/notion-editor';
+
+<NotionEditor
+  value={markdown}
+  onChange={setMarkdown}
+  onSave={(md) => writeFile(md)}
+  autoFocus
+  placeholder="Type '/' for commands…"
+/>
+```
+
+## When to use this vs `MarkdownEditor`
+
+| Use case                                | Pick                |
+| --------------------------------------- | ------------------- |
+| Chat composer, single-paragraph input   | `MarkdownEditor`    |
+| Note / doc surface, multi-paragraph     | `NotionEditor`      |
+| `.md` file viewer with full editing     | `NotionEditor`      |
+| Slim mention dropdown, no tables/tasks  | `MarkdownEditor`    |
+| Slash menu, drag handle, tables, hljs   | `NotionEditor`      |
+
+The two coexist intentionally — `NotionEditor` is ~350 KB minified
+(lowlight common pack + tables + drag handle); `MarkdownEditor` is
+~200 KB. Don't mount NotionEditor inside a chat composer just to get
+features the user will never use.
+
+## Features
+
+- **Slash menu (`/`)** — 11 commands: Text, H1-H3, Bullet/Numbered/Todo
+  lists, Quote, Code block, Divider, Table. Each item shows its
+  markdown shorthand (`#`, `- [ ]`, etc.) as a kbd hint. Filtering by
+  title + aliases. `Esc` / click-outside close.
+- **Bubble menu** — floating selection toolbar with Bold, Italic,
+  Underline, Strike, Code, Highlight, Link. Each button has a Tooltip
+  with the keyboard shortcut. Auto-hides inside code blocks and on
+  empty selections.
+- **Cmd+K link prompt** — opens a Radix Dialog with URL input and
+  Save/Remove/Cancel. Snapshots and restores selection across the
+  dialog mount. Rejects unsafe schemes (`javascript:`, `data:`).
+- **Drag handle** — Notion-style ⠿ grip appears on the left of every
+  block on hover (powered by `tiptap-extension-global-drag-handle`).
+  The icon is rendered as a `mask-image` of `lucide`'s `GripVertical`
+  so it matches the rest of the app at the pixel level.
+- **Smart Cmd+A** — first press selects the current text block, second
+  press selects the whole document (Notion convention).
+- **Heading-aware placeholder** — empty H1/H2/H3 show "Heading 1/2/3";
+  empty paragraphs show the supplied placeholder.
+- **Forced-dark code blocks** — code blocks render on a fixed One Dark
+  Pro surface regardless of host theme. Avoids the washed-out
+  "light syntax on light page" look every editor hits.
+- **Task list with ui-core `<Checkbox>`** — `taskItem` uses a React
+  `NodeView` so the checkbox is the same component used everywhere
+  else in the app (theme-aware, focus ring, etc.). Aligned to the
+  text cap-height via `align-items: baseline`.
+- **Cmd+S save hook** — `onSave?: (md: string) => void` bound to
+  Cmd/Ctrl+S via `useHotkey`, scoped to the editor DOM so it doesn't
+  collide with global palettes higher up.
+- **autoFocus** — declarative prop. Pair with `key={path}` upstream
+  when the parent wants a fresh focus per file change.
+- **Markdown shortcuts** — StarterKit's input rules cover `#`, `>`,
+  `-`, `1.`, `` ``` ``, `---` → matching block on type.
+
+## Extension stack
+
+Built once per editor instance (see `extensions.ts`). Order matters
+for markdown serialisation — `Markdown` is registered before
+`Highlight`/`TaskList` so the latter use the markdown extension's
+node spec when serialising.
+
+- `StarterKit` — paragraph, headings 1-4, bold/italic/code/strike,
+  blockquote, ordered+unordered list, link, underline, horizontal
+  rule, history. CodeBlock is **disabled** here — replaced by
+  `CodeBlockLowlight` for syntax highlighting.
+- `Placeholder` — heading-aware ghost text.
+- `Markdown` — bidirectional serialisation via `@tiptap/markdown`.
+  Handles tables, task lists (`- [ ]`), highlight (`==text==`).
+- `Highlight` — `==text==` mark.
+- `TaskList` + `TaskItem.extend({ addNodeView: TaskItemView })`.
+- `Table` + `TableRow` + `TableHeader` + `TableCell`.
+- `CodeBlockLowlight` — uses `lowlight`'s `common` language pack
+  (~25 languages). Add more by importing them and registering on the
+  shared `lowlight` instance.
+- `GlobalDragHandle` — block grabber. **One handle per page** — see
+  the "Known limitations" section below.
+- `SlashExtension` — wraps `@tiptap/suggestion` for the `/` menu.
+- `CustomKeymap` — smart Cmd+A.
+
+## Files
+
+| File                          | Purpose                                                     |
+| ----------------------------- | ----------------------------------------------------------- |
+| `lazy.tsx`                    | Subpath entry — `React.lazy` + `forwardRef` for the handle  |
+| `NotionEditor.tsx`            | Main component + `BubbleSelectionToolbar`                   |
+| `extensions.ts`               | Assembled TipTap stack (factory `notionExtensions()`)       |
+| `types.ts`                    | `NotionEditorProps`, `NotionEditorHandle`                   |
+| `SlashExtension.ts`           | TipTap extension wrapping `@tiptap/suggestion`              |
+| `createSlashSuggestion.ts`    | Suggestion config — floating-ui popup mount/update/teardown |
+| `SlashList.tsx`               | Popover content (listbox + keyboard nav)                    |
+| `slashItems.ts`               | Command list + `filterSlashItems` helper                    |
+| `CustomKeymap.ts`             | Smart Cmd+A extension                                       |
+| `TaskItemView.tsx`            | React NodeView for `taskItem` (mounts ui-core Checkbox)     |
+| `LinkDialog.tsx`              | Cmd+K link prompt (ui-core Dialog)                          |
+| `styles.css`                  | Typography + slash/bubble menu + drag handle + lowlight     |
+
+## Imperative API
+
+```tsx
+const ref = useRef<NotionEditorHandle>(null);
+
+ref.current?.focus();             // focus the editor surface
+ref.current?.moveCursorToEnd();   // focus + caret at end
+ref.current?.getEditor();         // raw TipTap Editor (escape hatch)
+```
+
+`NotionEditorHandle` is structurally compatible with `ComposerHandle`
+from `@djangocfg/ui-tools/composer-registry` — the chat suite can
+register a NotionEditor as a composer if you ever want to swap them in
+the chat input (unusual, but allowed).
+
+## Saving — dirty / pristine handling
+
+The editor is **uncontrolled-ish**: it calls `onChange` on every
+keystroke with the freshly-serialised markdown. The host owns state
+and detects "dirty" however it likes.
+
+Two gotchas the host needs to know about:
+
+1. **TipTap re-serialises markdown on mount** (trailing newline,
+   CRLF → LF normalisation). The first `onChange` after
+   `setContent(value)` is byte-different from `value` even though
+   nobody typed. If you compare `draft !== savedContent` literally,
+   the dirty indicator lights up on every file open. **Fix in the
+   host**: normalise both sides before comparing.
+
+   ```ts
+   const norm = (s: string) => s.replace(/\r\n/g, '\n').trimEnd();
+   const isDirty = norm(draft) !== norm(saved);
+   ```
+
+2. **Cmd+S only fires when focus is inside the editor**. If the user
+   clicked outside (header, sidebar) and presses Cmd+S, this hook
+   doesn't fire. Add a window-level `useHotkey('mod+s', save)` in the
+   host as a fallback — both paths call the same save fn.
+
+See `cmdop/.../document-preview/viewers/text-viewer.tsx` for the
+canonical wiring.
+
+## Markdown round-trip
+
+| Input            | Round-trips? | Notes                              |
+| ---------------- | ------------ | ---------------------------------- |
+| Headings         | ✓            | H1-H4 only (StarterKit config)     |
+| Bold/italic/etc. | ✓            |                                    |
+| Inline code      | ✓            |                                    |
+| Code blocks      | ✓            | Language fence preserved by hljs   |
+| Bullet/ordered   | ✓            | Nested too                         |
+| Task lists       | ✓            | GFM `- [x]` / `- [ ]`              |
+| Blockquote       | ✓            |                                    |
+| Horizontal rule  | ✓            | `---`                              |
+| Tables           | ✓            | GFM tables — alignment via `:--:`  |
+| Links            | ✓            | autolinks too                      |
+| Highlight        | ✓            | `==text==` extension syntax        |
+| Images           | mostly       | Round-trip URLs, no upload yet     |
+| HTML passthrough | ✗            | Stripped on parse                  |
+| Footnotes        | ✗            | Not in StarterKit                  |
+
+## Known limitations
+
+- **One editor per page (drag handle).**
+  `tiptap-extension-global-drag-handle` mints a single DOM grabber
+  attached to `document.body`. Mounting two `NotionEditor` instances
+  on the same page (e.g. a side-by-side diff) makes them fight over
+  the handle. If you need multiple editors, render only one with
+  drag-handle support.
+
+- **Slash popup is portal'd to `document.body`.**
+  If the parent unmounts the editor mid-suggestion, the popup gets
+  cleaned up by ProseMirror's `onExit` — but a hostile race (route
+  change while menu is open) can leave an orphan div. Rare; visible
+  only via the inspector.
+
+- **No image upload pipeline (yet).**
+  `Image` extension is not registered. Pasting an image from the
+  clipboard inserts the data-URL into the document (browser default)
+  but there's no upload integration. Add `@tiptap/extension-image` +
+  a custom paste handler when you have a target storage. See Novel's
+  `plugins/upload-images.tsx` for the canonical pattern.
+
+- **Bubble menu uses `@tiptap/react/menus`'s `BubbleMenu`** (Tippy
+  under the hood). Slash menu uses `floating-ui` directly. Two
+  positioning libraries for one editor — kept this way because
+  `BubbleMenu` is opinionated about anchor invalidation and Tippy
+  handles it correctly; reimplementing on floating-ui would save
+  ~5 KB but cost a week of edge cases.
+
+## Storybook
+
+Stories live at `apps/storybook/stories/ui-tools/markdown/NotionEditor.stories.tsx`:
+
+- Default (empty editor with placeholder)
+- With sample content (every supported block + serialised output panel)
+- Auto-focus on mount
+- Read-only
+- Compact (240px min-height)
+
+Each story renders a right-side panel showing the current serialised
+markdown so you can watch the round-trip live as you type.
+
+## Wiring inside a host
+
+The canonical host is `cmdop`'s document-preview text viewer:
+
+```tsx
+// .md → NotionEditor only (it's already WYSIWYG, no Preview/Source split)
+<div className="mx-auto w-full max-w-[820px] px-6 py-6">
+  <NotionEditor
+    value={draft}
+    onChange={handleChange}
+    onSave={save}
+    autoFocus
+    minHeight={420}
+  />
+</div>
+```
+
+Use `key={path}` on the wrapper if you remount per file — that's what
+makes `autoFocus` fire on each file open.

package/src/tools/forms/NotionEditor/lazy.tsx

@@ -18,7 +18,7 @@
  */
 
 import { Suspense, forwardRef, lazy } from 'react';
-import { LoadingFallback } from '../../../components';
+import { LoadingFallback } from '../../../common';
 import type { NotionEditorHandle, NotionEditorProps } from './types';
 
 const NotionEditorImpl = lazy(() =>

package/src/tools/index.ts

@@ -18,10 +18,10 @@
 
 // Export tools as named exports (all use React.lazy internally)
 export { default as JsonTree } from './data/JsonTree';
-export type { JsonTreeConfig } from './data/JsonTree';
+export type { JsonTreeProps, JsonValue, JsonAction, JsonSize } from './data/JsonTree';
 export { default as Mermaid } from './dev/Mermaid';
-export { default as PrettyCode } from './dev/PrettyCode';
-export type { Language } from './dev/PrettyCode';
+export { default as PrettyCode } from './dev/code/PrettyCode';
+export type { Language } from './dev/code/PrettyCode';
 export { LottiePlayer, useLottie, usePrefersReducedMotion } from './media/LottiePlayer';
 export type {
   LottiePlayerProps,
@@ -41,8 +41,8 @@ export * from './forms/JsonForm/templates';
 export * from './forms/JsonForm/utils';
 
 // Export OpenapiViewer
-export { default as OpenapiViewer } from './dev/OpenapiViewer';
-export type { PlaygroundConfig, SchemaSource, PlaygroundProps } from './dev/OpenapiViewer';
+export { default as OpenapiViewer } from './dev/api/OpenapiViewer';
+export type { PlaygroundConfig, SchemaSource, PlaygroundProps } from './dev/api/OpenapiViewer';
 
 // Export VideoPlayer (media-chrome shell with provider-aware canvases)
 export {
@@ -119,6 +119,8 @@ export {
   parseCron,
   isValidCron,
   humanizeCron,
+  getNextRuns,
+  formatNextRun,
   // Components
   ScheduleTypeSelector,
   TimeSelector,
@@ -126,6 +128,7 @@ export {
   MonthDayGrid,
   CustomInput,
   SchedulePreview,
+  CronPreview,
 } from './input/CronScheduler';
 export type {
   CronSchedulerProps,
@@ -135,6 +138,7 @@ export type {
   MonthDay,
   CronSchedulerState,
   CronSchedulerContextValue,
+  CronPreviewProps,
 } from './input/CronScheduler';
 
 // Export CodeEditor (Monaco ~550KB)
@@ -380,6 +384,20 @@ export type {
   ComboboxOption,
 } from './input/Combobox';
 
+// Export ColorPalette (jalcoui port, Phase 1 Wave 3)
+export {
+  ColorPalette,
+  ColorPaletteSwatch,
+  formatColor as colorPaletteFormatColor,
+  getReadableContrast as colorPaletteGetReadableContrast,
+} from './visual/design/ColorPalette';
+export type {
+  ColorEntry as ColorPaletteEntry,
+  ColorFormat as ColorPaletteFormat,
+  ColorPaletteMode,
+  ColorPaletteProps,
+} from './visual/design/ColorPalette';
+
 // Export ColorPicker
 export {
   ColorPicker,
@@ -392,11 +410,11 @@ export {
   ColorPickerEyeDropper,
   ColorPickerFormatSelect,
   ColorPickerInput,
-} from './visual/ColorPicker';
+} from './visual/design/ColorPicker';
 export type {
   ColorPickerProps,
   ColorPickerInputProps,
-} from './visual/ColorPicker';
+} from './visual/design/ColorPicker';
 
 // Export FileUpload
 export {
@@ -420,8 +438,8 @@ export type {
 } from './forms/FileUpload';
 
 // Export Fps
-export { Fps } from './visual/Fps';
-export type { FpsProps } from './visual/Fps';
+export { Fps } from './visual/indicators/Fps';
+export type { FpsProps } from './visual/indicators/Fps';
 
 // Export Gauge
 export {
@@ -432,8 +450,8 @@ export {
   GaugeValueText,
   GaugeLabel,
   GaugeCombined,
-} from './visual/Gauge';
-export type { GaugeProps } from './visual/Gauge';
+} from './visual/charts/Gauge';
+export type { GaugeProps } from './visual/charts/Gauge';
 
 // Export Marquee
 export {
@@ -466,11 +484,133 @@ export type {
 export {
   Rating,
   RatingItem,
-} from './visual/Rating';
+} from './visual/indicators/Rating';
 export type {
   RatingProps,
   RatingItemProps,
-} from './visual/Rating';
+} from './visual/indicators/Rating';
+
+// Export ActivityGraph (jalcoui port, Phase 1)
+export { ActivityGraph } from './visual/charts/ActivityGraph';
+export type { ActivityGraphProps, ActivityEntry } from './visual/charts/ActivityGraph';
+
+// Export CommitGraph (jalcoui port, Phase 1)
+export {
+  CommitGraph,
+  useLaneColors as useCommitGraphLaneColors,
+  useGraphLayout as useCommitGraphLayout,
+  pickLaneColor as pickCommitGraphLaneColor,
+  ROW_HEIGHT as COMMIT_GRAPH_ROW_HEIGHT,
+} from './visual/charts/CommitGraph';
+export type {
+  Commit,
+  CommitAuthor,
+  CommitGraphProps,
+  Edge as CommitGraphEdge,
+  EdgeType as CommitGraphEdgeType,
+  GraphRow as CommitGraphRow,
+} from './visual/charts/CommitGraph';
+
+// Export StatusIndicator (golden sample — jalcoui port, Phase 0)
+export {
+  StatusIndicator,
+  STATUS_CONFIG,
+  TONE_CLASSES as STATUS_TONE_CLASSES,
+  statusIndicatorVariants,
+} from './visual/indicators/StatusIndicator';
+export type {
+  Status,
+  StatusTone,
+  StatusIndicatorProps,
+  StatusIndicatorSize,
+} from './visual/indicators/StatusIndicator';
+
+// Export EnvTable (jalcoui port, Phase 2)
+export {
+  EnvTable,
+  ENV_TONE_CLASSES,
+  getEnvTone,
+  maskValue as envMaskValue,
+  useEnvMask,
+} from './dev/ops/EnvTable';
+export type {
+  EnvTableProps,
+  EnvVariable,
+  EnvEnvironment,
+  EnvBadgeTone,
+} from './dev/ops/EnvTable';
+
+// Export LogViewer (jalcoui port, Phase 2 Wave 2)
+export {
+  LogViewer,
+  LEVEL_LABELS as LOG_LEVEL_LABELS,
+  LEVEL_TONE as LOG_LEVEL_TONE,
+  LOG_TONE_CLASSES,
+  getLevelToneClasses,
+  parseAnsi,
+  stripAnsi,
+} from './dev/ops/LogViewer';
+export type {
+  LogEntry,
+  LogLevel,
+  LogTone,
+  LogToneClasses,
+  LogViewerProps,
+  AnsiSegment,
+} from './dev/ops/LogViewer';
+
+// Export ApiRefTable (jalcoui port, Phase 2)
+export {
+  ApiRefTable,
+  TYPE_TAG_CLASSES as API_REF_TYPE_TAG_CLASSES,
+  classifyTypeToken as classifyApiRefTypeToken,
+  splitTypeSignature as splitApiRefTypeSignature,
+} from './dev/api/ApiRefTable';
+export type {
+  ApiProp,
+  ApiRefTableProps,
+  TypeTag as ApiRefTypeTag,
+} from './dev/api/ApiRefTable';
+
+// Export DiffViewer (jalcoui port, Phase 2 Wave 3)
+export {
+  DiffViewer,
+  DIFF_TONE_CLASSES,
+  diffLines,
+  parseUnifiedPatch,
+  computeDiffStats,
+  diffLineNumberWidth,
+  useDiff,
+  normalizeDiffLanguage,
+} from './dev/code/DiffViewer';
+export type {
+  DiffLayout,
+  DiffLine,
+  DiffLineType,
+  DiffStats,
+  DiffInput,
+  DiffToneClasses,
+  DiffViewerProps,
+} from './dev/code/DiffViewer';
+
+// Export RequestViewer (jalcoui port, Phase 2)
+export { RequestViewer } from './dev/api/RequestViewer';
+export type {
+  RequestViewerProps,
+  RequestViewerTab,
+  NetworkRequest,
+  HeaderEntry as RequestViewerHeaderEntry,
+  TimingEntry as RequestViewerTimingEntry,
+} from './dev/api/RequestViewer';
+
+// Export Sparkline (jalcoui port, Phase 1)
+export { Sparkline } from './visual/charts/Sparkline';
+export type {
+  SparklineProps,
+  SparklineColor,
+  SparklineVariant,
+  SparklineDatum,
+} from './visual/charts/Sparkline';
 
 // Export DataGrid
 export {

package/src/tools/input/Combobox/lazy.tsx

@@ -4,7 +4,7 @@
  * Lazy-loaded Combobox Component
  */
 
-import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
+import { createLazyComponent, LoadingFallback } from '../../../common/lazy-wrapper';
 import type {
   ComboboxProps,
   ComboboxTriggerProps,

package/src/tools/input/CronScheduler/components/CronPreview.README.md

@@ -0,0 +1,28 @@
+# CronPreview
+
+Read-only companion to `CronScheduler`. Renders a human-readable summary of a cron expression and an optional list of upcoming run times. Standalone — no `CronSchedulerProvider` required.
+
+Use it in dashboards, list rows, and read-only schedule views.
+
+```tsx
+import { CronPreview } from '@djangocfg/ui-tools/cron-scheduler';
+
+<CronPreview value="0 9 * * 1-5" />
+<CronPreview value="*/15 * * * *" nextRuns={5} />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `string` | — | Standard 5-field cron expression. |
+| `title` | `string` | — | Optional heading above the summary. |
+| `nextRuns` | `number` | `5` | Upcoming run times to display. `0` hides the list. |
+| `showExpression` | `boolean` | `true` | Show the raw cron expression alongside the summary. |
+| `referenceDate` | `Date` | `new Date()` | Base date for computing next runs. |
+
+Storybook: `apps/storybook/stories/ui-tools/cron/CronPreview.stories.tsx`
+
+---
+
+Adapted from jalcoui (MIT).

package/src/tools/input/CronScheduler/components/CronPreview.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+/**
+ * CronPreview
+ *
+ * Read-only sibling of `CronScheduler`. Renders a human-readable summary
+ * for a cron expression plus an optional list of upcoming run times.
+ *
+ * Unlike `SchedulePreview` (which lives inside the editor and pulls its
+ * state from `CronSchedulerProvider`), `CronPreview` is fully standalone:
+ * pass a value, get a preview. Use it in dashboards, list rows, and
+ * read-only schedule views where the heavier editor is not needed.
+ *
+ * @example
+ * <CronPreview value="0 9 * * 1-5" />
+ *
+ * @example
+ * <CronPreview value="*\/15 * * * *" nextRuns={5} />
+ */
+
+import * as React from 'react';
+import { Calendar } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { humanizeCron } from '../utils/cron-humanize';
+import { getNextRuns, formatNextRun } from '../utils/cron-next-runs';
+import { isValidCron } from '../utils/cron-parser';
+
+export interface CronPreviewProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+  /** Cron expression (standard 5-field format, e.g. `"0 9 * * 1-5"`). */
+  value: string;
+  /** Optional heading shown above the summary. */
+  title?: string;
+  /**
+   * Number of upcoming run times to display.
+   * `0` hides the list. Defaults to `5`.
+   */
+  nextRuns?: number;
+  /** Show the raw cron expression alongside the summary. Defaults to `true`. */
+  showExpression?: boolean;
+  /** Base date for computing next runs. Defaults to "now". */
+  referenceDate?: Date;
+  /** Additional CSS classes for the outer container. */
+  className?: string;
+}
+
+export function CronPreview({
+  value,
+  title,
+  nextRuns = 5,
+  showExpression = true,
+  referenceDate,
+  className,
+  ...rest
+}: CronPreviewProps) {
+  const trimmed = (value ?? '').trim();
+  const valid = isValidCron(trimmed);
+
+  const summary = React.useMemo(() => humanizeCron(trimmed), [trimmed]);
+
+  const runs = React.useMemo(() => {
+    if (!valid || nextRuns <= 0) return [];
+    return getNextRuns(trimmed, nextRuns, referenceDate ?? new Date());
+  }, [trimmed, valid, nextRuns, referenceDate]);
+
+  if (!valid) {
+    return (
+      <div
+        data-slot="cron-preview"
+        className={cn(
+          'rounded-xl border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive',
+          className
+        )}
+        {...rest}
+      >
+        Invalid cron expression: <code className="font-mono">{trimmed || '(empty)'}</code>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-slot="cron-preview"
+      role="status"
+      aria-live="polite"
+      className={cn(
+        'overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-sm',
+        className
+      )}
+      {...rest}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3 border-b border-border/60 px-4 py-3">
+        <div className="flex min-w-0 items-start gap-2">
+          <Calendar aria-hidden="true" className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+          <div className="flex min-w-0 flex-col gap-0.5">
+            {title && (
+              <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+            )}
+            <p className="text-sm text-muted-foreground">{summary}</p>
+          </div>
+        </div>
+        {showExpression && (
+          <code className="shrink-0 rounded-md bg-muted px-2.5 py-1 font-mono text-xs text-foreground">
+            {trimmed}
+          </code>
+        )}
+      </div>
+
+      {/* Next runs */}
+      {runs.length > 0 && (
+        <div className="px-4 py-3">
+          <p className="mb-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+            Next {runs.length === 1 ? 'run' : `${runs.length} runs`}
+          </p>
+          <ol className="flex flex-col gap-1">
+            {runs.map((run, i) => (
+              <li
+                key={run.toISOString()}
+                className="flex items-center gap-2 text-sm"
+              >
+                <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground">
+                  {i + 1}
+                </span>
+                <span className="font-mono text-xs text-foreground">
+                  {formatNextRun(run)}
+                </span>
+              </li>
+            ))}
+          </ol>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CronPreview;

package/src/tools/input/CronScheduler/components/index.ts

@@ -22,3 +22,6 @@ export type { SchedulePreviewProps } from './SchedulePreview';
 
 export { CronCheatsheet } from './CronCheatsheet';
 export type { CronCheatsheetProps } from './CronCheatsheet';
+
+export { CronPreview } from './CronPreview';
+export type { CronPreviewProps } from './CronPreview';