@djangocfg/ui-tools 2.1.431 → 2.1.433

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.431",
+  "version": "2.1.433",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -276,6 +276,11 @@
       "import": "./src/tools/visual/charts/Sparkline/index.ts",
       "require": "./src/tools/visual/charts/Sparkline/index.ts"
     },
+    "./smooth-line": {
+      "types": "./src/tools/visual/charts/SmoothLine/index.ts",
+      "import": "./src/tools/visual/charts/SmoothLine/index.ts",
+      "require": "./src/tools/visual/charts/SmoothLine/index.ts"
+    },
     "./rating": {
       "types": "./src/tools/visual/indicators/Rating/index.ts",
       "import": "./src/tools/visual/indicators/Rating/index.ts",
@@ -329,22 +334,30 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.431",
-    "@djangocfg/ui-core": "^2.1.431",
+    "@djangocfg/i18n": "^2.1.433",
+    "@djangocfg/ui-core": "^2.1.433",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwindcss": "^4.1.18",
+    "zod": "^4.3.6",
     "zustand": "^5.0.0"
   },
+  "peerDependenciesMeta": {
+    "zod": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/dom": "^1.7.4",
+    "@radix-ui/react-direction": "^1.1.1",
+    "@radix-ui/react-slot": "^1.2.4",
     "@rjsf/core": "^6.1.2",
     "@rjsf/utils": "^6.1.2",
     "@rjsf/validator-ajv8": "^6.1.2",
@@ -366,22 +379,23 @@
     "@tiptap/react": "^3.23.0",
     "@tiptap/starter-kit": "^3.23.0",
     "@tiptap/suggestion": "^3.23.0",
-    "lowlight": "^3.3.0",
-    "tiptap-extension-global-drag-handle": "^0.1.18",
+    "@turf/turf": "^7.3.5",
+    "@types/qrcode": "^1.5.5",
     "@wavesurfer/react": "^1.0.12",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-direction": "^1.1.1",
     "class-variance-authority": "^0.7.1",
     "hls-video-element": "^1.5.11",
+    "json-edit-react": "^1.30.1",
+    "lowlight": "^3.3.0",
     "maplibre-gl": "^4.7.1",
     "media-chrome": "^4.19.0",
     "media-icons": "next",
     "mermaid": "^11.12.0",
     "monaco-editor": "^0.55.1",
     "openapi-sampler": "^1.7.2",
+    "pmtiles": "^4.4.1",
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
-    "json-edit-react": "^1.30.1",
+    "qrcode": "^1.5.4",
     "react-lottie-player": "^2.1.0",
     "react-map-gl": "^8.1.0",
     "react-markdown": "10.1.0",
@@ -394,8 +408,7 @@
     "remark-emoji": "^5.0.2",
     "remark-gfm": "4.0.1",
     "remark-smartypants": "^3.0.2",
-    "qrcode": "^1.5.4",
-    "@types/qrcode": "^1.5.5",
+    "tiptap-extension-global-drag-handle": "^0.1.18",
     "vimeo-video-element": "^1.7.2",
     "wavesurfer.js": "^7.12.1",
     "youtube-video-element": "^1.9.0"
@@ -405,9 +418,9 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.431",
-    "@djangocfg/typescript-config": "^2.1.431",
-    "@djangocfg/ui-core": "^2.1.431",
+    "@djangocfg/i18n": "^2.1.433",
+    "@djangocfg/typescript-config": "^2.1.433",
+    "@djangocfg/ui-core": "^2.1.433",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^25.2.3",
@@ -421,7 +434,8 @@
     "tailwindcss": "^4.1.18",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",
-    "vitest": "^3.1.4"
+    "vitest": "^3.1.4",
+    "zod": "^4.3.6"
   },
   "publishConfig": {
     "access": "public"

package/src/common/CodePanelHeader/CodePanelHeader.tsx

@@ -0,0 +1,121 @@
+'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/common/CodePanelHeader/index.ts

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

package/src/common/blocks/BlockError.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+/**
+ * `<BlockError>` — the safe presentational fallback a data-driven block renders
+ * when its payload fails schema validation (a corrupted ```map JSON, a
+ * malformed wire block). Informative, not scary: a compact muted card that says
+ * the block couldn't render, with an optional short reason. Never throws, so the
+ * surrounding editor / message list stays alive.
+ *
+ * Semantic tokens only (`bg-muted` / `border-border` / `text-muted-foreground`).
+ */
+
+import { AlertTriangle } from 'lucide-react';
+
+export interface BlockErrorProps {
+  /**
+   * Short, human-readable reason (e.g. the first Zod issue). Optional — when
+   * omitted only the generic headline shows.
+   */
+  reason?: string;
+  /** What couldn't be rendered (e.g. "map", "bookmark"). Defaults to "block". */
+  label?: string;
+  className?: string;
+}
+
+export function BlockError({ reason, label = 'block', className }: BlockErrorProps) {
+  return (
+    <div
+      role="status"
+      className={
+        'flex items-start gap-2.5 rounded-lg border border-border bg-muted px-3 py-2.5 text-sm text-muted-foreground' +
+        (className ? ` ${className}` : '')
+      }
+    >
+      <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+      <div className="min-w-0">
+        <div className="font-medium text-foreground">Couldn&apos;t render this {label}</div>
+        {reason ? (
+          <div className="mt-0.5 break-words text-xs text-muted-foreground">{reason}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export default BlockError;

package/src/common/blocks/index.ts

@@ -0,0 +1,34 @@
+/**
+ * Shared block payload types — the serializable wire shapes that both the
+ * chat message blocks and the NotionEditor block NodeViews reference, so the
+ * shapes can't drift. The link-preview data shape lives in
+ * `common/link-preview`; the map payload lives here. Re-exported below so a
+ * single import (`common/blocks`) reaches every shared block payload.
+ */
+
+export type {
+  MapBlockPayload,
+  MapMarkerPayload,
+  MapRoutePayload,
+  MapPolygonPayload,
+} from './types';
+
+// Re-export the link-preview data contract from its home so consumers can
+// reach every shared block payload from one place.
+export type { LinkPreviewData, ResolveLinkPreview } from '../link-preview';
+
+// Runtime validators + the safe-render fallback. A block NodeView/renderer
+// parses its payload through the matching schema and renders `<BlockError>`
+// on failure instead of throwing.
+export {
+  MapMarkerPayloadSchema,
+  MapRoutePayloadSchema,
+  MapPolygonPayloadSchema,
+  MapBlockPayloadSchema,
+  LinkPreviewDataSchema,
+  safeParseBlock,
+} from './schemas';
+export type { SafeParseResult } from './schemas';
+
+export { BlockError } from './BlockError';
+export type { BlockErrorProps } from './BlockError';

package/src/common/blocks/schemas.ts

@@ -0,0 +1,143 @@
+/**
+ * Zod schemas for the shared, serializable block payloads in `./types.ts` and
+ * the link-preview data contract. These are the runtime VALIDATORS that let a
+ * block NodeView render a safe `<BlockError>` fallback instead of throwing when
+ * it's handed a hand-authored / corrupted payload (a bad ```map JSON, a
+ * malformed wire block).
+ *
+ * The TS payload types stay the source of truth in `./types.ts` (and
+ * `common/link-preview/types.ts`); these schemas are kept in SYNC with them and
+ * `satisfies`-checked below so they can't silently drift. We deliberately do
+ * NOT re-export `z.infer` types under the same names — existing imports
+ * (`MapBlockPayload`, `LinkPreviewData`) keep coming from their type homes.
+ *
+ * Schemas are permissive on optional/extra fields (`.passthrough` is implied by
+ * Zod object stripping unknowns) but STRICT on the load-bearing shape: numbers
+ * are numbers, `center`/`url` are required. Anything that wouldn't render
+ * cleanly fails `safeParse`.
+ */
+
+import { z } from 'zod';
+import type {
+  MapMarkerPayload,
+  MapRoutePayload,
+  MapPolygonPayload,
+  MapBlockPayload,
+} from './types';
+import type { LinkPreviewData } from '../link-preview';
+
+/** A finite number — rejects NaN/Infinity that would break the map camera. */
+const finiteNumber = z.number().finite();
+
+/** `{ lat, lng }` — a geographic point; both finite numbers, required. */
+const LatLngSchema = z.object({
+  lat: finiteNumber,
+  lng: finiteNumber,
+});
+
+/** Marker info-card (pure JSON; `href`-only actions). */
+const MarkerCardSchema = z.object({
+  title: z.string(),
+  description: z.string().optional(),
+  image: z.string().optional(),
+  badge: z.string().optional(),
+  actions: z
+    .array(z.object({ label: z.string(), href: z.string().optional() }))
+    .optional(),
+});
+
+/** A single map marker — pin + optional label / icon / colour / card. */
+export const MapMarkerPayloadSchema = z.object({
+  id: z.string(),
+  lat: finiteNumber,
+  lng: finiteNumber,
+  label: z.string().optional(),
+  icon: z.string().optional(),
+  color: z.string().optional(),
+  card: MarkerCardSchema.optional(),
+});
+
+/** An ordered polyline (route / path). */
+export const MapRoutePayloadSchema = z.object({
+  id: z.string(),
+  points: z.array(LatLngSchema),
+  color: z.string().optional(),
+  label: z.string().optional(),
+});
+
+/** A filled polygon (zone), auto-closed. */
+export const MapPolygonPayloadSchema = z.object({
+  id: z.string(),
+  points: z.array(LatLngSchema),
+  fillColor: z.string().optional(),
+  strokeColor: z.string().optional(),
+  label: z.string().optional(),
+});
+
+/** The serializable map payload — center + optional viewport + overlays. */
+export const MapBlockPayloadSchema = z.object({
+  center: LatLngSchema,
+  zoom: finiteNumber.optional(),
+  basemap: z.string().optional(),
+  terrain: z.boolean().optional(),
+  markers: z.array(MapMarkerPayloadSchema).optional(),
+  routes: z.array(MapRoutePayloadSchema).optional(),
+  polygons: z.array(MapPolygonPayloadSchema).optional(),
+});
+
+/** Resolved link-preview metadata — `url` required, rest optional. */
+export const LinkPreviewDataSchema = z.object({
+  url: z.string(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  image: z.string().optional(),
+  favicon: z.string().optional(),
+  siteName: z.string().optional(),
+});
+
+// ── Drift guards ──────────────────────────────────────────────────────────
+// A type-level assertion that each schema's inferred output is assignable to
+// the canonical TS payload type. If `./types.ts` and a schema diverge, the
+// corresponding `Extends<…>` resolves to `never` and the assignment fails to
+// compile — keeping the schemas and types in lockstep.
+type Extends<A, B> = A extends B ? true : never;
+const _markerOk: Extends<z.infer<typeof MapMarkerPayloadSchema>, MapMarkerPayload> = true;
+const _routeOk: Extends<z.infer<typeof MapRoutePayloadSchema>, MapRoutePayload> = true;
+const _polygonOk: Extends<z.infer<typeof MapPolygonPayloadSchema>, MapPolygonPayload> = true;
+const _mapOk: Extends<z.infer<typeof MapBlockPayloadSchema>, MapBlockPayload> = true;
+const _linkOk: Extends<z.infer<typeof LinkPreviewDataSchema>, LinkPreviewData> = true;
+// Reference the guards so `noUnusedLocals` stays happy without exporting them.
+void [_markerOk, _routeOk, _polygonOk, _mapOk, _linkOk];
+
+/**
+ * Discriminated result of a guarded parse — never throws.
+ *
+ * The mutually-exclusive `?: never` fields make narrowing robust: a plain
+ * `if (!r.ok)` flows into the error branch even when `T` is a deep object type
+ * (TS's discriminant else-narrowing otherwise mis-fires on very large `data`
+ * shapes). Callers can therefore use `!r.ok` / `r.ok` freely.
+ */
+export type SafeParseResult<T> =
+  | { ok: true; data: T; error?: never }
+  | { ok: false; error: string; data?: never };
+
+/**
+ * Validate `data` against `schema`, returning a discriminated result instead of
+ * throwing. On failure `error` is a short, human-readable reason (the first
+ * Zod issue) suitable for a `<BlockError reason=…>` card.
+ *
+ * The output type is taken from the schema (`z.infer`) so callers get the
+ * precisely-typed `data` on the success branch with no extra type argument.
+ */
+export function safeParseBlock<S extends z.ZodTypeAny>(
+  schema: S,
+  data: unknown,
+): SafeParseResult<z.infer<S>> {
+  const result = schema.safeParse(data);
+  if (result.success) return { ok: true, data: result.data };
+  const first = result.error.issues[0];
+  const reason = first
+    ? `${first.path.length ? first.path.map(String).join('.') + ': ' : ''}${first.message}`
+    : 'Invalid payload';
+  return { ok: false, error: reason };
+}

package/src/common/blocks/types.ts

@@ -0,0 +1,76 @@
+/**
+ * Shared, serializable block payload TYPES — the wire shapes that more than
+ * one surface (chat message blocks + the NotionEditor block NodeViews) must
+ * agree on. Defining them ONCE here keeps the shapes from drifting: chat's
+ * `tools/chat/types/block.ts` and the Notion nodes both reference these.
+ *
+ * Plain JSON only (no Date / no functions / no React nodes) so payloads
+ * survive history persistence, SSE transport, AND TipTap node attrs +
+ * markdown round-trips.
+ */
+
+/** A single map marker — a pin plus optional label / icon / colour / card. */
+export interface MapMarkerPayload {
+  id: string;
+  lat: number;
+  lng: number;
+  label?: string;
+  /** Image URL rendered as the marker pin (rounded thumbnail). */
+  icon?: string;
+  /** CSS color for the default pin (ignored when `icon` is set). */
+  color?: string;
+  /**
+   * Info-card opened above the pin on click (Google-Maps style). Pure JSON —
+   * strings/URLs only; actions are `href`-only links (no `onClick`/`icon`,
+   * which can't cross the wire). Rendered by the map's default `MarkerCard`.
+   */
+  card?: {
+    title: string;
+    description?: string;
+    image?: string;
+    badge?: string;
+    actions?: Array<{ label: string; href?: string }>;
+  };
+}
+
+/** An ordered polyline (route / path). */
+export interface MapRoutePayload {
+  id: string;
+  points: Array<{ lat: number; lng: number }>;
+  color?: string;
+  label?: string;
+}
+
+/** A filled polygon (zone), auto-closed. */
+export interface MapPolygonPayload {
+  id: string;
+  points: Array<{ lat: number; lng: number }>;
+  fillColor?: string;
+  strokeColor?: string;
+  label?: string;
+}
+
+/**
+ * Serializable map payload shared by the chat `MapBlock` and the NotionEditor
+ * `mapBlock` node. A center + optional zoom / basemap / terrain / markers /
+ * routes / polygons. The chat block extends this with chat-only concerns
+ * (a `caption`, `userLocation` opt-in); the Notion node serializes this whole
+ * object to/from a fenced ```` ```map ```` JSON block.
+ */
+export interface MapBlockPayload {
+  center: { lat: number; lng: number };
+  zoom?: number;
+  /**
+   * Basemap style — a built-in key (`'light'`/`'dark'`/`'streets'` ·
+   * `'liberty'`/`'bright'`/`'positron'`) or a full style-JSON URL. When
+   * omitted the map uses its default basemap.
+   */
+  basemap?: string;
+  /** Enable 3D terrain + hillshade (free AWS Terrarium DEM, no key). */
+  terrain?: boolean;
+  markers?: MapMarkerPayload[];
+  /** Polylines (routes / paths). */
+  routes?: MapRoutePayload[];
+  /** Filled zones (polygons). */
+  polygons?: MapPolygonPayload[];
+}

package/src/common/chips/README.md

@@ -0,0 +1,67 @@
+# chips
+
+Surface-agnostic presentational "chips" — compact inline pills that render a
+URL or a file path with a favicon/icon + middle-ellipsis label. They match the
+TipTap composer's `editor-chip` look (see
+[`forms/MarkdownEditor/chip/ChipNode.ts`](../../tools/forms/MarkdownEditor/chip/ChipNode.ts))
+but are plain React, so the same visual is reusable on any surface — composer,
+chat bubble, link lists.
+
+Internal module (`src/common/chips/`) — consumed by other tools via relative
+import; not a package subpath export:
+
+```tsx
+import { UrlChip, FilePathChip } from '../../common/chips';
+```
+
+## `UrlChip`
+
+A compact, clickable URL chip (Chrome-omnibox style): a favicon + the domain
+with a middle-ellipsised path (`github.com/wailsapp/…/README.md`), monospace,
+with the full href on `title` hover. Renders an `<a target="_blank"
+rel="noopener noreferrer">`, so it opens in a new tab.
+
+- **Favicon fallback.** The favicon `<img>` swaps to a lucide `Globe` glyph on
+  load error (offline / blocked / unknown host) — and also when the host is
+  unparseable (empty favicon URL) — so the chip never shows a broken image.
+- **Presentational + self-contained.** It imports only the pure URL detector
+  helpers from [`forms/MarkdownEditor/url/detect`](../../tools/forms/MarkdownEditor/url/detect.ts)
+  — no TipTap / ProseMirror — so it can render a known URL anywhere:
+  `splitUrl` (host/domain/path split), `truncateUrlLabel` (the
+  middle-ellipsis label), and `faviconUrl` (Google S2 favicon).
+
+### Props (`UrlChipProps`)
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `href` | `string` | required | The full, navigable href (`https://…`). |
+| `maxChars` | `number` | `40` | Approximate max chars for the truncated label. The domain is always kept in full; only the path's middle collapses. |
+| `className` | `string` | — | Extra classes merged onto the chip anchor. |
+
+```tsx
+<UrlChip href="https://github.com/wailsapp/wails/blob/main/v3/README.md" />
+// → 🟣 github.com/…/README.md
+```
+
+## `FilePathChip`
+
+Re-exported (with its `FilePathChipProps` type) from the editor's standalone
+path chip,
+[`forms/MarkdownEditor/filePath/FilePathChip.tsx`](../../tools/forms/MarkdownEditor/filePath/FilePathChip.tsx).
+It's already presentational and dependency-light, so this module re-exports it
+rather than duplicating it — `UrlChip` and `FilePathChip` then live behind one
+import.
+
+## Where these are reused
+
+- **Chat markdown bubble.** `UrlChip` is what
+  [`MarkdownMessage`'s `urlChipRule`](../../tools/dev/code/MarkdownMessage/README.md)
+  renders for a bare URL when the host opts in via `ChatConfig.linkChips`.
+- **Composer.** The TipTap composer renders its **own** DOM chip via `ChipNode`
+  (a single inline atom node, `kind: 'url'`), not this React component — but the
+  two are built to match pixel-for-pixel using the same semantic tokens, so a
+  URL reads identically whether it's being typed in the composer or sitting in a
+  rendered bubble.
+
+This shared look is the point: the same URL is one consistent chip across every
+surface.