@djangocfg/widget-code 0.1.18 → 0.1.21

package/src/pretty-code/PrettyCode.client.tsx

@@ -1,402 +0,0 @@
-'use client';
-
-import { Highlight, Language, themes } from 'prism-react-renderer';
-import React, { useMemo, useRef } from 'react';
-
-import { useAppT } from '@djangocfg/i18n';
-import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
-import { CodePanelHeader } from '../panel-header';
-
-// Surface palette — driven by the ui-core `--code*` semantic tokens so the
-// code panel matches the rest of the theme system (neutral, preset-aware)
-// instead of a hard-coded GitHub blue. The tokens are already tuned per
-// theme (`light.css` / `dark.css`): a near-white gray in light, a near-black
-// gray in dark — so the surface stays a calm neutral in either mode and never
-// reads blue. Syntax colors still come from Prism's vsDark/github palettes.
-const CODE_SURFACE_BG = 'var(--code)';
-const CODE_INLINE_BG = 'var(--code-inline)';
-
-// Corner radius comes from the ui-core token scale, never a hard-coded
-// Tailwind step: `--radius-popover` is the container tier (the same one
-// nav popovers and menu surfaces use), so the panel re-rounds with the
-// active preset (`dense`, `windows`, …) instead of pinning 0.5rem forever.
-const CODE_SURFACE_RADIUS = 'var(--radius-popover)';
-
-// The panel is BORDERLESS: `--code` already separates it from the page in both
-// themes (96% on a 98% light page, 9% on a 14.5% dark one), so a border only
-// added a second boundary around a shape the fill had already drawn — most
-// visible when the panel nests inside another card, where the two frames
-// competed. Contrast does the separating; `--code-border` stays defined in the
-// theme for hosts that genuinely need an outline.
-
-// Load extra Prism grammars (``bash``, ``ruby``, ``java``, ``php``)
-// that aren't in ``prism-react-renderer``'s default bundle. The hook
-// below subscribes to its ready state and re-renders this component
-// once loading completes, so the first tab click gets highlighted
-// correctly even if it happened before the dynamic import resolved.
-import { useEnsurePrismLanguages } from './registerPrismLanguages';
-
-interface PrettyCodeProps {
-  data: string | object;
-  language: Language;
-  className?: string;
-  /**
-   * Force a specific Prism palette + surface. **Defaults to the resolved
-   * host theme** (light → light surface + GitHub palette, dark → dark
-   * surface + vsDark palette), so the panel matches the rest of the UI and
-   * its `--code*` tokens. Pass `mode` explicitly only to pin a palette
-   * regardless of theme — e.g. printing a PDF on a light page.
-   */
-  mode?: 'dark' | 'light';
-  inline?: boolean;
-  customBg?: string; // Custom background class
-  isCompact?: boolean; // Compact mode for smaller font sizes
-  /** @deprecated No-op since the toolbar moved into a persistent
-   *  `CodePanelHeader` (no scroll-capturing overlay). Kept for API
-   *  back-compat; will be removed in a future major. */
-  scrollIsolation?: boolean;
-  /**
-   * Line count at which the viewer starts to scroll instead of growing.
-   * ``undefined`` (default) = always grows to fit content, no scroll.
-   * Set e.g. ``50`` to cap short snippets inline and scroll long ones.
-   */
-  maxLines?: number;
-  /**
-   * When set, an expand (⤢) button appears in the header — but ONLY while
-   * the content is actually height-capped (i.e. exceeds `maxLines`). Lets a
-   * host open the full code full-screen. No-op when the code fits.
-   */
-  onExpand?: () => void;
-  /**
-   * Visual variant. ``"card"`` (default) ships full chrome (border,
-   * background, hover toolbar, optional internal scroll). ``"plain"``
-   * is chrome-less — use when embedding inside another scroll
-   * container so the surface manages its own chrome and scroll. */
-  variant?: 'card' | 'plain';
-}
-
-const PrettyCode = ({ data, language, className, mode, inline = false, customBg, isCompact = false, maxLines, onExpand, variant = 'card' }: PrettyCodeProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const t = useAppT();
-
-  // Default to the host theme so the surface (`--code*` tokens) and the Prism
-  // palette move together; an explicit `mode` prop still pins a palette.
-  const resolvedTheme = useResolvedTheme();
-  const effectiveMode = mode ?? (resolvedTheme === 'light' ? 'light' : 'dark');
-
-  // Subscribe to the extra-grammars ready state. When ``bash`` /
-  // ``ruby`` / ``java`` / ``php`` finish loading, this hook triggers a
-  // re-render so the code block picks up the new grammar.
-  useEnsurePrismLanguages();
-
-  const labels = useMemo(() => ({
-    copyCode: t('tools.code.copyCode'),
-    noContent: t('tools.code.noContent'),
-  }), [t]);
-
-  // Font size based on compact mode
-  const fontSize = isCompact ? '0.75rem' : '0.875rem'; // 12px vs 14px
-
-  const isDarkMode = effectiveMode !== 'light';
-  const prismTheme = isDarkMode ? themes.vsDark : themes.github;
-  // The surface now reads the `--code*` tokens in BOTH modes — they already
-  // carry the right neutral per theme, so the panel matches the UI and never
-  // reads blue. (Previously light mode fell back to `bg-card` and dark mode
-  // hard-coded GitHub's #0d1117.)
-  const surfaceStyle = { backgroundColor: CODE_SURFACE_BG, borderRadius: CODE_SURFACE_RADIUS };
-  const inlineSurfaceStyle = { backgroundColor: CODE_INLINE_BG };
-
-  // Convert form object to JSON string with proper formatting
-  const contentJson = typeof data === 'string' ? data : JSON.stringify(data || {}, null, 2);
-
-  // Enable scroll only when content exceeds maxLines. Otherwise the block
-  // grows to fit — short snippets feel natural, long ones get a cap.
-  const lineCount = contentJson ? contentJson.split('\n').length : 0;
-  const lineHeightRatio = isCompact ? 1.4 : 1.5;
-  const fontSizePx = isCompact ? 12 : 14;
-  // Vertical padding of the <pre> (top + bottom, in px) — keep in sync
-  // with the padding string below.
-  const verticalPadPx = 16 + 12; // 1rem top + 0.75rem bottom (≈)
-  const shouldScroll = maxLines !== undefined && lineCount > maxLines;
-  const maxHeightPx = maxLines !== undefined
-    ? maxLines * fontSizePx * lineHeightRatio + verticalPadPx
-    : undefined;
-  
-  // Handle empty content
-  if (!contentJson || contentJson.trim() === '') {
-    const emptyBgClass = customBg || '';
-    return (
-      <div
-        // Same borderless token-rounded surface as the populated panel — the
-        // empty state used `rounded-sm`, so a panel visibly changed shape as
-        // soon as content arrived.
-        className={`relative h-full rounded-[var(--radius-popover)] ${emptyBgClass} ${className || ''}`}
-        style={customBg ? undefined : surfaceStyle}
-      >
-        <div className="h-full overflow-auto p-4">
-          <p
-            className="text-sm italic text-muted-foreground"
-            role="status"
-          >
-            {labels.noContent}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  // Get display name for language badge
-  const getLanguageDisplayName = (lang: string): string => {
-    switch (lang.toLowerCase()) {
-      case 'bash':
-      case 'shell':
-        return 'Bash';
-      case 'python':
-      case 'py':
-        return 'Python';
-      case 'javascript':
-      case 'js':
-        return 'JavaScript';
-      case 'typescript':
-      case 'ts':
-        return 'TypeScript';
-      case 'json':
-        return 'JSON';
-      case 'yaml':
-      case 'yml':
-        return 'YAML';
-      case 'html':
-        return 'HTML';
-      case 'css':
-        return 'CSS';
-      case 'sql':
-        return 'SQL';
-      case 'xml':
-        return 'XML';
-      case 'markdown':
-      case 'md':
-        return 'Markdown';
-      case 'plaintext':
-      case 'text':
-        return 'Text';
-      case 'mermaid':
-        return 'Mermaid';
-      case 'ruby':
-      case 'rb':
-        return 'Ruby';
-      case 'java':
-        return 'Java';
-      case 'php':
-        return 'PHP';
-      case 'go':
-      case 'golang':
-        return 'Go';
-      default:
-        return lang.charAt(0).toUpperCase() + lang.slice(1);
-    }
-  };
-
-  // Normalize language for Prism - use only basic supported languages
-  const normalizedLanguage = (() => {
-    const lang = language.toLowerCase();
-    
-    // Try basic languages that are definitely supported
-    switch (lang) {
-      case 'javascript':
-      case 'js':
-        return 'javascript';
-      case 'typescript':
-      case 'ts':
-        return 'typescript'; // Try TypeScript first
-      case 'python':
-      case 'py':
-        return 'python';
-      case 'json':
-        return 'json';
-      case 'css':
-        return 'css';
-      case 'html':
-        return 'markup';
-      case 'xml':
-        return 'markup';
-      case 'bash':
-      case 'shell':
-      case 'sh':
-        return 'bash';
-      case 'ruby':
-      case 'rb':
-        return 'ruby';
-      case 'java':
-        return 'java';
-      case 'php':
-        return 'php';
-      case 'go':
-      case 'golang':
-        return 'go';
-      case 'sql':
-        return 'sql';
-      case 'yaml':
-      case 'yml':
-        return 'yaml';
-      case 'markdown':
-      case 'md':
-        return 'markdown';
-      case 'mermaid':
-        return 'text'; // Mermaid is handled separately in MarkdownMessage
-      default:
-        // For unknown languages, try to use the original name first
-        // If it doesn't work, Prism will fallback to plain text
-        return lang || 'text';
-    }
-  })();
-
-  const displayLanguage = getLanguageDisplayName(language);
-
-  // Plain variant — chrome-less render for embedding inside other
-  // scroll containers. No border, no background, no hover toolbar, no
-  // internal scroll. The caller's ScrollArea/panel owns the chrome
-  // and scroll responsibilities.
-  if (variant === 'plain') {
-    return (
-      <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
-        {({ className: prismClassName, style, tokens, getLineProps, getTokenProps }) => {
-          const { backgroundColor: _bg, ...restStyle } = style;
-          return (
-            <pre
-              className={`${prismClassName} ${className || ''}`}
-              style={{
-                ...restStyle,
-                background: 'transparent',
-                margin: 0,
-                padding: isCompact ? '0.75rem 1rem' : '1rem',
-                fontSize,
-                lineHeight: lineHeightRatio,
-                fontFamily: 'monospace',
-                // ``break-all`` (not ``break-word``) so long unbroken
-                // strings without whitespace — typical of escaped
-                // JSON bodies in generated code samples — wrap at any
-                // character rather than overflowing the container.
-                whiteSpace: 'pre-wrap',
-                wordBreak: 'break-all',
-                overflowWrap: 'anywhere',
-                // Hard cap on width — parents (grid cells, panels)
-                // should constrain us but some callers render inside
-                // ``flex: 1 1 auto`` which lets the pre grow past
-                // intended bounds. ``max-width: 100%`` pins to parent.
-                maxWidth: '100%',
-              }}
-            >
-              {tokens.map((line, i) => (
-                <div key={i} {...getLineProps({ line })}>
-                  {line.map((token, key) => (
-                    <span key={key} {...getTokenProps({ token })} />
-                  ))}
-                </div>
-              ))}
-            </pre>
-          );
-        }}
-      </Highlight>
-    );
-  }
-
-  if (inline) {
-    // Inline chip surface also comes from `--code-inline` via inlineSurfaceStyle.
-    const inlineBgClass = customBg || '';
-    return (
-      <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
-        {({ className: prismClassName, style, tokens, getTokenProps }) => (
-          <code
-            // `--radius-sm`, not the panel's container radius: an inline chip
-            // sits inside a line of prose, so it rounds like a small control
-            // rather than like a card.
-            className={`${prismClassName} ${inlineBgClass} px-2 py-1 rounded-[var(--radius-sm)] ${isCompact ? 'text-xs' : 'text-sm'} font-mono inline-block ${className || ''}`}
-            style={{
-              ...style,
-              ...(customBg ? undefined : inlineSurfaceStyle),
-              fontSize,
-              fontFamily: 'monospace',
-            }}
-          >
-            {tokens.map((line, i) =>
-              line.map((token, key) => (
-                <span key={`${i}-${key}`} {...getTokenProps({ token })} />
-              )),
-            )}
-          </code>
-        )}
-      </Highlight>
-    );
-  }
-
-  // Surface comes from the `--code*` tokens via `surfaceStyle` (both modes),
-  // unless the host pins its own `customBg` class.
-  const bgClass = customBg || '';
-
-  return (
-    <div
-      ref={containerRef}
-      // Radius lives in the CLASS, not in `surfaceStyle`: a host passing
-      // `customBg` drops the inline style entirely (see below), and the panel
-      // must stay rounded either way. Borderless by design — see the note on
-      // CODE_SURFACE_RADIUS.
-      className={`group relative overflow-hidden rounded-[var(--radius-popover)] ${bgClass} ${className || ''}`}
-      style={customBg ? undefined : surfaceStyle}
-    >
-      {/* Persistent header bar (GitHub / ChatGPT style): language label
-          left, copy button right, in flow — never floats over the code. */}
-      <CodePanelHeader
-        language={displayLanguage}
-        copyValue={contentJson}
-        copyLabel={labels.copyCode}
-        dark={isDarkMode}
-        // Expand only matters when the code is actually height-capped.
-        onExpand={onExpand && shouldScroll ? onExpand : undefined}
-      />
-
-      <div
-        className={shouldScroll ? 'h-full overflow-auto' : ''}
-        style={shouldScroll ? { maxHeight: maxHeightPx } : undefined}
-        // When the viewer scrolls internally, make it keyboard-reachable
-        // so users without a wheel/trackpad can scroll with arrow keys.
-        {...(shouldScroll
-          ? { tabIndex: 0, role: 'region', 'aria-label': displayLanguage }
-          : {})}
-      >
-        <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
-          {({ className: prismClassName, style, tokens, getLineProps, getTokenProps }) => {
-            // Remove background from Prism theme - we use our own via CSS
-            const { backgroundColor: _bg, ...restStyle } = style;
-            return (
-            <pre
-              className={prismClassName}
-              style={{
-                ...restStyle,
-                margin: 0,
-                // The header now occupies the top; the code body just needs
-                // even padding (no extra top room for an overlay anymore).
-                padding: '0.875rem 1rem',
-                fontSize,
-                lineHeight: lineHeightRatio,
-                fontFamily: 'monospace',
-                whiteSpace: 'pre-wrap',
-                wordBreak: 'break-word',
-                overflowWrap: 'break-word',
-              }}
-            >
-              {tokens.map((line, i) => (
-                <div key={i} {...getLineProps({ line })}>
-                  {line.map((token, key) => (
-                    <span key={key} {...getTokenProps({ token })} />
-                  ))}
-                </div>
-              ))}
-            </pre>
-          )}}
-        </Highlight>
-      </div>
-    </div>
-  );
-};
-
-export default PrettyCode; 

package/src/pretty-code/README.md

@@ -1,81 +0,0 @@
-# PrettyCode
-
-Syntax-highlighted code block. Prism-powered, dark-by-default surface.
-
-## Why dark by default
-
-PrettyCode renders on a fixed dark surface (`#0d1117` + `vsDark` palette)
-regardless of the host theme — the same convention as GitHub, VSCode,
-ChatGPT, Slack. Syntax highlighting ships its own contrast model
-(keyword / string / number / comment) that flattens to low-contrast
-pastels when forced onto a light UI surface.
-
-The surface is intentionally **not** a semantic token. Semantic tokens
-(`--primary`, `--accent`, `--card`) describe UI affordances; code
-display is data, not UI.
-
-## Structure
-
-```
-PrettyCode/
-├── PrettyCode.client.tsx       # Main component (Highlight + dark surface)
-├── registerPrismLanguages.ts   # Lazy-load extra grammars (bash, ruby, java, php)
-├── index.tsx                   # Public re-export
-└── lazy.tsx                    # Lazy-loaded export
-```
-
-## Usage
-
-```tsx
-import { PrettyCode } from '@djangocfg/widget-code/pretty-code';
-
-<PrettyCode data={sourceCode} language="typescript" />
-
-// Inline snippet (used in markdown rendering)
-<PrettyCode data={`const x = 1`} language="ts" inline />
-
-// Capped at 50 visible lines, scrolls if longer
-<PrettyCode data={longBlob} language="json" maxLines={50} />
-
-// Chrome-less variant — embed inside another scroll container
-<PrettyCode data={src} language="bash" variant="plain" />
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `data` | `string \| object` | — | Code string. Objects are `JSON.stringify`d. |
-| `language` | `Language` | — | Prism language id. Unknown → plain text. |
-| `mode` | `'dark' \| 'light'` | `'dark'` | Palette override. Default is always dark (see "Why dark"). |
-| `inline` | `boolean` | `false` | Render as inline `<code>` (no card / toolbar). |
-| `variant` | `'card' \| 'plain'` | `'card'` | `plain` strips border, background, and toolbar. |
-| `isCompact` | `boolean` | `false` | 12px font instead of 14px. |
-| `maxLines` | `number` | `undefined` | When set, block scrolls past this many lines. |
-| `customBg` | `string` | — | Tailwind class to override the dark surface. |
-| `scrollIsolation` | `boolean` | `true` | Block scroll capture until clicked (long snippets). |
-| `className` | `string` | — | Extra classes on the wrapper. |
-
-## When to override `mode`
-
-Almost never. The dark default is correct for ~all cases. Pass
-`mode="light"` only for deliberate light-on-light renders (e.g. PDF
-export targeting a printed page). The surface falls back to
-`bg-card` semantic token in that mode.
-
-## Supported languages
-
-Out of the box: `javascript`, `typescript`, `python`, `json`, `css`,
-`markup` (html/xml), `sql`, `yaml`, `markdown`, `go`.
-
-Lazy-loaded on first use: `bash`/`shell`, `ruby`, `java`, `php`.
-Lazy load is tracked through `useEnsurePrismLanguages()` — the
-component re-renders once the grammar resolves.
-
-Unknown languages fall back to plain text (no highlighting, no error).
-
-## Storybook
-
-`UI Tools / Code / PrettyCode` — `Playground`, `TypeScript`, `Json`,
-`Python`, `Bash`, `Sql`, `Yaml`, `LongFileWithScroll`, `Inline`,
-`Compact`, `LightMode`, `PlainVariant`.

package/src/pretty-code/index.tsx

@@ -1,72 +0,0 @@
-/**
- * PrettyCode Component - Dynamic Import Wrapper
- *
- * Lazy loads the heavy Prism library (~500KB) only when needed.
- * This significantly reduces the initial bundle size.
- */
-
-'use client';
-
-import React, { lazy, Suspense } from 'react';
-import type { Language } from 'prism-react-renderer';
-
-import { LoadingFallback } from '@djangocfg/widget-kit/lazy';
-
-// Lazy load the client component
-const PrettyCodeClient = lazy(() => import('./PrettyCode.client'));
-
-// Shared compact placeholder (16px muted spinner), inside the code-surface
-// border so nothing shifts when PrettyCode mounts. Same look as LazyPrettyCode
-// (lazy.tsx) and the JSON viewer.
-const CodeFallback = () => (
-  <LoadingFallback
-    minHeight={64}
-    text="Loading code…"
-    className="rounded-sm border border-border bg-muted dark:bg-code"
-  />
-);
-
-export interface PrettyCodeProps {
-  data: string | object;
-  language: Language;
-  className?: string;
-  mode?: 'dark' | 'light';
-  inline?: boolean;
-  customBg?: string;
-  isCompact?: boolean;
-  /** Block scroll capture until user clicks (default: true) */
-  scrollIsolation?: boolean;
-  /**
-   * Line count above which the block starts scrolling instead of growing.
-   * ``undefined`` (default) = no cap, block grows to fit. Set e.g. ``50``
-   * to inline short snippets and cap long ones.
-   */
-  maxLines?: number;
-  /** When set, a header expand (⤢) button appears while the code is
-   *  height-capped (exceeds `maxLines`). Lets a host open it full-screen. */
-  onExpand?: () => void;
-  /**
-   * Visual variant:
-   *   - ``"card"`` (default) — full chrome: border, background, hover
-   *     toolbar (Copy + language tag), optional internal scroll. Suits
-   *     a standalone code block in documentation prose where the block
-   *     is its own surface.
-   *   - ``"plain"`` — chrome-less: no border, no background, no toolbar,
-   *     no internal scroll. Grows to fit its content. Use when
-   *     embedding inside another scroll container (e.g. the Response
-   *     panel) — avoids double-scroll surfaces and lets the parent
-   *     manage copy/language affordances.
-   */
-  variant?: 'card' | 'plain';
-}
-
-const PrettyCode: React.FC<PrettyCodeProps> = (props) => {
-  return (
-    <Suspense fallback={<CodeFallback />}>
-      <PrettyCodeClient {...props} />
-    </Suspense>
-  );
-};
-
-export default PrettyCode;
-export type { Language };

package/src/pretty-code/lazy.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-/**
- * Lazy-loaded PrettyCode Component
- *
- * Heavy Prism library (~500KB) is loaded only when component is rendered.
- * Use this for automatic code-splitting with Suspense fallback.
- *
- * For direct imports without lazy loading, use:
- * import PrettyCode from '@djangocfg/widget-code/pretty-code'
- */
-
-import { createLazyComponent, LoadingFallback } from '@djangocfg/widget-kit/lazy';
-import type { Language } from 'prism-react-renderer';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export interface PrettyCodeProps {
-  data: string | object;
-  language: Language;
-  className?: string;
-  mode?: 'dark' | 'light';
-  inline?: boolean;
-  customBg?: string;
-  isCompact?: boolean;
-  scrollIsolation?: boolean;
-  maxLines?: number;
-  /** Header expand (⤢) callback, shown while the code is height-capped. */
-  onExpand?: () => void;
-  /** ``'card'`` (default) ships the full chrome. ``'plain'`` is
-   *  chrome-less — for embedding inside another scroll container. */
-  variant?: 'card' | 'plain';
-}
-
-export type { Language };
-
-// ============================================================================
-// Lazy Component
-// ============================================================================
-
-/**
- * LazyPrettyCode - Lazy-loaded code syntax highlighter
- *
- * Automatically shows loading state while Prism loads (~500KB). Uses the shared
- * compact `LoadingFallback` (16px muted spinner) so the code viewer and the JSON
- * viewer show the SAME quiet placeholder while their chunks load — kept inside a
- * subtle code-surface border so nothing shifts when PrettyCode mounts.
- */
-export const LazyPrettyCode = createLazyComponent<PrettyCodeProps>(
-  () => import('./PrettyCode.client'),
-  {
-    displayName: 'LazyPrettyCode',
-    fallback: (
-      <LoadingFallback
-        minHeight={64}
-        text="Loading code…"
-        className="rounded-sm border border-border bg-muted dark:bg-code"
-      />
-    ),
-  }
-);
-
-// `PrettyCode` is the historical named export — same component as
-// `LazyPrettyCode`, kept for backwards compatibility with callers that
-// imported it from the old root barrel.
-export { LazyPrettyCode as PrettyCode };
-export { default } from './index';