@djangocfg/ui-tools 2.1.417 → 2.1.419

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';

package/src/tools/input/CronScheduler/index.tsx

@@ -17,7 +17,7 @@
  */
 
 import React, { lazy, Suspense } from 'react';
-import { LoadingFallback } from '../../../components';
+import { LoadingFallback } from '../../../common';
 import type { CronSchedulerProps } from './types';
 
 // Lazy load the client component
@@ -78,6 +78,8 @@ export {
   parseCron,
   isValidCron,
   humanizeCron,
+  getNextRuns,
+  formatNextRun,
 } from './utils';
 
 // Re-export components for custom compositions
@@ -88,6 +90,8 @@ export {
   MonthDayGrid,
   CustomInput,
   SchedulePreview,
+  CronPreview,
 } from './components';
+export type { CronPreviewProps } from './components';
 
 export default CronScheduler;

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

@@ -15,7 +15,7 @@
  * />
  */
 
-import { createLazyComponent, LoadingFallback } from '../../../components';
+import { createLazyComponent, LoadingFallback } from '../../../common';
 import type { CronSchedulerProps } from './types';
 
 // Re-export types
@@ -28,6 +28,10 @@ export type {
   CronSchedulerState,
 } from './types';
 
+// Re-export the read-only preview (small, no lazy needed — pure render).
+export { CronPreview } from './components/CronPreview';
+export type { CronPreviewProps } from './components/CronPreview';
+
 /**
  * LazyCronScheduler - Lazy-loaded cron expression builder
  *

package/src/tools/input/CronScheduler/utils/cron-next-runs.ts

@@ -0,0 +1,122 @@
+/**
+ * Cron Next Runs
+ *
+ * Computes upcoming run times for a standard 5-field cron expression
+ * (minute, hour, day-of-month, month, day-of-week). Supports `*`, lists
+ * (`1,2,3`), ranges (`1-5`), and step values (`*\/15`, `1-5/2`).
+ *
+ * Implementation note: this is a minute-resolution scanner — adequate for
+ * preview UIs (showing the next few runs). It does not attempt to support
+ * non-standard fields (seconds, year, `L`, `W`, `#`).
+ */
+
+function parseField(field: string, min: number, max: number): number[] {
+  const values = new Set<number>();
+
+  for (const part of field.split(',')) {
+    const stepMatch = part.match(/^(.+)\/(\d+)$/);
+    const step = stepMatch ? parseInt(stepMatch[2], 10) : 1;
+    const range = stepMatch ? stepMatch[1] : part;
+
+    if (!Number.isFinite(step) || step < 1) continue;
+
+    if (range === '*') {
+      for (let i = min; i <= max; i += step) values.add(i);
+    } else if (range.includes('-')) {
+      const [start, end] = range.split('-').map(Number);
+      if (Number.isFinite(start) && Number.isFinite(end)) {
+        for (let i = start; i <= end; i += step) values.add(i);
+      }
+    } else {
+      const n = parseInt(range, 10);
+      if (Number.isFinite(n)) values.add(n);
+    }
+  }
+
+  return Array.from(values).sort((a, b) => a - b);
+}
+
+/**
+ * Compute the next `count` run times of a cron expression starting after
+ * `from` (exclusive). Returns an empty array for invalid expressions.
+ */
+export function getNextRuns(cron: string, count: number, from: Date = new Date()): Date[] {
+  if (!cron || typeof cron !== 'string' || count <= 0) return [];
+
+  const fields = cron.trim().split(/\s+/);
+  if (fields.length !== 5) return [];
+
+  const minuteValues = parseField(fields[0], 0, 59);
+  const hourValues = parseField(fields[1], 0, 23);
+  const domValues = parseField(fields[2], 1, 31);
+  const monthValues = parseField(fields[3], 1, 12);
+  const dowValues = parseField(fields[4], 0, 6);
+
+  if (
+    minuteValues.length === 0 ||
+    hourValues.length === 0 ||
+    (fields[2] !== '*' && domValues.length === 0) ||
+    (fields[3] !== '*' && monthValues.length === 0) ||
+    (fields[4] !== '*' && dowValues.length === 0)
+  ) {
+    return [];
+  }
+
+  const minuteSet = new Set(minuteValues);
+  const hourSet = new Set(hourValues);
+  const domSet = fields[2] === '*' ? null : new Set(domValues);
+  const monthSet = fields[3] === '*' ? null : new Set(monthValues);
+  const dowSet = fields[4] === '*' ? null : new Set(dowValues);
+
+  const runs: Date[] = [];
+  const cursor = new Date(from);
+  cursor.setSeconds(0, 0);
+  cursor.setMinutes(cursor.getMinutes() + 1);
+
+  // cap at ~1 year of minutes — far enough for monthly schedules,
+  // tight enough that broken expressions return quickly.
+  const maxIterations = 366 * 24 * 60;
+
+  for (let i = 0; i < maxIterations && runs.length < count; i++) {
+    const m = cursor.getMinutes();
+    const h = cursor.getHours();
+    const d = cursor.getDate();
+    const mo = cursor.getMonth() + 1;
+    const w = cursor.getDay();
+
+    if (
+      minuteSet.has(m) &&
+      hourSet.has(h) &&
+      (domSet === null || domSet.has(d)) &&
+      (monthSet === null || monthSet.has(mo)) &&
+      (dowSet === null || dowSet.has(w))
+    ) {
+      runs.push(new Date(cursor));
+    }
+
+    cursor.setMinutes(cursor.getMinutes() + 1);
+  }
+
+  return runs;
+}
+
+/**
+ * Default human-friendly formatter for a next-run Date.
+ * Example: "Mon, Jan 5 at 9:00 AM"
+ */
+export function formatNextRun(date: Date): string {
+  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  const months = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+  ];
+  const day = days[date.getDay()];
+  const month = months[date.getMonth()];
+  const d = date.getDate();
+  const h = date.getHours();
+  const m = date.getMinutes().toString().padStart(2, '0');
+  const period = h >= 12 ? 'PM' : 'AM';
+  const hour = h === 0 ? 12 : h > 12 ? h - 12 : h;
+
+  return `${day}, ${month} ${d} at ${hour}:${m} ${period}`;
+}

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

@@ -10,3 +10,4 @@ export {
   getWeekdayName,
   getWeekdayShort,
 } from './cron-humanize';
+export { getNextRuns, formatNextRun } from './cron-next-runs';

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

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

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

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

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { createLazyComponent } from '../../../components';
+import { createLazyComponent } from '../../../common';
 import type { DictationFieldProps } from './widgets/DictationField';
 
 export const LazyDictationField = createLazyComponent<DictationFieldProps>(