@djangocfg/ui-tools 2.1.418 → 2.1.419

package/src/tools/dev/code/DiffViewer/types.ts

@@ -0,0 +1,109 @@
+// Adapted from jalcoui (MIT) — github.com/jal-co/ui
+
+import type * as React from 'react';
+import type { Language } from 'prism-react-renderer';
+
+/** Layout of the diff: single-column unified vs. side-by-side split. */
+export type DiffLayout = 'unified' | 'split';
+
+/** Per-line kind in a computed diff. */
+export type DiffLineType = 'added' | 'removed' | 'context';
+
+/**
+ * One rendered line in the diff. Old / new line numbers are independent:
+ * an added line has no `oldNumber`, a removed line has no `newNumber`.
+ */
+export interface DiffLine {
+  type: DiffLineType;
+  content: string;
+  oldNumber: number | null;
+  newNumber: number | null;
+}
+
+/** Diff stats — rendered in the header pill. */
+export interface DiffStats {
+  added: number;
+  removed: number;
+}
+
+interface WithStrings {
+  /** Original code (LHS). */
+  oldCode: string;
+  /** Updated code (RHS). */
+  newCode: string;
+  patch?: never;
+}
+
+interface WithPatch {
+  /** Pre-computed unified diff string (alternative to oldCode / newCode). */
+  patch: string;
+  oldCode?: never;
+  newCode?: never;
+}
+
+export type DiffInput = WithStrings | WithPatch;
+
+/**
+ * Tone classes for a single diff line. Tailwind class strings backed by
+ * semantic tokens — the diff viewer adapts to the host theme (light or
+ * dark) unlike `PrettyCode`, which is intentionally always-dark. Diffs
+ * are commonly embedded in documentation pages, where forcing a dark
+ * surface on a light page looks like a bug.
+ */
+export interface DiffToneClasses {
+  /** Row background tint. */
+  row: string;
+  /** Gutter / line-number column foreground. */
+  num: string;
+  /** Body text color. */
+  text: string;
+  /** Header stat pill color (e.g. `+12`). */
+  stat: string;
+}
+
+/**
+ * Mapping from line type to tone class bundle. Semantic tokens —
+ * resolved by the host theme (light surfaces in light mode, dark in
+ * dark mode).
+ */
+export const DIFF_TONE_CLASSES: Record<DiffLineType, DiffToneClasses> = {
+  added: {
+    row: 'bg-success/10',
+    num: 'text-success/80',
+    text: 'text-success',
+    stat: 'text-success',
+  },
+  removed: {
+    row: 'bg-destructive/15',
+    num: 'text-destructive/80',
+    text: 'text-destructive',
+    stat: 'text-destructive',
+  },
+  context: {
+    row: '',
+    num: 'text-muted-foreground/60',
+    text: 'text-foreground',
+    stat: 'text-muted-foreground',
+  },
+};
+
+export type DiffViewerProps = DiffInput &
+  Omit<React.ComponentProps<'div'>, 'children'> & {
+    /** Layout. @default `'unified'` */
+    layout?: DiffLayout;
+    /**
+     * Prism language key for optional syntax highlighting. When omitted,
+     * lines render as plain monospace. Highlighting reuses the same
+     * `prism-react-renderer` instance as the `PrettyCode` tool — no
+     * second highlighter is loaded.
+     */
+    language?: Language | string;
+    /** Label for the LHS file header. */
+    oldTitle?: string;
+    /** Label for the RHS file header. */
+    newTitle?: string;
+    /** Show the copy-to-clipboard button. @default `true` */
+    copyable?: boolean;
+    /** Number of context lines around each hunk when diffing strings. @default `3` */
+    context?: number;
+  };

package/src/tools/dev/code/DiffViewer/utils/computeDiff.ts

@@ -0,0 +1,159 @@
+// Adapted from jalcoui (MIT) — github.com/jal-co/ui
+//
+// Line-level diff via Longest Common Subsequence. The jalcoui original
+// uses the `diff` npm package (Myers diff + unified patches). We don't
+// pull that dependency: a 60-line LCS in TS handles up to ~5k lines
+// fast enough for the viewer's use case (small/medium code reviews) and
+// keeps the bundle lean. For pre-computed patches the caller can pass
+// `patch` and we parse the unified-diff text directly — no algorithm
+// runs at all.
+
+import type { DiffLine } from '../types';
+
+/**
+ * Compute line-level diff between two strings. Returns a flat sequence
+ * of `DiffLine`s in display order. `context` controls how many unchanged
+ * lines are emitted around each change-hunk; pass `Infinity` to keep the
+ * full file.
+ */
+export function diffLines(
+  oldCode: string,
+  newCode: string,
+  context = 3,
+): DiffLine[] {
+  const oldLines = oldCode.split('\n');
+  const newLines = newCode.split('\n');
+
+  // Build LCS table (rows = oldLines + 1, cols = newLines + 1).
+  // For each cell, store the length of the longest common subsequence
+  // of `oldLines[0..i]` and `newLines[0..j]`.
+  const m = oldLines.length;
+  const n = newLines.length;
+  // Use a single flat Int32Array for cache friendliness.
+  const lcs = new Int32Array((m + 1) * (n + 1));
+  const cols = n + 1;
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      const idx = i * cols + j;
+      if (oldLines[i - 1] === newLines[j - 1]) {
+        lcs[idx] = lcs[(i - 1) * cols + (j - 1)] + 1;
+      } else {
+        const up = lcs[(i - 1) * cols + j];
+        const left = lcs[i * cols + (j - 1)];
+        lcs[idx] = up >= left ? up : left;
+      }
+    }
+  }
+
+  // Walk back from (m, n) to (0, 0) emitting tagged lines.
+  type Tagged = { type: DiffLine['type']; oldNum: number | null; newNum: number | null; content: string };
+  const tagged: Tagged[] = [];
+  let i = m;
+  let j = n;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
+      tagged.push({ type: 'context', oldNum: i, newNum: j, content: oldLines[i - 1] });
+      i--;
+      j--;
+    } else if (j > 0 && (i === 0 || lcs[i * cols + (j - 1)] >= lcs[(i - 1) * cols + j])) {
+      tagged.push({ type: 'added', oldNum: null, newNum: j, content: newLines[j - 1] });
+      j--;
+    } else if (i > 0) {
+      tagged.push({ type: 'removed', oldNum: i, newNum: null, content: oldLines[i - 1] });
+      i--;
+    }
+  }
+  tagged.reverse();
+
+  // Apply context window — drop runs of `context`-only lines that are
+  // farther than `context` from any change. `Infinity` keeps every line.
+  if (!Number.isFinite(context)) {
+    return tagged.map((t) => ({
+      type: t.type,
+      content: t.content,
+      oldNumber: t.oldNum,
+      newNumber: t.newNum,
+    }));
+  }
+
+  // Mark indices that are within `context` of a change.
+  const keep = new Array<boolean>(tagged.length).fill(false);
+  for (let k = 0; k < tagged.length; k++) {
+    if (tagged[k].type !== 'context') {
+      const from = Math.max(0, k - context);
+      const to = Math.min(tagged.length - 1, k + context);
+      for (let s = from; s <= to; s++) keep[s] = true;
+    }
+  }
+
+  // Drop unkept context lines. We don't render hunk separators (`@@`) —
+  // the viewer is meant for compact diffs, not full-file patches.
+  const out: DiffLine[] = [];
+  for (let k = 0; k < tagged.length; k++) {
+    if (!keep[k]) continue;
+    out.push({
+      type: tagged[k].type,
+      content: tagged[k].content,
+      oldNumber: tagged[k].oldNum,
+      newNumber: tagged[k].newNum,
+    });
+  }
+  return out;
+}
+
+/**
+ * Parse a unified diff patch (`@@ -a,b +c,d @@` hunks) into the same
+ * `DiffLine[]` shape `diffLines()` produces. Only the line tags and
+ * numbers from the hunk headers are honored — file headers
+ * (`--- a/file`, `+++ b/file`) are skipped.
+ */
+export function parseUnifiedPatch(patch: string): DiffLine[] {
+  const lines: DiffLine[] = [];
+  const HUNK = /^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@/;
+  let oldNum = 0;
+  let newNum = 0;
+  let inHunk = false;
+
+  for (const raw of patch.split('\n')) {
+    const hunk = HUNK.exec(raw);
+    if (hunk) {
+      oldNum = parseInt(hunk[1], 10);
+      newNum = parseInt(hunk[2], 10);
+      inHunk = true;
+      continue;
+    }
+    if (!inHunk) continue;
+    if (raw.startsWith('--- ') || raw.startsWith('+++ ') || raw.startsWith('\\')) continue;
+
+    if (raw.startsWith('+')) {
+      lines.push({ type: 'added', content: raw.slice(1), oldNumber: null, newNumber: newNum++ });
+    } else if (raw.startsWith('-')) {
+      lines.push({ type: 'removed', content: raw.slice(1), oldNumber: oldNum++, newNumber: null });
+    } else {
+      const content = raw.startsWith(' ') ? raw.slice(1) : raw;
+      lines.push({ type: 'context', content, oldNumber: oldNum++, newNumber: newNum++ });
+    }
+  }
+  return lines;
+}
+
+/** Widest gutter required for the line numbers, in characters. */
+export function lineNumberWidth(lines: DiffLine[]): number {
+  let max = 0;
+  for (const line of lines) {
+    if (line.oldNumber && line.oldNumber > max) max = line.oldNumber;
+    if (line.newNumber && line.newNumber > max) max = line.newNumber;
+  }
+  return Math.max(String(max).length, 2);
+}
+
+/** Count `+` and `-` lines for the header stat pill. */
+export function computeStats(lines: DiffLine[]): { added: number; removed: number } {
+  let added = 0;
+  let removed = 0;
+  for (const line of lines) {
+    if (line.type === 'added') added++;
+    else if (line.type === 'removed') removed++;
+  }
+  return { added, removed };
+}

package/src/tools/dev/{MarkdownMessage → code/MarkdownMessage}/CollapseToggle.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { TOGGLE } from '../../chat/styles/bubbleTokens';
+import { TOGGLE } from '../../../chat/styles/bubbleTokens';
 
 interface CollapseToggleProps {
   isCollapsed: boolean;

package/src/tools/dev/{MarkdownMessage → code/MarkdownMessage}/MarkdownMessage.tsx

@@ -11,7 +11,7 @@ import remarkGfm from 'remark-gfm';
 import remarkSmartypants from 'remark-smartypants';
 import type { Components } from 'react-markdown';
 
-import { useCollapsibleContent } from '../../../hooks/useCollapsibleContent';
+import { useCollapsibleContent } from '../../../../hooks/useCollapsibleContent';
 import type { MarkdownMessageProps } from './types';
 import { buildSchema, buildUrlTransform } from './sanitize';
 import { looksLikePlainProse } from './plainText';

package/src/tools/dev/{MarkdownMessage → code/MarkdownMessage}/components.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Components } from 'react-markdown';
-import Mermaid from '../Mermaid';
-import { ANCHOR } from '../../chat/styles/bubbleTokens';
+import Mermaid from '../../Mermaid';
+import { ANCHOR } from '../../../chat/styles/bubbleTokens';
 import { CodeBlock, CodeBlockFallback } from './CodeBlock';
 import { extractTextFromChildren } from './plainText';
 

package/src/tools/dev/{PrettyCode → code/PrettyCode}/PrettyCode.client.tsx

@@ -4,8 +4,8 @@ import { Highlight, Language, themes } from 'prism-react-renderer';
 import React, { useMemo, useRef } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
-import { FloatingToolbar } from '../../../components/FloatingToolbar';
-import { CopyAction } from '../../../components/FloatingToolbar/actions';
+import { FloatingToolbar } from '../../../../common/FloatingToolbar';
+import { CopyAction } from '../../../../common/FloatingToolbar/actions';
 
 // Surface palette — fixed dark regardless of host theme. Code blocks
 // follow the IDE / GitHub / ChatGPT convention: syntax highlighting

package/src/tools/dev/{PrettyCode → code/PrettyCode}/lazy.tsx

@@ -10,7 +10,7 @@
  * import PrettyCode from '@djangocfg/ui-tools/pretty-code'
  */
 
-import { createLazyComponent } from '../../../components';
+import { createLazyComponent } from '../../../../common';
 import type { Language } from 'prism-react-renderer';
 
 // ============================================================================

package/src/tools/dev/ops/EnvTable/EnvTable.tsx

@@ -0,0 +1,228 @@
+// Adapted from jalcoui (MIT) — github.com/jal-co/ui
+//
+// Read-only environment variable table with masked values, click-to-reveal,
+// and per-row copy. Designed for settings pages, deploy previews, and docs.
+//
+// - Semantic tokens only (success / warning / info / destructive / muted).
+// - No motion library — Tailwind `transition-colors` for hover feedback.
+// - Requires <UiProviders> at the host root; mounts no providers itself.
+
+'use client';
+
+import * as React from 'react';
+import { Check, ClipboardList, Copy, Eye, EyeOff } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+import {
+  ENV_TONE_CLASSES,
+  getEnvTone,
+  type EnvTableProps,
+  type EnvVariable,
+} from './types';
+import { maskValue, useEnvMask } from './hooks/useEnvMask';
+
+interface RowProps {
+  variable: EnvVariable;
+  revealed: boolean;
+  copied: boolean;
+  onToggleReveal: () => void;
+  onCopy: () => void;
+}
+
+function EnvRow({ variable, revealed, copied, onToggleReveal, onCopy }: RowProps) {
+  const tone = getEnvTone(variable.environment);
+  const displayValue = revealed ? variable.value : maskValue(variable.value);
+
+  return (
+    <div
+      data-slot="env-row"
+      data-revealed={revealed}
+      className="group flex items-start gap-3 px-3 py-2.5 transition-colors hover:bg-accent sm:items-center sm:px-4"
+    >
+      <div className="flex min-w-0 flex-1 flex-col gap-1.5 sm:flex-row sm:items-center sm:gap-4">
+        {/* Key */}
+        <div className="flex shrink-0 items-center gap-2 sm:w-[220px]">
+          <span
+            className={cn(
+              'truncate font-mono text-xs font-semibold',
+              variable.required ? 'text-destructive' : 'text-foreground',
+            )}
+          >
+            {variable.key}
+            {variable.required && (
+              <span
+                aria-label="required"
+                className="ml-0.5 text-destructive"
+                title="Required"
+              >
+                *
+              </span>
+            )}
+          </span>
+          {variable.environment && (
+            <span
+              className={cn(
+                'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium leading-none',
+                ENV_TONE_CLASSES[tone],
+              )}
+            >
+              {variable.environment}
+            </span>
+          )}
+        </div>
+
+        {/* Value */}
+        <div className="min-w-0 flex-1">
+          <span
+            className={cn(
+              'break-all font-mono text-xs',
+              revealed ? 'text-foreground' : 'text-muted-foreground',
+            )}
+          >
+            {displayValue}
+          </span>
+          {variable.description && (
+            <p className="mt-0.5 text-[11px] text-muted-foreground">
+              {variable.description}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex shrink-0 items-center gap-0.5">
+        <button
+          type="button"
+          onClick={onToggleReveal}
+          aria-label={`${revealed ? 'Hide' : 'Reveal'} ${variable.key}`}
+          aria-pressed={revealed}
+          className="inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {revealed ? (
+            <EyeOff className="size-3.5" />
+          ) : (
+            <Eye className="size-3.5" />
+          )}
+        </button>
+        <button
+          type="button"
+          onClick={onCopy}
+          aria-label={`Copy ${variable.key} value`}
+          className="inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {copied ? (
+            <Check className="size-3.5 text-success" />
+          ) : (
+            <Copy className="size-3.5" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function EnvTable({
+  variables,
+  title,
+  defaultRevealed = false,
+  emptyLabel = 'No environment variables.',
+  className,
+  ...props
+}: EnvTableProps) {
+  const {
+    revealed,
+    allRevealed,
+    toggleIndex,
+    toggleAll,
+    copiedTarget,
+    copyValue,
+    copyAllAsEnv,
+  } = useEnvMask({ variables, defaultRevealed });
+
+  if (variables.length === 0) {
+    return (
+      <div
+        data-slot="env-table"
+        data-empty="true"
+        className={cn(
+          'flex items-center justify-center rounded-xl border border-border/60 bg-card py-10 text-sm text-muted-foreground shadow-sm',
+          className,
+        )}
+        {...props}
+      >
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  const copiedAll = copiedTarget === 'all';
+
+  return (
+    <div
+      data-slot="env-table"
+      className={cn(
+        'overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm',
+        className,
+      )}
+      {...props}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-border/40 px-3 py-2.5 sm:px-4">
+        <div className="flex items-center gap-2">
+          {title && (
+            <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+          )}
+          <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+            {variables.length}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={toggleAll}
+            aria-label={allRevealed ? 'Hide all values' : 'Reveal all values'}
+            aria-pressed={allRevealed}
+            className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {allRevealed ? (
+              <EyeOff className="size-3.5" />
+            ) : (
+              <Eye className="size-3.5" />
+            )}
+            <span className="hidden sm:inline">
+              {allRevealed ? 'Hide all' : 'Reveal all'}
+            </span>
+          </button>
+          <button
+            type="button"
+            onClick={copyAllAsEnv}
+            aria-label="Copy all as .env"
+            className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {copiedAll ? (
+              <Check className="size-3.5 text-success" />
+            ) : (
+              <ClipboardList className="size-3.5" />
+            )}
+            <span className="hidden sm:inline">
+              {copiedAll ? 'Copied!' : 'Copy .env'}
+            </span>
+          </button>
+        </div>
+      </div>
+
+      {/* Rows */}
+      <div className="divide-y divide-border/40">
+        {variables.map((variable, i) => (
+          <EnvRow
+            key={`${variable.key}-${i}`}
+            variable={variable}
+            revealed={revealed.has(i)}
+            copied={copiedTarget === i}
+            onToggleReveal={() => toggleIndex(i)}
+            onCopy={() => copyValue(i, variable.value)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/tools/dev/ops/EnvTable/README.md

@@ -0,0 +1,29 @@
+# EnvTable
+
+Environment-variable table with mask / reveal + copy. Per-row environment badge tinted via semantic tokens (`success` / `warning` / `info` / `muted`).
+
+```tsx
+import { EnvTable } from '@djangocfg/ui-tools/env-table';
+
+<EnvTable
+  variables={[
+    { key: 'DATABASE_URL', value: 'postgres://…', environment: 'production', required: true },
+    { key: 'DEBUG', value: 'false', environment: 'development' },
+  ]}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variables` | `EnvVariable[]` | — | Rows: `{ key, value, environment?, description?, required? }`. |
+| `title` | `string` | — | Heading above the table. |
+| `defaultRevealed` | `boolean` | `false` | Start with all values visible. |
+| `emptyLabel` | `string` | `'No environment variables.'` | Empty state. |
+
+Storybook: `apps/storybook/stories/ui-tools/dev/EnvTable.stories.tsx`
+
+---
+
+Adapted from jalcoui (MIT).