@djangocfg/ui-tools 2.1.430 → 2.1.432

package/src/tools/forms/MarkdownEditor/filePath/__tests__/detect.test.ts

@@ -0,0 +1,161 @@
+import { describe, it, expect } from 'vitest';
+import { findFilePaths, splitPath, truncatePathLabel } from '../detect';
+
+describe('findFilePaths', () => {
+  it('detects the repro path embedded in Cyrillic prose', () => {
+    const text =
+      'прочти манифест /Users/markinmatrix/workspace/@projects/cmdop/@docs/positioning/manifest.md интересно твоё мнение';
+    const matches = findFilePaths(text);
+    expect(matches).toHaveLength(1);
+    expect(matches[0]!.path).toBe(
+      '/Users/markinmatrix/workspace/@projects/cmdop/@docs/positioning/manifest.md',
+    );
+    // The slice at [start,end) must equal the matched path exactly.
+    expect(text.slice(matches[0]!.start, matches[0]!.end)).toBe(matches[0]!.path);
+  });
+
+  it('detects a Windows drive path with backslashes', () => {
+    const matches = findFilePaths('see C:\\Users\\me\\notes.md please');
+    expect(matches).toHaveLength(1);
+    expect(matches[0]!.path).toBe('C:\\Users\\me\\notes.md');
+  });
+
+  it('detects a Windows drive path with forward slashes', () => {
+    const matches = findFilePaths('open C:/Users/me/notes.md');
+    expect(matches[0]!.path).toBe('C:/Users/me/notes.md');
+  });
+
+  it('detects a UNC path', () => {
+    const matches = findFilePaths('on \\\\srv\\share\\x.md here');
+    expect(matches).toHaveLength(1);
+    expect(matches[0]!.path).toBe('\\\\srv\\share\\x.md');
+  });
+
+  it('detects a ~ home path', () => {
+    const matches = findFilePaths('edit ~/dev/a.ts now');
+    expect(matches).toHaveLength(1);
+    expect(matches[0]!.path).toBe('~/dev/a.ts');
+  });
+
+  it('detects a file:// URI', () => {
+    const matches = findFilePaths('go to file:///x/y.md ok');
+    expect(matches).toHaveLength(1);
+    expect(matches[0]!.path).toBe('file:///x/y.md');
+  });
+
+  it('detects a directory path ending in a folder', () => {
+    const matches = findFilePaths('cd /Users/me/positioning');
+    expect(matches).toHaveLength(1);
+    expect(matches[0]!.path).toBe('/Users/me/positioning');
+  });
+
+  it('detects a directory path ending in a trailing separator', () => {
+    const matches = findFilePaths('cd /Users/me/positioning/ then');
+    expect(matches[0]!.path).toBe('/Users/me/positioning/');
+  });
+
+  it('trims trailing sentence punctuation', () => {
+    const matches = findFilePaths('see /a/b/c.md. Done.');
+    expect(matches).toHaveLength(1);
+    expect(matches[0]!.path).toBe('/a/b/c.md');
+  });
+
+  it('trims a closing paren', () => {
+    const matches = findFilePaths('(at /a/b/c.md)');
+    expect(matches[0]!.path).toBe('/a/b/c.md');
+  });
+
+  // ── False positives ──
+
+  it('does NOT match a prose slash "a / b"', () => {
+    expect(findFilePaths('a / b')).toHaveLength(0);
+  });
+
+  it('does NOT match a single-segment root "/foo"', () => {
+    expect(findFilePaths('just /foo here')).toHaveLength(0);
+  });
+
+  it('does NOT match an https URL as a file path', () => {
+    expect(findFilePaths('visit https://x.com/y/z page')).toHaveLength(0);
+  });
+
+  it('does NOT match an http URL as a file path', () => {
+    expect(findFilePaths('http://example.com/a/b')).toHaveLength(0);
+  });
+
+  it('does NOT match bare relative tokens', () => {
+    expect(findFilePaths('run ./script and src/index.ts')).toHaveLength(0);
+  });
+
+  it('finds multiple paths in one string', () => {
+    const matches = findFilePaths('a /x/y.ts and ~/z/w.md done');
+    expect(matches.map((m) => m.path)).toEqual(['/x/y.ts', '~/z/w.md']);
+  });
+});
+
+describe('splitPath', () => {
+  it('splits a unix file path', () => {
+    expect(splitPath('/Users/me/manifest.md')).toEqual({
+      dir: 'Users/me',
+      base: 'manifest.md',
+      isDir: false,
+    });
+  });
+
+  it('treats an extensionless basename as a dir', () => {
+    const r = splitPath('/Users/me/positioning');
+    expect(r.base).toBe('positioning');
+    expect(r.isDir).toBe(true);
+  });
+
+  it('treats a trailing-separator path as a dir', () => {
+    const r = splitPath('/Users/me/docs/');
+    expect(r.base).toBe('docs');
+    expect(r.isDir).toBe(true);
+  });
+
+  it('is separator-agnostic for Windows paths', () => {
+    const r = splitPath('C:\\Users\\me\\notes.md');
+    expect(r.base).toBe('notes.md');
+    expect(r.isDir).toBe(false);
+  });
+
+  it('strips a file:// scheme', () => {
+    expect(splitPath('file:///x/y.md').base).toBe('y.md');
+  });
+
+  it('treats a dotfile as a file', () => {
+    expect(splitPath('/home/me/.gitignore').isDir).toBe(false);
+  });
+});
+
+describe('truncatePathLabel', () => {
+  it('keeps a short path unchanged', () => {
+    expect(truncatePathLabel('/a/b.md')).toBe('/a/b.md');
+  });
+
+  it('middle-ellipsizes a long path but keeps the basename', () => {
+    const label = truncatePathLabel(
+      '/Users/markinmatrix/workspace/@projects/cmdop/@docs/positioning/manifest.md',
+    );
+    expect(label).toContain('manifest.md');
+    expect(label).toContain('…');
+    // Basename is never cut.
+    expect(label.endsWith('manifest.md')).toBe(true);
+  });
+
+  it('respects a custom maxChars', () => {
+    const label = truncatePathLabel('/very/long/path/to/some/file.md', {
+      maxChars: 16,
+    });
+    expect(label.endsWith('file.md')).toBe(true);
+    expect(label).toContain('…');
+  });
+
+  it('keeps the parent folder hint for a long path', () => {
+    const label = truncatePathLabel(
+      '/Users/markinmatrix/workspace/@projects/cmdop/@docs/positioning/manifest.md',
+    );
+    expect(label).toContain('positioning');
+  });
+});

package/src/tools/forms/MarkdownEditor/filePath/detect.ts

@@ -0,0 +1,289 @@
+/**
+ * File-path detection + display helpers for the chat editor's "file chip"
+ * decoration. Pure, side-effect-free, and unit-testable — no TipTap /
+ * ProseMirror / React imports live here so the same functions back the
+ * standalone `<FilePathChip>` and the editor decoration alike.
+ *
+ * Design goal: **LOW false-positive**. We only treat a token as a local
+ * file path when it matches an explicit, unambiguous ABSOLUTE shape —
+ * never a bare relative token (`./x`, `src/y`) and never a web URL. See
+ * `reports/research.md` for the rationale (there is no single universal
+ * path regex; detect by safe shapes only).
+ */
+
+// ── Match result ──
+
+export interface FilePathMatch {
+  /** Inclusive start offset into the scanned string. */
+  start: number;
+  /** Exclusive end offset into the scanned string. */
+  end: number;
+  /** The matched path text (already trailing-punctuation-trimmed). */
+  path: string;
+}
+
+// ── Detector ──
+
+/**
+ * Trailing sentence punctuation that, when it hangs off the END of a
+ * detected path token, is almost certainly prose and not part of the
+ * filename — trim it. Real filenames effectively never end in these.
+ * (A leading `.` like a dotfile is fine — we only trim the tail.)
+ */
+const TRAILING_PUNCT = new Set([
+  '.', ',', ')', ']', '}', ';', ':', '!', '?',
+  '«', '»', '"', "'", '”', '’', '…',
+]);
+
+/**
+ * The four absolute path shapes, as a single alternation. Each alternative
+ * is whitespace-bounded by construction (`\S` runs, no raw spaces). Order
+ * matters: more specific schemes (`file://`, UNC, drive) come before the
+ * bare Unix root so the longest correct form wins.
+ *
+ * - `file://…`            — `file:` URI (any non-space tail).
+ * - `\\server\share…`     — Windows UNC (two leading backslashes).
+ * - `C:\…` / `C:/…`       — Windows drive (single letter + `:` + slash).
+ * - `~/…`                 — home-relative (Unix/macOS).
+ * - `/seg/seg…`           — Unix/macOS absolute, REQUIRES ≥2 segments so a
+ *                           lone `/` or prose `a / b` never matches.
+ *
+ * Unicode is allowed inside segments (`@projects`, Cyrillic dirs) — we
+ * match on "not whitespace" rather than an ASCII allow-list, then strip
+ * trailing punctuation afterwards.
+ */
+const PATH_RE = new RegExp(
+  [
+    // file:// URI — scheme then a non-space tail.
+    String.raw`file:\/\/\S+`,
+    // UNC: \\server\share...  (need a host char after the two slashes).
+    String.raw`\\\\[^\s\\/][^\s]*`,
+    // Windows drive: C:\... or C:/... (single drive letter).
+    String.raw`[A-Za-z]:[\\/][^\s]*`,
+    // Home: ~/...
+    String.raw`~[\\/][^\s]+`,
+    // Unix/macOS absolute: /seg/seg... — at least TWO segments. A
+    // segment is a run of non-space, non-separator chars; we require
+    // a separator + segment to repeat at least once after the root.
+    String.raw`\/[^\s\\/]+(?:[\\/][^\s\\/]+)+[\\/]?`,
+  ].join('|'),
+  'gu',
+);
+
+/**
+ * Trim trailing prose punctuation from a raw token. Repeats so multiple
+ * trailing marks (`manifest.md).` → `manifest.md`) all come off, but
+ * stops as soon as the tail is a normal path char. We never trim into an
+ * empty string.
+ */
+function trimTrailingPunct(raw: string): string {
+  let end = raw.length;
+  while (end > 1 && TRAILING_PUNCT.has(raw[end - 1]!)) {
+    end -= 1;
+  }
+  return raw.slice(0, end);
+}
+
+/**
+ * Find every absolute local file path in `text`.
+ *
+ * Returns matches in document order with `{ start, end, path }` where
+ * `[start, end)` are offsets into the ORIGINAL string (after trailing-
+ * punctuation trimming, `end` points just past the kept path — the
+ * trimmed punctuation is left out of the range so the chip doesn't cover
+ * it). Web URLs (`https://x.com/y`), bare relative tokens, and a lone
+ * prose slash are intentionally NOT matched.
+ */
+export function findFilePaths(text: string): FilePathMatch[] {
+  if (!text) return [];
+
+  const out: FilePathMatch[] = [];
+  PATH_RE.lastIndex = 0;
+  let m: RegExpExecArray | null;
+
+  while ((m = PATH_RE.exec(text)) !== null) {
+    const raw = m[0];
+    const start = m.index;
+
+    // Guard against a zero-width match (shouldn't happen with these
+    // alternatives, but keep the loop safe).
+    if (raw.length === 0) {
+      PATH_RE.lastIndex += 1;
+      continue;
+    }
+
+    // Leading-boundary guard. A real path token starts the string or
+    // follows whitespace / an opening delimiter. If it's glued onto a
+    // preceding non-space char it's a SUBSTRING of a larger token — most
+    // importantly a web URL's path (`https://x.com/y/z` → the `/y/z`
+    // would otherwise match the Unix-absolute shape). Reject those.
+    if (start > 0) {
+      const prev = text[start - 1]!;
+      if (!/[\s([{<«"'‘“]/.test(prev)) continue;
+    }
+
+    const trimmed = trimTrailingPunct(raw);
+    // A bare drive root (`C:\`) or `~/` with nothing meaningful is not a
+    // useful chip — but the regexes above already require a tail segment,
+    // so `trimmed` here is always a real path. Still, skip if trimming
+    // collapsed it to a non-path remnant.
+    if (trimmed.length < 2) continue;
+
+    out.push({
+      start,
+      end: start + trimmed.length,
+      path: trimmed,
+    });
+  }
+
+  return out;
+}
+
+// ── Split (separator-agnostic) ──
+
+export interface SplitPath {
+  /** Everything before the basename (no trailing separator). */
+  dir: string;
+  /** Last non-empty path segment (the file or folder name). */
+  base: string;
+  /**
+   * Heuristic: the path points at a directory rather than a file —
+   * either it ends in a separator, or its basename has no file
+   * extension (a dotted `manifest.md` reads as a file; `positioning`
+   * reads as a dir).
+   */
+  isDir: boolean;
+}
+
+/**
+ * Strip a `file://` (or `file:`) scheme prefix for display/splitting.
+ * `file:///Users/x` → `/Users/x`; `file://host/share` → `host/share`.
+ */
+function stripFileScheme(path: string): string {
+  const lower = path.toLowerCase();
+  if (lower.startsWith('file://')) {
+    // file:///abs  → /abs   (three slashes: empty host, keep the root)
+    // file://host  → host
+    return path.slice('file://'.length);
+  }
+  if (lower.startsWith('file:')) return path.slice('file:'.length);
+  return path;
+}
+
+/** True when `base` looks like it carries a real file extension. */
+function hasExtension(base: string): boolean {
+  const dot = base.lastIndexOf('.');
+  // No dot, leading dot only (dotfile like `.gitignore` — treat as file),
+  // or a trailing dot → decide:
+  //  - `.gitignore` (dot at 0) IS a file → has "extension".
+  //  - `name.` (dot last) → not a real extension.
+  if (dot === -1) return false;
+  if (dot === base.length - 1) return false; // trailing dot
+  if (dot === 0) return true; // dotfile
+  return true;
+}
+
+/**
+ * Split a path into `{ dir, base, isDir }`, separator-agnostic (handles
+ * `/` and `\` mixed). The basename is the last NON-EMPTY segment so a
+ * trailing separator (`/Users/me/docs/`) still yields `base = "docs"`
+ * and `isDir = true`.
+ */
+export function splitPath(path: string): SplitPath {
+  const cleaned = stripFileScheme(path);
+  const endsWithSep = /[\\/]$/.test(cleaned);
+
+  // Split on either separator, drop empty segments (collapses `//`,
+  // leading root, trailing sep).
+  const segments = cleaned.split(/[\\/]+/).filter((s) => s.length > 0);
+  const base = segments.length > 0 ? segments[segments.length - 1]! : cleaned;
+  const dirSegments = segments.slice(0, -1);
+  const dir = dirSegments.join('/');
+
+  const isDir = endsWithSep || !hasExtension(base);
+
+  return { dir, base, isDir };
+}
+
+// ── Truncate (Apple/Finder middle-ellipsis) ──
+
+export interface TruncateOptions {
+  /**
+   * Approximate max characters for the label. The basename is ALWAYS
+   * kept in full (never cut); only the middle collapses. Default 40.
+   */
+  maxChars?: number;
+}
+
+const ELLIPSIS = '…';
+
+/**
+ * Produce a compact, Finder/Chrome-style label for a path: the basename
+ * is sacred (always shown in full), the MIDDLE collapses to `…`, and a
+ * leading root hint is kept when there's room.
+ *
+ * Examples (maxChars ≈ 40):
+ *   /Users/me/dev/proj/positioning/manifest.md
+ *     → /Users/…/positioning/manifest.md
+ *   /a/b.md                → /a/b.md   (already short — unchanged)
+ *   C:\Users\me\notes.md   → C:\…\notes.md (separator preserved? — we
+ *                            normalise display to `/` for compactness)
+ */
+export function truncatePathLabel(path: string, opts: TruncateOptions = {}): string {
+  const maxChars = opts.maxChars ?? 40;
+  const display = stripFileScheme(path);
+
+  // Short enough — show as-is.
+  if (display.length <= maxChars) return display;
+
+  const endsWithSep = /[\\/]$/.test(display);
+  const segments = display.split(/[\\/]+/).filter((s) => s.length > 0);
+  if (segments.length <= 1) {
+    // Single segment longer than maxChars — keep the basename intact
+    // (CSS ellipsis is the safety net in the chip).
+    return display;
+  }
+
+  const base = segments[segments.length - 1]!;
+  const baseLabel = endsWithSep ? `${base}/` : base;
+
+  // Detect a leading root hint we can preserve:
+  //  - Unix/macOS absolute → leading "/" + first segment.
+  //  - Windows drive → "C:".
+  //  - `~` home → "~".
+  let rootHint = '';
+  if (/^[A-Za-z]:[\\/]/.test(display)) {
+    rootHint = display.slice(0, 2); // "C:"
+  } else if (display.startsWith('~')) {
+    rootHint = '~';
+  } else if (/^[\\/]/.test(display)) {
+    rootHint = `/${segments[0]!}`;
+  }
+
+  // The penultimate segment (parent folder) is a useful hint to keep
+  // when room allows — `.../positioning/manifest.md`.
+  const parent = segments.length >= 2 ? segments[segments.length - 2]! : '';
+
+  // Build candidates from most-informative to least, pick the first that
+  // fits within maxChars (the basename is never sacrificed).
+  const candidates: string[] = [];
+  if (rootHint && parent) {
+    candidates.push(`${rootHint}/${ELLIPSIS}/${parent}/${baseLabel}`);
+  }
+  if (parent) {
+    candidates.push(`${ELLIPSIS}/${parent}/${baseLabel}`);
+  }
+  if (rootHint) {
+    candidates.push(`${rootHint}/${ELLIPSIS}/${baseLabel}`);
+  }
+  candidates.push(`${ELLIPSIS}/${baseLabel}`);
+
+  for (const c of candidates) {
+    if (c.length <= maxChars) return c;
+  }
+
+  // Even `…/base` overflows (a very long basename) — return it anyway;
+  // the chip's CSS `text-overflow: ellipsis` clips the tail visually
+  // while the full path stays in the tooltip.
+  return `${ELLIPSIS}/${baseLabel}`;
+}

package/src/tools/forms/MarkdownEditor/filePath/index.ts

@@ -0,0 +1,15 @@
+'use client';
+
+export { FilePathChip } from './FilePathChip';
+export type { FilePathChipProps } from './FilePathChip';
+
+export {
+  findFilePaths,
+  splitPath,
+  truncatePathLabel,
+} from './detect';
+export type {
+  FilePathMatch,
+  SplitPath,
+  TruncateOptions,
+} from './detect';

package/src/tools/forms/MarkdownEditor/index.ts

@@ -8,3 +8,22 @@ export type {
 } from './types';
 export { mentionPresets } from './mentionPresets';
 export type { SlashCommandInfo } from './slash/types';
+
+// File-path chip — the standalone presentational chip plus the pure
+// detector helpers (usable outside the editor, e.g. rendering a known
+// path in a chat message).
+export { FilePathChip } from './filePath/FilePathChip';
+export type { FilePathChipProps } from './filePath/FilePathChip';
+export { findFilePaths, splitPath, truncatePathLabel } from './filePath/detect';
+export type { FilePathMatch, SplitPath, TruncateOptions } from './filePath/detect';
+
+// URL chip — pure detector + display helpers backing the in-editor URL chip
+// (the `editorChip` node's `kind: 'url'`). Usable standalone too.
+export {
+  findUrls,
+  splitUrl,
+  truncateUrlLabel,
+  faviconUrl,
+  normalizeHref,
+} from './url/detect';
+export type { UrlMatch, SplitUrl, UrlLabelOptions } from './url/detect';

package/src/tools/forms/MarkdownEditor/lazy.tsx

@@ -54,6 +54,16 @@ export { LazyMarkdownEditor as MarkdownEditor };
 // Light surface — pure helpers + types.
 export { mentionPresets } from './mentionPresets';
 
+// File-path chip — the standalone presentational chip + the pure detector
+// helpers. The chip is light enough to export eagerly (no TipTap at module
+// scope — it only pulls `FileIcon` + the pure detector), so consumers can
+// render a known path outside the editor without loading the ~200 KB
+// TipTap chunk.
+export { FilePathChip } from './filePath/FilePathChip';
+export type { FilePathChipProps } from './filePath/FilePathChip';
+export { findFilePaths, splitPath, truncatePathLabel } from './filePath/detect';
+export type { FilePathMatch, SplitPath, TruncateOptions } from './filePath/detect';
+
 export type {
   MarkdownEditorProps,
   MarkdownEditorHandle,

package/src/tools/forms/MarkdownEditor/styles.css

@@ -79,6 +79,17 @@
   margin: 0.25em 0;
 }
 
+/* The first / last block must hug the editor box — a leading/trailing
+ * 0.25em paragraph margin reads as extra air above the first line and a
+ * phantom empty line below the caret in the single-line chat composer.
+ * Inter-paragraph spacing (between two <p>) is untouched. */
+.markdown-editor .tiptap > :first-child {
+  margin-top: 0;
+}
+.markdown-editor .tiptap > :last-child {
+  margin-bottom: 0;
+}
+
 /* Lists — Notion uses tighter row spacing than browser default. */
 .markdown-editor .tiptap ul,
 .markdown-editor .tiptap ol {
@@ -246,9 +257,40 @@
   background: color-mix(in oklab, var(--color-primary, var(--primary)) 25%, transparent);
 }
 
-.markdown-editor .tiptap p.is-editor-empty:first-child::before {
+/* Empty-editor placeholder.
+ *
+ * TipTap's stock recipe paints the placeholder as a `float: left;
+ * height: 0` `::before`. That float reparents the empty paragraph's
+ * inline content box, and Chromium then renders the text caret of the
+ * (otherwise empty) `<p>` at a zero-height / clipped position behind the
+ * float — so the caret is INVISIBLE until the first character is typed
+ * (after a space it suddenly blinks). Standard chat composers
+ * (ChatGPT / Claude) show a blinking caret in the empty box.
+ *
+ * Fix: take the placeholder OUT of inline flow — `position: absolute` +
+ * `pointer-events: none`. The empty paragraph keeps its natural,
+ * full-line-height caret slot (so the caret blinks immediately), and the
+ * placeholder text simply overlays the same spot without ever covering
+ * the 1px caret (the caret paints on top of the absolutely-positioned,
+ * pointer-events-none pseudo). `caret-color` is forced to the foreground
+ * so it can never inherit `transparent`. */
+.markdown-editor .tiptap .ProseMirror,
+.markdown-editor .tiptap,
+.markdown-editor .ProseMirror {
+  caret-color: var(--color-foreground, var(--foreground));
+}
+
+.markdown-editor .tiptap p.is-editor-empty:first-child,
+.markdown-editor .ProseMirror p.is-editor-empty:first-child {
+  position: relative;
+}
+
+.markdown-editor .tiptap p.is-editor-empty:first-child::before,
+.markdown-editor .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
-  float: left;
+  position: absolute;
+  left: 0;
+  top: 0;
   pointer-events: none;
   height: 0;
   opacity: 0.4;
@@ -287,6 +329,96 @@
   display: inline;
 }
 
+/* ─────────────────────────────────────────────────────────────────────
+   Editor chip — the `editorChip` atom NODE. ONE component renders both a
+   file-path chip (`--path`) and a URL chip (`--url`); each shows an icon +
+   a VSCode-style middle-ellipsis label and serialises back to the raw
+   path / URL. Unlike the old decoration, the node OWNS its rendering, so a
+   long path collapses to one line (no wrap). It's an atom, so caret never
+   lands inside — `user-select: none`, whole-chip delete.
+   ───────────────────────────────────────────────────────────────────── */
+.markdown-editor .tiptap .editor-chip,
+.markdown-editor .ProseMirror .editor-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  max-width: 22rem;
+  vertical-align: baseline;
+  background: var(--color-muted, var(--muted));
+  color: var(--color-foreground, var(--foreground));
+  border: 1px solid var(--color-border, var(--border));
+  border-radius: 4px;
+  padding: 0 5px;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.85em;
+  line-height: 1.45;
+  white-space: nowrap;
+  text-decoration: none;
+  user-select: none;
+  cursor: default;
+}
+
+/* URL chip is clickable — pointer cursor, but keep the chip look (no blue
+   underline; the link accent lives on hover only). */
+.markdown-editor .tiptap a.editor-chip,
+.markdown-editor .ProseMirror a.editor-chip {
+  cursor: pointer;
+  color: var(--color-foreground, var(--foreground));
+}
+
+.markdown-editor .tiptap a.editor-chip:hover,
+.markdown-editor .ProseMirror a.editor-chip:hover {
+  border-color: var(--color-primary, var(--primary));
+}
+
+/* The middle-ellipsis label is precomputed; this is the CSS safety net for
+   an unusually long basename / slug. */
+.markdown-editor .tiptap .editor-chip__label,
+.markdown-editor .ProseMirror .editor-chip__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Leading icon box — fixed pixel size so the inner SVG (vendored FileIcon
+   markup, sized 100%) doesn't expand to the line box. */
+.markdown-editor .tiptap .editor-chip__icon,
+.markdown-editor .ProseMirror .editor-chip__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex: none;
+}
+
+.markdown-editor .tiptap .editor-chip__icon svg,
+.markdown-editor .ProseMirror .editor-chip__icon svg,
+.markdown-editor .tiptap .editor-chip__favicon,
+.markdown-editor .ProseMirror .editor-chip__favicon {
+  width: 14px;
+  height: 14px;
+  display: block;
+  flex: none;
+}
+
+.markdown-editor .tiptap .editor-chip__favicon,
+.markdown-editor .ProseMirror .editor-chip__favicon {
+  border-radius: 2px;
+}
+
+/* Folder glyph inherits the warning token tint (matches FileIcon). */
+.markdown-editor .tiptap .editor-chip__icon--folder,
+.markdown-editor .ProseMirror .editor-chip__icon--folder {
+  color: var(--color-warning, var(--warning, #d99a00));
+}
+
+/* URL icon (globe fallback) carries the link/primary accent. */
+.markdown-editor .tiptap .editor-chip__icon--globe,
+.markdown-editor .ProseMirror .editor-chip__icon--globe {
+  color: var(--color-primary, var(--primary));
+}
+
 /* Mention inline chip */
 .markdown-mention {
   background: var(--color-primary, var(--primary));