@heyramzi/ui 2.8.0 → 2.10.0

package/src/charts/line-chart.svelte

@@ -117,6 +117,16 @@
 	const fadeMask = $derived(fade > 0 ? `url(#${uid}-fade)` : undefined);
 	const fallback = $derived(data.length > 0 ? data[data.length - 1] : null);
 	const display = $derived(active ?? fallback);
+
+	// A long tick label ("1,000,000") falls back to "1M" so the left gutter holds it.
+	const compact = new Intl.NumberFormat(undefined, {
+		notation: "compact",
+		maximumFractionDigits: 1,
+	});
+	function valueTick(v: number): string {
+		const full = formatValue(v);
+		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
+	}
 	// WHY: a dashed tail is two splines sharing the boundary point so the solid
 	// and dashed segments meet without a gap.
 	const hasTail = $derived(
@@ -189,7 +199,7 @@
 				motion={DOMAIN_MOTION}
 			>
 				<Svg>
-					<Axis placement="left" format={(v) => formatValue(Number(v))} ticks={4} />
+					<Axis placement="left" format={(v) => valueTick(Number(v))} ticks={4} />
 					<Axis placement="bottom" format={(v) => formatX(v)} />
 					<g class="hr-line-grid">
 						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />

package/src/components/data-table/data-table.ts

@@ -69,9 +69,8 @@ export function totalPages(total: number, pageSize: number): number {
 
 export function formatCount(visible: number, total: number, label: string): string {
   const singular = label.endsWith("s") ? label.slice(0, -1) : label;
-  if (visible === total) {
-    const displayLabel = visible === 1 ? singular : label;
-    return `${total} ${displayLabel}`;
-  }
-  return `${visible} of ${total} ${label}`;
+  // The noun agrees with the total: "0 of 1 item", not "0 of 1 items".
+  const noun = total === 1 ? singular : label;
+  if (visible === total) return `${total.toLocaleString()} ${noun}`;
+  return `${visible.toLocaleString()} of ${total.toLocaleString()} ${noun}`;
 }

package/src/components/data-table/pagination.svelte

@@ -26,7 +26,9 @@
 
 {#if pages > 1}
 	<div class="flex items-center justify-between border-t px-4 py-3 text-sm text-muted-foreground">
-		<span>{start}-{end} of {total}</span>
+		<span class="tabular-nums"
+			>{start.toLocaleString()}-{end.toLocaleString()} of {total.toLocaleString()}</span
+		>
 		<div class="flex items-center gap-1">
 			{#if buildHref}
 				{#if hasPrev}
@@ -38,7 +40,7 @@
 						<CaretLeft class="size-4" />
 					</Button>
 				{/if}
-				<span class="mx-2 tabular-nums">{page} / {pages}</span>
+				<span class="mx-2 tabular-nums">{page.toLocaleString()} / {pages.toLocaleString()}</span>
 				{#if hasNext}
 					<Button variant="outline" size="sm" icon href={buildHref(page + 1)}>
 						<CaretRight class="size-4" />
@@ -58,7 +60,7 @@
 				>
 					<CaretLeft class="size-4" />
 				</Button>
-				<span class="mx-2 tabular-nums">{page} / {pages}</span>
+				<span class="mx-2 tabular-nums">{page.toLocaleString()} / {pages.toLocaleString()}</span>
 				<Button
 					variant="outline"
 					size="sm"

package/src/components/docs/on-this-page.svelte

@@ -17,10 +17,10 @@
 		label: string;
 		onselect: (id: string) => void;
 		/**
-		 * `rail` is the column beside the document. `bar` is the strip that takes
-		 * its place on a narrow pane: it names where you are and opens the list.
+		 * `rail` sits beside the document, `bar` replaces it on a narrow pane, and `ticks` marks
+		 * each heading in the gutter with a card of headings on hover or focus.
 		 */
-		variant?: "rail" | "bar";
+		variant?: "rail" | "bar" | "ticks";
 	}
 
 	// =========================
@@ -28,6 +28,10 @@
 	// =========================
 	let { items, active, label, onselect, variant = "rail" }: Props = $props();
 
+	let hovering = $state(false);
+	let focusing = $state(false);
+	let showCard = $derived(hovering || focusing);
+
 	// =========================
 	// STATE
 	// =========================
@@ -101,7 +105,63 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-{#if variant === "rail"}
+{#if variant === "ticks"}
+	<nav
+		aria-label={label}
+		class="otp-ticks relative"
+		onpointerenter={() => (hovering = true)}
+		onpointerleave={() => (hovering = false)}
+		onfocusin={() => (focusing = true)}
+		onfocusout={(event) => {
+			if (!event.currentTarget.contains(event.relatedTarget as Node | null)) focusing = false;
+		}}
+	>
+		<ul class="flex flex-col py-2">
+			{#each items as item (item.id)}
+				{@const current = item.id === active}
+				<li>
+					<button
+						type="button"
+						aria-label={item.label}
+						aria-current={current ? "location" : undefined}
+						onclick={() => pick(item.id)}
+						class="otp-tick group/tick flex h-3.5 w-7 items-center pl-2 any-pointer-coarse:h-6"
+					>
+						<span
+							class="block h-0.5 rounded-full transition-[width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] {current
+								? 'w-3 bg-foreground'
+								: 'w-2 bg-foreground/25 group-hover/tick:bg-foreground/60'}"
+						></span>
+					</button>
+				</li>
+			{/each}
+		</ul>
+		<!-- The card starts inside the nav's own box, so moving from a tick onto it never leaves
+		     the hover. Rows are for the pointer; the ticks are the keyboard path. -->
+		<div
+			inert={!showCard}
+			data-open={showCard}
+			class="otp-card thin-scrollbar absolute left-full top-1/2 z-30 max-h-[min(70svh,28rem)] w-max min-w-44 max-w-64 overflow-y-auto rounded-xl bg-popover p-1.5 shadow-raised ring-1 ring-foreground/10"
+		>
+			{#each items as item (item.id)}
+				{@const current = item.id === active}
+				<button
+					type="button"
+					tabindex="-1"
+					onclick={() => pick(item.id)}
+					class="block w-full truncate rounded-md py-1 pr-3 text-left text-[13px] leading-5 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] hover:bg-foreground/6 {item.level ===
+					3
+						? 'pl-5'
+						: 'pl-2'} {current
+						? 'font-medium text-foreground'
+						: 'text-muted-foreground hover:text-foreground'}"
+				>
+					{item.label}
+				</button>
+			{/each}
+		</div>
+	</nav>
+{:else if variant === "rail"}
 	<nav aria-label={label} class="flex max-h-[calc(100svh-8rem)] flex-col gap-3">
 		<!-- Set like the map's own headings on the left, so the two rails read as one. -->
 		<p class="font-heading text-xs font-semibold uppercase tracking-wider text-muted-foreground">
@@ -221,9 +281,26 @@
 		);
 	}
 
+	/* Opacity and a short slide, no scale: the card is anchored to a line of ticks. */
+	.otp-card {
+		opacity: 0;
+		translate: -4px -50%;
+		pointer-events: none;
+		transition:
+			opacity var(--duration-fast) var(--ease-smooth-out),
+			translate var(--duration-fast) var(--ease-smooth-out);
+	}
+
+	.otp-card[data-open="true"] {
+		opacity: 1;
+		translate: 0 -50%;
+		pointer-events: auto;
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.otp-marker.is-ready,
-		.otp-progress {
+		.otp-progress,
+		.otp-card {
 			transition: none;
 		}
 	}

package/src/components/docs/scroll-spy.svelte.ts

@@ -3,7 +3,12 @@
  * side rail and the compact bar, so the two can never disagree.
  */
 
-export type DocHeading = { id: string; label: string };
+export type DocHeading = {
+  id: string;
+  label: string;
+  /** 2 or 3. A list with no levels is flat; the edge ticks indent a 3 under its 2. */
+  level?: 2 | 3;
+};
 
 /**
  * A heading's offset in scroller coordinates. A framed document must supply its own, since

package/src/components/list-page/detail-header.svelte

@@ -77,14 +77,18 @@
 			     flex sibling it wrapped to its own row on every two-line title. -->
 			<!-- No text-balance: it evens the lines out, so a two-line title stopped
 			     short of the corner instead of running the full width. -->
-			<h2 class="min-w-0 font-heading text-lg font-semibold leading-snug tracking-tight">
+			<h2
+				class="min-w-0 font-heading text-lg [overflow-wrap:anywhere] font-semibold leading-snug tracking-tight"
+			>
 				{title}{#if badge}<span class="ms-2 inline-flex align-middle">{@render badge()}</span>{/if}
 			</h2>
 			{#if facts.length > 0}
 				<!-- Each dot hangs off the fact it leads, so a wrapped line's dot stays
 				     in the gutter. A standalone flex-item dot dangled on the line above. -->
 				<div class="mt-1 overflow-hidden">
-					<p class="-ms-3 flex flex-wrap items-center text-sm text-muted-foreground">
+					<p
+						class="-ms-3 flex flex-wrap items-center text-sm text-muted-foreground [overflow-wrap:anywhere]"
+					>
 						{#each facts as fact, i (i)}
 							<span
 								class="relative ps-3 before:absolute before:start-1 before:opacity-40 before:content-['·']"
@@ -95,7 +99,7 @@
 				</div>
 			{/if}
 			{#if note}
-				<p class="mt-1 text-sm text-muted-foreground">{note}</p>
+				<p class="mt-1 text-sm text-muted-foreground [overflow-wrap:anywhere]">{note}</p>
 			{/if}
 			<!-- With a picture or a corner, actions sit in this column. Pinned right
 			     they wrapped under the picture and read like its caption. -->

package/src/components/list-page/empty-state.svelte

@@ -45,7 +45,9 @@
 				<Icon weight={iconWeight} class="size-8" />
 			</Empty.Media>
 		{/if}
-		<Empty.Title class="font-heading text-lg font-semibold">{title}</Empty.Title>
+		<Empty.Title class="font-heading text-lg font-semibold [overflow-wrap:anywhere]"
+			>{title}</Empty.Title
+		>
 		{#if description}
 			<Empty.Description>{description}</Empty.Description>
 		{/if}

package/src/components/list-page/filter-popover.svelte

@@ -71,9 +71,9 @@
 		{/if}
 		{#if hasCount}
 			<span
-				class="ml-0.5 inline-flex size-4 items-center justify-center rounded-full bg-brand/15 text-[10px] font-semibold text-brand dark:text-brand-light"
+				class="ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-brand/15 px-1 text-[10px] tabular-nums font-semibold text-brand dark:text-brand-light"
 			>
-				{count}
+				{count.toLocaleString()}
 			</span>
 		{/if}
 	</Popover.Trigger>

package/src/components/list-page/rail-row.svelte

@@ -122,6 +122,7 @@
 					titleLines === 2 ? "line-clamp-2" : "truncate",
 					selected && "text-accent-foreground",
 				)}
+				{title}
 			>
 				{title}
 			</span>
@@ -130,7 +131,7 @@
 			{#if preview || trailing}
 				<span class="flex min-w-0 items-center text-xs text-muted-foreground">
 					{#if preview}
-						<span class="truncate">{preview}</span>
+						<span class="truncate" title={preview}>{preview}</span>
 					{/if}
 					{#if trailing}
 						<span class="ml-auto flex shrink-0 items-center gap-1.5 pl-2">{@render trailing()}</span
@@ -146,7 +147,9 @@
 						{/if}
 						{@const flexible =
 							facts.length > 1 && i === (metaTruncate === "last" ? facts.length - 1 : 0)}
-						<span class={flexible ? "truncate" : "shrink-0"}>{fact}</span>
+						<span class={flexible ? "truncate" : "shrink-0"} title={flexible ? fact : undefined}
+							>{fact}</span
+						>
 					{/each}
 					{#if metaTrail}
 						<span class="ml-1.5 flex shrink-0 items-center gap-1">{@render metaTrail()}</span>

package/src/components/mark/mark.svelte

@@ -3,6 +3,7 @@
 	// IMPORTS
 	// =========================
 	import { cn } from "../../lib/utils.js";
+	import { initial } from "../../lib/initials.js";
 
 	// =========================
 	// TYPES
@@ -61,6 +62,6 @@
 			className,
 		)}
 	>
-		{label.charAt(0)}
+		{initial(label, "")}
 	</span>
 {/if}

package/src/components/section-card/section-card.svelte

@@ -32,7 +32,9 @@
 <!-- =========================== -->
 <Card.Root class={cn("gap-0 py-0", className)}>
 	<header class="flex min-h-14 items-center justify-between gap-3 border-b px-4 py-3 sm:px-6">
-		<Card.Title as="h3" class="text-base font-medium">{title}</Card.Title>
+		<Card.Title as="h3" class="min-w-0 text-base font-medium [overflow-wrap:anywhere]"
+			>{title}</Card.Title
+		>
 		{#if actions}
 			<div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
 		{/if}

package/src/components/section-header/section-header.svelte

@@ -34,18 +34,18 @@
 <header class="flex items-end justify-between gap-3">
 	<div class="min-w-0 space-y-1">
 		<svelte:element this={`h${level}`} class="flex items-center gap-2">
-			<SectionLabel>{title}</SectionLabel>
+			<SectionLabel class="min-w-0 [overflow-wrap:anywhere]">{title}</SectionLabel>
 			{#if count !== undefined}
 				<span
-					class="rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none font-medium tabular-nums text-muted-foreground"
-					aria-label={`${count} ${countLabel}`}
+					class="shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none font-medium tabular-nums text-muted-foreground"
+					aria-label={`${count.toLocaleString()} ${countLabel}`}
 				>
-					{count}
+					{count.toLocaleString()}
 				</span>
 			{/if}
 		</svelte:element>
 		{#if description}
-			<p class="text-sm text-muted-foreground">{description}</p>
+			<p class="text-sm text-muted-foreground [overflow-wrap:anywhere]">{description}</p>
 		{/if}
 	</div>
 	{#if actions}

package/src/components/segmented/segment.svelte

@@ -95,7 +95,7 @@
 				"group-data-[state=active]/segment:bg-brand/14 group-data-[state=active]/segment:text-brand",
 		)}
 	>
-		{count}
+		{count.toLocaleString()}
 	</span>
 {:else if done}
 	<span

package/src/components/table-view/table-view.svelte

@@ -154,6 +154,11 @@
 	function textOf(column: TableColumn<Row>, row: Row): string {
 		const value = (row as Record<string, unknown>)[key(column)];
 		if (column.format) return column.format(value, row);
+		// WHY: a raw 1284 or 0.30000000000000004 in an amount column. Only `numeric`
+		// columns: an unformatted year or id must print as it is.
+		if (column.numeric && typeof value === "number") {
+			return Number.isFinite(value) ? value.toLocaleString() : "";
+		}
 		return value === null || value === undefined ? "" : String(value);
 	}
 
@@ -227,7 +232,7 @@
 		<Table.Cell
 			class={cn(
 				"align-top",
-				column.numeric ? "text-end tabular-nums" : "whitespace-normal",
+				column.numeric ? "text-end tabular-nums" : "whitespace-normal [overflow-wrap:anywhere]",
 				column.muted && "text-muted-foreground",
 				column.interactive && "relative z-10",
 				column.hideBelow && HIDE[column.hideBelow],

package/src/components/tags-input/tags-input.svelte

@@ -198,7 +198,7 @@
 			removable ? "rounded-(--radius-xs) pr-0.5" : "rounded-(--radius-sm)",
 		)}
 	>
-		<span class="truncate">{tag}</span>
+		<span class="truncate" title={tag}>{tag}</span>
 		{#if removable}
 			<button
 				type="button"

package/src/components/toolbar/toolbar-trigger.ts

@@ -15,9 +15,15 @@ export function toolbarTriggerClass({
   className,
 }: ToolbarTriggerOpts = {}): string {
   return cn(
-    "inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-border font-medium transition-colors active:translate-y-px",
+    // The outline button's edge: a real border plus the resting shadow. A `ring-1` hairline
+    // shares box-shadow with `shadow-btn` and drew a broken edge beside Display (26 Oct 2026).
+    "t-press inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-border font-medium shadow-btn transition-[background-color,border-color,color] duration-quick ease-smooth-out hover:border-foreground/15 motion-reduce:transition-none",
     "h-7 px-2.5 text-xs any-pointer-coarse:h-11 any-pointer-coarse:px-3",
-    active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground",
+    // Active is a selected state, so it may tint; the tint reads off the foreground and
+    // shows on the canvas, where bg-muted vanished.
+    active
+      ? "bg-foreground/6 text-foreground"
+      : "bg-card text-muted-foreground hover:bg-foreground/3 hover:text-foreground",
     className,
   );
 }

package/src/components/toolbar/toolbar.svelte

@@ -115,7 +115,7 @@
 								{item.label}
 								{#if item.count != null}
 									<span class="ms-auto pe-2 text-xs text-muted-foreground tabular-nums"
-										>{item.count}</span
+										>{item.count.toLocaleString()}</span
 									>
 								{/if}
 							</DropdownMenu.RadioItem>

package/src/editor/anchors.ts

@@ -0,0 +1,28 @@
+/** Heading anchors: one slug per heading, unique within a document. Pure. */
+
+/** Lowercase, words joined by `-`, accents dropped. An empty result is `section`. */
+export function slugify(text: string): string {
+  const slug = text
+    .normalize("NFKD")
+    .replace(/[̀-ͯ]/g, "")
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}]+/gu, "-")
+    .replace(/^-+|-+$/g, "");
+  return slug || "section";
+}
+
+/** One unique anchor per label, in order: a repeat becomes `name-2`, `name-3`. */
+export function anchorIds(labels: string[]): string[] {
+  const seen = new Map<string, number>();
+  const taken = new Set<string>();
+  return labels.map((label) => {
+    const base = slugify(label);
+    let count = (seen.get(base) ?? 0) + 1;
+    let id = count === 1 ? base : `${base}-${count}`;
+    // A heading literally called "Setup 2" must not steal the second "Setup".
+    while (taken.has(id)) id = `${base}-${++count}`;
+    seen.set(base, count);
+    taken.add(id);
+    return id;
+  });
+}

package/src/editor/doc-blocks.ts

@@ -0,0 +1,168 @@
+/**
+ * Heading anchors with a hover "Copy link", and code blocks with line numbers and a language
+ * label. Both are decorations, so the document stays plain Tiptap JSON.
+ */
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { anchorIds } from "./anchors.js";
+
+const LINK_ICON = `<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M240 88.23a54.43 54.43 0 0 1-16 37L189.25 160a54.27 54.27 0 0 1-38.63 16h-.05A54.63 54.63 0 0 1 96 119.84a8 8 0 0 1 16 .45A38.62 38.62 0 0 0 150.58 160a38.4 38.4 0 0 0 27.31-11.31l34.75-34.75a38.63 38.63 0 0 0-54.63-54.63l-11 11A8 8 0 0 1 135.7 59l11-11a54.65 54.65 0 0 1 77.3 0A54.86 54.86 0 0 1 240 88.23ZM109 185.66l-11 11A38.41 38.41 0 0 1 70.6 208a38.63 38.63 0 0 1-27.29-65.94L78 107.31a38.63 38.63 0 0 1 54.63 0 8 8 0 0 0 11.31-11.31 54.65 54.65 0 0 0-77.3 0L32 130.75A54.62 54.62 0 0 0 70.56 224a54.28 54.28 0 0 0 38.64-16l11-11a8 8 0 0 0-11.2-11.34Z"/></svg>`;
+
+export type HeadingAnchorsOptions = {
+  /** The word on the hover button. */
+  label: string;
+  /** Runs after the link is copied; a host shows a toast here. */
+  oncopy?: (url: string, id: string) => void;
+};
+
+const anchorsKey = new PluginKey("headingAnchors");
+
+/** Gives every heading an `id` and a hover "Copy link" that copies a URL to that section. */
+export const HeadingAnchors = Extension.create<HeadingAnchorsOptions>({
+  name: "headingAnchors",
+
+  addOptions() {
+    return { label: "Copy link", oncopy: undefined };
+  },
+
+  addProseMirrorPlugins() {
+    const options = this.options;
+    return [
+      new Plugin({
+        key: anchorsKey,
+        props: {
+          decorations(state) {
+            const found: { pos: number; size: number; label: string }[] = [];
+            state.doc.descendants((node, pos) => {
+              if (node.type.name !== "heading") return;
+              found.push({ pos, size: node.nodeSize, label: node.textContent.trim() });
+            });
+            if (found.length === 0) return DecorationSet.empty;
+            const ids = anchorIds(found.map((heading) => heading.label));
+            const decorations = found.flatMap((heading, i) => {
+              const id = ids[i];
+              return [
+                Decoration.node(heading.pos, heading.pos + heading.size, {
+                  id,
+                  class: "has-anchor",
+                }),
+                Decoration.widget(
+                  heading.pos + heading.size - 1,
+                  () => {
+                    const button = document.createElement("button");
+                    button.type = "button";
+                    button.className = "heading-anchor";
+                    button.contentEditable = "false";
+                    button.innerHTML = `${LINK_ICON}<span>${options.label}</span>`;
+                    button.addEventListener("mousedown", (event) => event.preventDefault());
+                    button.addEventListener("click", () => {
+                      const { origin, pathname, search } = window.location;
+                      const url = `${origin}${pathname}${search}#${id}`;
+                      void navigator.clipboard?.writeText(url).catch(() => {});
+                      button.dataset.copied = "true";
+                      setTimeout(() => delete button.dataset.copied, 1400);
+                      options.oncopy?.(url, id);
+                    });
+                    return button;
+                  },
+                  { side: 1, key: `anchor-${id}`, ignoreSelection: true },
+                ),
+              ];
+            });
+            return DecorationSet.create(state.doc, decorations);
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export type CodeLanguage = { value: string; label: string };
+
+export const CODE_LANGUAGES: CodeLanguage[] = [
+  { value: "", label: "Plain text" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "javascript", label: "JavaScript" },
+  { value: "svelte", label: "Svelte" },
+  { value: "html", label: "HTML" },
+  { value: "css", label: "CSS" },
+  { value: "json", label: "JSON" },
+  { value: "bash", label: "Bash" },
+  { value: "sql", label: "SQL" },
+  { value: "python", label: "Python" },
+  { value: "markdown", label: "Markdown" },
+];
+
+/** "1\n2\n3" for a block of three lines: the gutter, which CSS prints beside the code. */
+export function lineNumbers(code: string): string {
+  const count = code.split("\n").length;
+  return Array.from({ length: count }, (_, i) => i + 1).join("\n");
+}
+
+const codeKey = new PluginKey("codeBlockChrome");
+
+/** Line numbers in a gutter and a language picker in the corner of every code block. */
+export const CodeBlockChrome = Extension.create({
+  name: "codeBlockChrome",
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: codeKey,
+        props: {
+          decorations(state) {
+            const decorations: Decoration[] = [];
+            state.doc.descendants((node, pos) => {
+              if (node.type.name !== "codeBlock") return;
+              const language = typeof node.attrs.language === "string" ? node.attrs.language : "";
+              decorations.push(
+                Decoration.node(pos, pos + node.nodeSize, {
+                  "data-lines": lineNumbers(node.textContent),
+                }),
+                Decoration.widget(
+                  pos + 1,
+                  (view, getPos) => {
+                    const select = document.createElement("select");
+                    select.className = "code-language";
+                    select.contentEditable = "false";
+                    select.setAttribute("aria-label", "Language");
+                    const known = CODE_LANGUAGES.some((item) => item.value === language);
+                    const options = known
+                      ? CODE_LANGUAGES
+                      : [...CODE_LANGUAGES, { value: language, label: language }];
+                    for (const item of options) {
+                      const option = document.createElement("option");
+                      option.value = item.value;
+                      option.textContent = item.label;
+                      option.selected = item.value === language;
+                      select.append(option);
+                    }
+                    select.addEventListener("mousedown", (event) => event.stopPropagation());
+                    select.addEventListener("change", () => {
+                      const at = (getPos() ?? 1) - 1;
+                      const target = view.state.doc.nodeAt(at);
+                      if (!target) return;
+                      view.dispatch(
+                        view.state.tr.setNodeMarkup(at, undefined, {
+                          ...target.attrs,
+                          language: select.value || null,
+                        }),
+                      );
+                      view.focus();
+                    });
+                    return select;
+                  },
+                  { side: -1, key: `lang-${pos}-${language}`, stopEvent: () => true },
+                ),
+              );
+            });
+            return decorations.length
+              ? DecorationSet.create(state.doc, decorations)
+              : DecorationSet.empty;
+          },
+        },
+      }),
+    ];
+  },
+});