@heyramzi/ui 2.7.0 → 2.9.0

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}
@@ -67,7 +69,7 @@
 <style>
 	/* Never `:nth-child` here: one such rule makes every DOM insert on the page restyle its later siblings. */
 	:global(.t-empty) > :global(*) {
-		animation: t-empty-in var(--duration-very-slow) var(--ease-smooth-out) both;
+		animation: t-empty-in var(--duration-slow) var(--ease-smooth-out) both;
 		animation-delay: calc((sibling-index() - 1) * var(--duration-stagger));
 	}
 

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.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/design/index.css

@@ -93,12 +93,13 @@
   --duration-micro: 80ms;
   --duration-quick: 150ms; /* every close, text swap, tooltip in */
   --duration-fast: 250ms; /* every open, tabs, icon swap, page slide */
-  --duration-medium: 350ms; /* panel close, toast close */
-  --duration-slow: 400ms; /* panel open, skeleton reveal */
-  --duration-very-slow: 500ms; /* emphasis: badge, text reveal, success check */
+  --duration-medium: 280ms; /* panel close, toast close */
+  --duration-slow: 300ms; /* panel open, skeleton reveal, emphasis: badge, text reveal, success check. The UI ceiling. */
+  --duration-overlay: 500ms; /* modal, drawer, marketing explainer: the only place past 300ms */
+  --duration-loop: 500ms; /* one cycle of a spinner or flowing dash, not a transition */
 
   --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); /* all surface motion */
-  --ease-in-out: ease-in-out; /* swaps and cross-fades */
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* swaps, cross-fades, on-screen movement */
   --ease-out: ease-out; /* tooltips */
   --ease-linear: linear; /* shimmer, pulse, spinner */
 
@@ -147,7 +148,8 @@
   --transition-duration-fast: var(--duration-fast);
   --transition-duration-medium: var(--duration-medium);
   --transition-duration-slow: var(--duration-slow);
-  --transition-duration-very-slow: var(--duration-very-slow);
+  --transition-duration-overlay: var(--duration-overlay);
+  --transition-duration-loop: var(--duration-loop);
 }
 
 /* Each bits-ui variant matches v2's `data-open` and v1's `data-state`, and ships

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;
+          },
+        },
+      }),
+    ];
+  },
+});