@djangocfg/widget-code 0.1.1

package/src/json-editor/lazy.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+/**
+ * `@djangocfg/widget-code/json-editor` subpath entrypoint.
+ *
+ * Heavy editor (~58 KB minified for `json-edit-react` alone). Lazy-load
+ * so consumers that only display JSON pay nothing — they should use
+ * `@djangocfg/widget-data/json-tree` instead, which is ~10× lighter.
+ */
+
+import { createLazyComponent, LoadingFallback } from '@djangocfg/widget-kit/lazy';
+import type { JsonEditorProps } from './JsonEditor';
+
+export type { JsonEditorProps } from './JsonEditor';
+
+export const LazyJsonEditor = createLazyComponent<JsonEditorProps>(
+  () => import('./JsonEditor').then((m) => ({ default: m.JsonEditor })),
+  {
+    displayName: 'LazyJsonEditor',
+    fallback: <LoadingFallback minHeight={120} text="Loading JSON editor…" />,
+  },
+);
+
+export { LazyJsonEditor as JsonEditor };

package/src/markdown-message/ActionRow.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React, { memo } from 'react';
+import { CopyButton } from '@djangocfg/ui-core/components';
+
+interface ActionRowProps {
+  /** Raw text to copy — pass the same source string used for render. */
+  value: string;
+  /** Bubble side. Just controls flex alignment; nothing is mirrored. */
+  isUser: boolean;
+  /**
+   * Whether the row is currently shown. Owner-controlled (typically
+   * `<ChatMessageRow>` toggles this on hover with a small close delay).
+   * The component is intentionally dumb about visibility — owners
+   * have full control over reveal logic (hover, focus, always-on,
+   * touch behaviour, etc.).
+   */
+  visible: boolean;
+}
+
+// Action row that lives directly under a chat bubble.
+// Visibility is fully owner-controlled via `visible`.
+//
+// We render at `opacity-0` (not `display:none`) so the fade in/out
+// stays smooth across re-renders. While invisible we drop pointer
+// events so a hidden row can't intercept clicks meant for the page
+// underneath.
+//
+// Memoised: re-renders only when `value`, `isUser` or `visible` change.
+// All props are primitives, so default shallow comparison is sufficient.
+function ActionRowRaw({ value, isUser, visible }: ActionRowProps) {
+  return (
+    <div
+      className={`flex ${isUser ? 'justify-end' : 'justify-start'}
+        transition-opacity duration-150
+        ${visible ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
+    >
+      <CopyButton
+        value={value}
+        size="icon"
+        variant="ghost"
+        iconClassName="h-3.5 w-3.5"
+        className="h-7 w-7 text-muted-foreground hover:text-foreground"
+        // Hidden rows must not be reachable via Tab — otherwise
+        // keyboard users land on an invisible button.
+        tabIndex={visible ? 0 : -1}
+        aria-hidden={!visible}
+      />
+    </div>
+  );
+}
+
+export const ActionRow = memo(ActionRowRaw);

package/src/markdown-message/ChatMessageRow.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useMediaQuery } from '@djangocfg/ui-core/hooks';
+
+interface ChatMessageRowProps {
+  /** Side of the conversation — drives flex alignment and `isUser`
+   *  passed to `actions`. */
+  isUser: boolean;
+  /** The bubble (your own JSX). Anything goes — `<MarkdownMessage>`,
+   *  custom card, multi-element composition. */
+  children: React.ReactNode;
+  /** Render-prop for the action row. Receives `visible` so the row
+   *  knows when to fade in/out. Render `null` to opt out. */
+  actions?: (visible: boolean, isUser: boolean) => React.ReactNode;
+  /** Close delay in ms after the cursor leaves the row. Long enough
+   *  to bridge cursor travel from bubble → action button without
+   *  flicker. Default 250ms (Radix Tooltip-ish). */
+  closeDelayMs?: number;
+  /** Optional class on the column container. */
+  className?: string;
+}
+
+// Owner of the bubble + action row layout.
+//
+// Why a state-based hover instead of `group-hover` CSS:
+//   - CSS-only hover bridges break when the cursor crosses gaps
+//     between the bubble and the (initially-invisible) row — the
+//     row's `pointer-events-none` lets the cursor "fall through",
+//     `group-hover` flips off, the row vanishes mid-travel.
+//   - State + a small close timeout gives Radix-Tooltip-style
+//     stability: enter shows immediately, leave waits N ms.
+//   - On touch (`@media (hover:none)`) hover doesn't exist; we
+//     always pass `visible={true}` so the affordance is reachable.
+//
+// The action row is rendered **absolutely** under the bubble so
+// hidden rows don't allocate vertical space — no dead-air gap
+// between consecutive messages.
+//
+// Memoised: re-renders only when `isUser`, `children`, `actions`,
+// `closeDelayMs` or `className` change. `actions` render-prop is
+// compared by reference — callers should stabilise it with useCallback.
+function ChatMessageRowRaw({
+  isUser,
+  children,
+  actions,
+  closeDelayMs = 250,
+  className = '',
+}: ChatMessageRowProps) {
+  const isTouch = useMediaQuery('(hover: none), (pointer: coarse)');
+  const [hovered, setHovered] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const cancelClose = useCallback(() => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+
+  const open = useCallback(() => {
+    cancelClose();
+    setHovered(true);
+  }, [cancelClose]);
+
+  const scheduleClose = useCallback(() => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setHovered(false), closeDelayMs);
+  }, [cancelClose, closeDelayMs]);
+
+  useEffect(() => () => cancelClose(), [cancelClose]);
+
+  // Touch: always-visible. Hover: state-driven.
+  const visible = isTouch || hovered;
+
+  // On touch, `static` positioning so the row claims real layout
+  // space (otherwise an absolute always-visible row would still
+  // overlap the next message). On hover devices, `absolute` so the
+  // hidden row doesn't leave dead air between bubbles.
+  const rowPositionClass = isTouch ? 'static mt-1' : 'absolute top-full';
+  const rowSideClass = isUser ? 'right-0' : 'left-0';
+
+  return (
+    <div
+      className={`relative flex flex-col ${isUser ? 'items-end' : 'items-start'} ${className}`}
+      onPointerEnter={isTouch ? undefined : open}
+      onPointerLeave={isTouch ? undefined : scheduleClose}
+      onFocusCapture={open}
+      onBlurCapture={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) scheduleClose();
+      }}
+    >
+      {children}
+      {actions && (
+        <div className={`${rowPositionClass} ${rowSideClass}`}>
+          {actions(visible, isUser)}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const ChatMessageRow = memo(ChatMessageRowRaw);

package/src/markdown-message/CodeBlock.tsx

@@ -0,0 +1,137 @@
+import React, { memo } from 'react';
+import { CopyButton } from '@djangocfg/ui-core/components';
+import PrettyCode from '../pretty-code';
+
+interface CodeBlockProps {
+  code: string;
+  language: string;
+  isUser: boolean;
+  isCompact?: boolean;
+  /**
+   * Code surface palette. Default `'auto'` — follow the host theme.
+   * `'dark'` / `'light'` pin the palette regardless of theme.
+   */
+  codeTheme?: 'dark' | 'light' | 'auto';
+}
+
+/**
+ * Markdown code block. Renders <PrettyCode> directly — its own
+ * FloatingToolbar already carries the language tag and Copy action.
+ *
+ * Earlier versions stacked an extra <CopyButton> here too, which
+ * surfaced as two copy buttons on every code fence. The fallback
+ * branch below still ships its own button because the plain <pre>
+ * has no toolbar of its own.
+ *
+ * Memoised: re-renders only when `code`, `language`, `isUser` or
+ * `isCompact` change. `code` is the main trigger — long code blocks
+ * should not re-render when parent chat scrolls.
+ */
+function CodeBlockRaw({ code, language, codeTheme = 'auto' }: CodeBlockProps) {
+  // Chat fences are always rendered in PrettyCode's compact mode:
+  // 12px font, tighter padding, line-height 1.4. A fenced block in
+  // a chat bubble shouldn't outweigh two paragraphs of body text —
+  // the standalone PrettyCode story keeps the larger default for
+  // docs/diff viewers.
+  //
+  // `mode` must be UNDEFINED to follow the theme: PrettyCode resolves it as
+  // `mode ?? resolvedTheme`, so passing a concrete value — as this did with
+  // its old `'dark'` default — pins the palette and defeats that fallback.
+  // The pin also propagated to `CodePanelHeader` (`dark={isDarkMode}`), which
+  // is why the language label and copy icon stayed `text-white/40` on a light
+  // panel. `'auto'` is the default now; a host can still pin deliberately.
+  const pinnedMode = codeTheme === 'auto' ? undefined : codeTheme;
+  return (
+    <div className="my-2">
+      <PrettyCode
+        data={code}
+        language={language}
+        className="text-xs"
+        mode={pinnedMode}
+        // No `customBg` — let PrettyCode paint the surface via its inline
+        // `var(--code)` style (see surfaceStyle there). We used to pass
+        // `customBg="bg-code"`, but that Tailwind utility only exists in the
+        // generated CSS if the CONSUMER scans ui-core/widget source in its
+        // Tailwind `content` globs — and most (e.g. cmdop) do not. The class
+        // then landed in the DOM with no rule behind it, so the panel rendered
+        // with a transparent surface in light mode (in dark mode the ambient
+        // 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>
+  );
+}
+
+export const CodeBlock = memo(CodeBlockRaw);
+
+/** Simple `<pre>` fallback used when CodeBlock throws (lazy module
+ *  failure, missing PrettyCode peer, etc).
+ *
+ *  Memoised: re-renders only when `code`, `language`, `isUser` or
+ *  `isCompact` change.
+ */
+function CodeBlockFallbackRaw({ code, codeTheme = 'auto' }: CodeBlockProps) {
+  // Only an explicit `'dark'` pin takes the hard-coded dark surface. `'auto'`
+  // uses the token branch, which is already theme-aware (`--code*` is defined
+  // in both light.css and dark.css) — so it renders correctly in EITHER theme.
+  // Testing `=== 'dark'` and letting everything else fall through to a fixed
+  // LIGHT surface would have been the same class of bug this fixes, inverted.
+  const isDark = codeTheme === 'dark';
+  // On the dark surface the copy button is always light; on a light
+  // surface it follows the semantic muted token.
+  const copyButtonClass =
+    `absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ` +
+    (isDark
+      ? 'text-white/70 hover:text-white hover:bg-white/15'
+      : 'text-muted-foreground hover:text-foreground hover:bg-muted');
+
+  return (
+    <div className="relative group my-3">
+      <CopyButton
+        value={code}
+        variant="ghost"
+        className={copyButtonClass}
+        title="Copy code"
+      />
+      {isDark ? (
+        // Fixed dark surface to match PrettyCode's default.
+        <pre
+          className="p-3 rounded text-xs font-mono overflow-x-auto border"
+          style={{
+            backgroundColor: '#0d1117',
+            color: '#e5e7eb',
+            borderColor: '#1f2937',
+          }}
+        >
+          <code>{code}</code>
+        </pre>
+      ) : (
+        <pre
+          className="p-3 rounded text-xs font-mono overflow-x-auto border"
+          // Inline `var(--code*)` rather than `bg-code`/`text-code-foreground`/
+          // `border-code-border` classes: those utilities only exist when the
+          // consumer scans this widget's source in its Tailwind content globs, which
+          // many don't — see the note in CodeBlockRaw. The vars are defined in
+          // both light.css and dark.css, so this stays theme-aware everywhere.
+          style={{
+            backgroundColor: 'var(--code)',
+            color: 'var(--code-foreground)',
+            borderColor: 'var(--code-border)',
+          }}
+        >
+          <code>{code}</code>
+        </pre>
+      )}
+    </div>
+  );
+}
+
+export const CodeBlockFallback = memo(CodeBlockFallbackRaw);

package/src/markdown-message/CollapseToggle.tsx

@@ -0,0 +1,69 @@
+import React, { memo } from 'react';
+
+import { TOGGLE } from '../role-tokens';
+
+interface CollapseToggleProps {
+  isCollapsed: boolean;
+  onClick: () => void;
+  readMoreLabel: string;
+  showLessLabel: string;
+  isUser: boolean;
+  isCompact: boolean;
+}
+
+/** "Read more..." / "Show less" button.
+ *
+ * Memoised: re-renders only when `isCollapsed`, `onClick`, `readMoreLabel`,
+ * `showLessLabel`, `isUser` or `isCompact` change. `onClick` is compared
+ * by reference — callers should stabilise it with useCallback.
+ */
+function CollapseToggleRaw({
+  isCollapsed,
+  onClick,
+  readMoreLabel,
+  showLessLabel,
+  isUser,
+  isCompact,
+}: CollapseToggleProps) {
+  const textSize = isCompact ? 'text-xs' : 'text-sm';
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`
+        ${textSize} font-medium cursor-pointer
+        transition-colors duration-200
+        ${isUser ? TOGGLE.user : TOGGLE.assistant}
+        inline-flex items-center gap-1
+        mt-1
+      `}
+    >
+      {isCollapsed ? (
+        <>
+          {readMoreLabel}
+          <Chevron direction="down" />
+        </>
+      ) : (
+        <>
+          {showLessLabel}
+          <Chevron direction="up" />
+        </>
+      )}
+    </button>
+  );
+};
+
+const Chevron = memo(function Chevron({ direction }: { direction: 'up' | 'down' }) {
+  return (
+    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d={direction === 'down' ? 'M19 9l-7 7-7-7' : 'M5 15l7-7 7 7'}
+      />
+    </svg>
+  );
+});
+
+export const CollapseToggle = memo(CollapseToggleRaw);