@djangocfg/widget-code 0.1.18 → 0.1.21

package/README.md

@@ -13,7 +13,6 @@ pnpm add @djangocfg/widget-code @djangocfg/ui-core @djangocfg/i18n
 |---|---|---|
 | `./editor` | Monaco, single file or diff | ~550 KB, lazy |
 | `./json-editor` | an editable JSON tree | `json-edit-react` |
-| `./pretty-code` | a read-only listing with a panel header | Prism |
 | `./diff-viewer` | unified or split diff, virtualised | Prism + virtuoso |
 | `./diff-viewer/full` | the same, eagerly | |
 | `./markdown-message` | markdown with embedded code, diagrams and chips | |
@@ -26,10 +25,11 @@ subpaths. The root exports the role tokens and nothing else, on purpose.
 
 ## Read-only code elsewhere
 
-`@djangocfg/widget-media/code` renders a listing with **shiki**, and a console
-should pick one highlighter rather than match two themes by hand. Prefer it for
-a new surface; this package's Prism stack stays because `DiffViewer` and
-`MarkdownMessage` are built on it.
+`PrettyCode` (a read-only listing with a panel header, Prism) lives in
+`@djangocfg/widget-kit/pretty-code`, with `/pretty-code/lazy` for the deferred
+form; `DiffViewer` and `MarkdownMessage` here use it from there, and so does the
+chat's `Response`. `@djangocfg/widget-media/code` is a second, shiki listing with
+no consumer in this repo.
 
 ## Verify
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@djangocfg/widget-code",
-  "version": "0.1.18",
-  "description": "Code surfaces: a Monaco editor, a diff viewer, a Prism listing, a JSON editor and the markdown renderer that embeds them",
+  "version": "0.1.21",
+  "description": "Code surfaces: a Monaco editor, a diff viewer, a JSON editor and the markdown renderer that embeds them",
   "keywords": [
     "code-editor",
     "monaco",
@@ -38,10 +38,6 @@
       "types": "./src/json-editor/lazy.tsx",
       "default": "./src/json-editor/lazy.tsx"
     },
-    "./pretty-code": {
-      "types": "./src/pretty-code/lazy.tsx",
-      "default": "./src/pretty-code/lazy.tsx"
-    },
     "./diff-viewer": {
       "types": "./src/diff-viewer/lazy.tsx",
       "default": "./src/diff-viewer/lazy.tsx"
@@ -74,14 +70,13 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@djangocfg/widget-data": "^0.1.18",
-    "@djangocfg/widget-diagram": "^0.1.13",
-    "@djangocfg/widget-editor": "^0.1.71",
-    "@djangocfg/widget-kit": "^0.1.19",
+    "@djangocfg/widget-data": "^0.1.30",
+    "@djangocfg/widget-diagram": "^0.1.25",
+    "@djangocfg/widget-editor": "^0.1.104",
+    "@djangocfg/widget-kit": "^0.1.22",
     "json-edit-react": "^2.0.5",
     "monaco-editor": "^0.57.0",
     "prism-react-renderer": "^2.4.1",
-    "prismjs": "^1.30.0",
     "react-markdown": "10.1.0",
     "react-virtuoso": "^4.18.20",
     "rehype-external-links": "^3.0.0",
@@ -93,16 +88,16 @@
     "remark-smartypants": "^3.0.3"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.613",
-    "@djangocfg/ui-core": "^2.1.613",
+    "@djangocfg/i18n": "^2.1.646",
+    "@djangocfg/ui-core": "^2.1.646",
     "lucide-react": "^1.68.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.613",
-    "@djangocfg/typescript-config": "^2.1.613",
-    "@djangocfg/ui-core": "^2.1.613",
+    "@djangocfg/i18n": "^2.1.646",
+    "@djangocfg/typescript-config": "^2.1.646",
+    "@djangocfg/ui-core": "^2.1.646",
     "@storybook/react-vite": "^10.6.5",
     "@types/node": "^25.9.5",
     "@types/react": "19.3.0",

package/src/diff-viewer/hooks/useHighlighter.ts

@@ -1,54 +1,18 @@
 // Adapted from jalcoui (MIT) — github.com/jal-co/ui
 //
-// Shared tokenizer for DiffViewer. Reuses the same `prism-react-renderer`
-// bundle that `PrettyCode` ships — no second highlighter is loaded. We
-// also re-import `PrettyCode`'s grammar-registration hook so `bash`,
-// `ruby`, `java`, `php` work in diffs without duplicating the dynamic
-// imports.
+// The language answer for DiffViewer. The tokenizer and the grammar loader are
+// the kit's `PrettyCode` ones, so a diff and a code block agree on which
+// languages exist and what a fence name means — no second table here.
 
 import { useMemo } from 'react';
 import type { Language } from 'prism-react-renderer';
-import { useEnsurePrismLanguages } from '../../pretty-code/registerPrismLanguages';
+import { normalizePrismLanguage, useEnsurePrismLanguages } from '@djangocfg/widget-kit/pretty-code';
 
 /**
- * Normalize a free-form language string into a Prism language key. Falls
- * back to `text` when the key isn't one Prism knows about.
- */
-export function normalizeLanguage(language: string | undefined): Language {
-  if (!language) return 'text' as Language;
-  const lang = language.toLowerCase();
-  switch (lang) {
-    case 'js':
-      return 'javascript' as Language;
-    case 'ts':
-      return 'typescript' as Language;
-    case 'py':
-      return 'python' as Language;
-    case 'rb':
-      return 'ruby' as Language;
-    case 'sh':
-    case 'shell':
-      return 'bash' as Language;
-    case 'html':
-    case 'xml':
-      return 'markup' as Language;
-    case 'md':
-      return 'markdown' as Language;
-    case 'yml':
-      return 'yaml' as Language;
-    case 'golang':
-      return 'go' as Language;
-    default:
-      return lang as Language;
-  }
-}
-
-/**
- * Subscribe to PrettyCode's extra-grammar loader and return the resolved
- * Prism language key. The component re-renders once `bash`/`ruby`/… are
- * registered so the first paint isn't stuck on plain text.
+ * The resolved Prism language key. The component re-renders once
+ * `bash`/`ruby`/… are registered so the first paint isn't stuck on plain text.
  */
 export function useDiffLanguage(language: string | undefined): Language {
   useEnsurePrismLanguages();
-  return useMemo(() => normalizeLanguage(language), [language]);
+  return useMemo(() => normalizePrismLanguage(language), [language]);
 }

package/src/diff-viewer/index.ts

@@ -9,7 +9,6 @@ export {
   lineNumberWidth as diffLineNumberWidth,
 } from './utils/computeDiff';
 export { useDiff } from './hooks/useDiff';
-export { normalizeLanguage as normalizeDiffLanguage } from './hooks/useHighlighter';
 
 export type {
   DiffLayout,

package/src/index.ts

@@ -1,10 +1,10 @@
 /**
- * Code surfaces: an editor, a diff, a highlighted listing, a JSON editor and
+ * Code surfaces: an editor, a diff, a JSON editor and
  * the markdown renderer that embeds them.
  *
  * No root barrel worth importing — Monaco alone is ~550 KB and `json-edit-react`
  * and Prism sit behind their own subpaths. Import the one you want:
- * `@djangocfg/widget-code/editor`, `/pretty-code`, `/diff-viewer`,
+ * `@djangocfg/widget-code/editor`, `/diff-viewer`,
  * `/json-editor`, `/markdown-message`.
  */
 export { ANCHOR, TOGGLE } from './role-tokens';

package/src/markdown-message/CodeBlock.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { CopyButton } from '@djangocfg/ui-core/components';
-import PrettyCode from '../pretty-code';
+import { LazyPrettyCode as PrettyCode } from '@djangocfg/widget-kit/pretty-code/lazy';
 
 interface CodeBlockProps {
   code: string;
@@ -15,8 +15,8 @@ interface CodeBlockProps {
 }
 
 /**
- * Markdown code block. Renders <PrettyCode> directly — its own
- * FloatingToolbar already carries the language tag and Copy action.
+ * Markdown code block. Renders the kit's <PrettyCode> directly — its header
+ * already carries the language tag and the Copy action.
  *
  * Earlier versions stacked an extra <CopyButton> here too, which
  * surfaced as two copy buttons on every code fence. The fallback
@@ -58,13 +58,6 @@ function CodeBlockRaw({ code, language, codeTheme = 'auto' }: CodeBlockProps) {
         // dark page hid it). The inline var()-based surface needs no content
         // scan, so it renders correctly in every consumer and both themes.
         isCompact
-        // Disable click-to-scroll-isolation in chat markdown: code
-        // fences here are part of an assistant reply, not a docs
-        // viewer. Forcing the user to click into a small block to
-        // scroll past it interrupts the reading flow. The standalone
-        // PrettyCode use cases (docs, diff viewers, long code panes)
-        // keep the default `true`.
-        scrollIsolation={false}
       />
     </div>
   );

package/src/panel-header/CodePanelHeader.tsx

@@ -1,121 +0,0 @@
-'use client';
-
-/**
- * CodePanelHeader — a slim, persistent header bar for the code panel
- * (PrettyCode), GitHub / ChatGPT style: the detected language on the left,
- * a copy button on the right. In flow (not an absolute hover overlay), so
- * the copy button never floats over the code.
- *
- * Code panels are usually DARK (like the map basemap is always light), so
- * the header defaults to FIXED on-dark colors — theme tokens
- * (`text-foreground`, `border-border`) would render dark-on-dark / an
- * over-bright divider on the dark panel. Pass `dark={false}` for a
- * light-surfaced panel, which switches to muted semantic tokens.
- */
-
-import { useCallback, useState, type ReactNode } from 'react';
-
-import { cn } from '@djangocfg/ui-core/lib';
-import { Check, Copy, Maximize2 } from 'lucide-react';
-
-export interface CodePanelHeaderProps {
-  /** Display label on the left (e.g. "typescript", "json", "bash"). */
-  language?: ReactNode;
-  /** Text copied when the copy button is pressed. Omit to hide copy. */
-  copyValue?: string;
-  /** a11y label for the copy button. */
-  copyLabel?: string;
-  /** When set, an expand (⤢) button is shown that calls this — used to open
-   *  the panel full-screen when it's height-capped. */
-  onExpand?: () => void;
-  /** a11y / tooltip label for the expand button. */
-  expandLabel?: string;
-  /** Extra trailing actions, rendered left of the copy button. */
-  actions?: ReactNode;
-  /** Dark panel (default). `false` → light-surface muted tokens. */
-  dark?: boolean;
-  className?: string;
-}
-
-export function CodePanelHeader({
-  language,
-  copyValue,
-  copyLabel = 'Copy',
-  onExpand,
-  expandLabel = 'Expand',
-  actions,
-  dark = true,
-  className,
-}: CodePanelHeaderProps) {
-  const [copied, setCopied] = useState(false);
-
-  const onCopy = useCallback(() => {
-    if (copyValue == null) return;
-    void navigator.clipboard?.writeText(copyValue).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1400);
-    });
-  }, [copyValue]);
-
-  // Fixed on-dark vs semantic light. The hairline is faint so it never
-  // reads as a heavy rule across the panel.
-  const dividerCls = dark ? 'border-white/[0.06]' : 'border-border/60';
-  const labelCls = dark ? 'text-white/40' : 'text-muted-foreground';
-  const btnCls = dark
-    ? 'text-white/45 hover:bg-white/10 hover:text-white/80 focus-visible:ring-white/40'
-    : 'text-muted-foreground hover:bg-foreground/10 hover:text-foreground focus-visible:ring-ring';
-
-  return (
-    <div
-      className={cn(
-        'flex items-center justify-between gap-2 border-b px-3 py-1',
-        dividerCls,
-        className,
-      )}
-    >
-      <span
-        className={cn(
-          'min-w-0 truncate font-mono text-[11px] lowercase tracking-wide',
-          labelCls,
-        )}
-      >
-        {language}
-      </span>
-
-      <div className="flex shrink-0 items-center gap-0.5">
-        {actions}
-        {onExpand ? (
-          <button
-            type="button"
-            onClick={onExpand}
-            aria-label={expandLabel}
-            title={expandLabel}
-            className={cn(
-              'inline-flex size-5 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-1',
-              btnCls,
-            )}
-          >
-            <Maximize2 className="size-3" aria-hidden />
-          </button>
-        ) : null}
-        {copyValue != null ? (
-          <button
-            type="button"
-            onClick={onCopy}
-            aria-label={copyLabel}
-            className={cn(
-              'inline-flex size-5 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-1',
-              btnCls,
-            )}
-          >
-            {copied ? (
-              <Check className="size-3" aria-hidden />
-            ) : (
-              <Copy className="size-3" aria-hidden />
-            )}
-          </button>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/src/panel-header/index.ts

@@ -1 +0,0 @@
-export { CodePanelHeader, type CodePanelHeaderProps } from './CodePanelHeader';