@heyramzi/ui 2.8.0 → 2.9.0

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

package/src/editor/doc-page.css

@@ -0,0 +1,389 @@
+/* A document's type, scoped to `.doc-surface` so other editors keep theirs: 15/24 body,
+   19 and 17 for the two heading steps. */
+
+.doc-surface .tiptap {
+  font-family: var(--font-sans);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  font-weight: 450;
+  letter-spacing: -0.003em;
+  color: var(--color-foreground);
+  caret-color: var(--color-brand);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* The page is the writing surface, so it takes no ring of its own; the caret is the focus. */
+.doc-surface .tiptap:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.doc-surface .tiptap :is(h1, h2, h3, h4) {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  letter-spacing: -0.012em;
+  color: var(--color-foreground);
+  scroll-margin-top: 1.5rem;
+}
+
+.doc-surface .tiptap h1 {
+  font-size: 1.375rem;
+  line-height: calc(28 / 22);
+  margin: 2.25rem 0 0.5rem;
+}
+
+.doc-surface .tiptap h2 {
+  font-size: 1.1875rem;
+  line-height: calc(26 / 19);
+  margin: 2rem 0 0.375rem;
+}
+
+.doc-surface .tiptap h3 {
+  font-size: 1.0625rem;
+  line-height: calc(24 / 17);
+  margin: 1.5rem 0 0.25rem;
+}
+
+.doc-surface .tiptap h4 {
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin: 1.25rem 0 0.25rem;
+}
+
+.doc-surface .tiptap > :first-child {
+  margin-top: 0;
+}
+
+.doc-surface .tiptap p {
+  margin: 0 0 0.5rem;
+}
+
+.doc-surface .tiptap :is(ul, ol) {
+  margin: 0 0 0.5rem;
+  padding-left: 1.5rem;
+}
+
+.doc-surface .tiptap li {
+  margin: 0;
+}
+
+.doc-surface .tiptap li > p {
+  margin: 0;
+}
+
+.doc-surface .tiptap li::marker {
+  color: var(--color-muted-foreground);
+}
+
+.doc-surface .tiptap a {
+  color: var(--color-foreground);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in oklab, var(--color-foreground) 35%, transparent);
+  text-underline-offset: 3px;
+}
+
+.doc-surface .tiptap :not(pre) > code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  padding: 0.1em 0.35em;
+  border-radius: var(--radius-xs);
+  background: color-mix(in oklab, var(--color-foreground) 7%, transparent);
+}
+
+.doc-surface .tiptap blockquote {
+  margin: 0.75rem 0;
+  padding-left: 1rem;
+  font-style: normal;
+  color: var(--color-foreground);
+}
+
+.doc-surface .tiptap blockquote::before {
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: color-mix(in oklab, var(--color-foreground) 22%, transparent);
+}
+
+.doc-surface .tiptap hr {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+  margin: 1.5rem 0;
+}
+
+/* ---- Checklist ---- */
+.doc-surface .tiptap ul[data-type="taskList"] {
+  list-style: none;
+  padding-left: 0;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] ul[data-type="taskList"] {
+  padding-left: 1.625rem;
+  margin-bottom: 0;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li > label {
+  position: relative;
+  display: flex;
+  height: 1.5rem;
+  align-items: center;
+  user-select: none;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li > div {
+  min-width: 0;
+  flex: 1;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li input[type="checkbox"] {
+  appearance: none;
+  margin: 0;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  border: 1.5px solid color-mix(in oklab, var(--color-foreground) 32%, transparent);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0.75rem;
+  transition:
+    background-color var(--duration-fast) var(--ease-smooth-out),
+    border-color var(--duration-fast) var(--ease-smooth-out);
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li input[type="checkbox"]:checked {
+  border-color: var(--color-brand);
+  background-color: var(--color-brand);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4 5 8.8l4.5-5'/%3E%3C/svg%3E");
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li input[type="checkbox"]:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--color-brand) 55%, transparent);
+  outline-offset: 2px;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li[data-checked="true"] > div {
+  color: var(--color-muted-foreground);
+}
+
+/* ---- Table ---- */
+.doc-surface .tiptap .tableWrapper {
+  overflow-x: auto;
+  margin: 0.75rem 0 1rem;
+}
+
+.doc-surface .tiptap table {
+  width: 100%;
+  margin: 0.75rem 0 1rem;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-size: 0.875rem;
+  line-height: calc(20 / 14);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.doc-surface .tiptap .tableWrapper table {
+  margin: 0;
+}
+
+.doc-surface .tiptap :is(th, td) {
+  position: relative;
+  padding: 0.5rem 0.75rem;
+  vertical-align: top;
+  text-align: left;
+  border-right: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.doc-surface .tiptap :is(th, td):last-child {
+  border-right: 0;
+}
+
+.doc-surface .tiptap tr:last-child > :is(th, td) {
+  border-bottom: 0;
+}
+
+/* Beats the blog renderer's uppercase header row and bold first column. */
+.doc-surface .tiptap table tr > :is(th, td) {
+  font-size: 0.875rem;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  background: transparent;
+  color: var(--color-foreground);
+}
+
+.doc-surface .tiptap table tr > th {
+  font-weight: 550;
+  background: color-mix(in oklab, var(--color-foreground) 3.5%, transparent);
+}
+
+.doc-surface .tiptap table tr:not(:first-child) > td:first-child {
+  font-weight: 400;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .doc-surface .tiptap table tr:hover > td {
+    background: transparent;
+  }
+}
+
+.doc-surface .tiptap :is(th, td) > p {
+  margin: 0;
+}
+
+.doc-surface .tiptap .selectedCell::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: color-mix(in oklab, var(--color-brand) 14%, transparent);
+}
+
+/* ---- Code block: line numbers, language label ---- */
+.doc-surface .tiptap pre {
+  position: relative;
+  margin: 0.75rem 0 1rem;
+  padding: 0.75rem 1rem 0.75rem 3.25rem;
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: color-mix(in oklab, var(--color-foreground) 3%, transparent);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: calc(20 / 13);
+  font-weight: 400;
+  tab-size: 2;
+}
+
+.doc-surface .tiptap pre::before {
+  content: attr(data-lines);
+  position: absolute;
+  top: 0.75rem;
+  left: 0;
+  width: 2.25rem;
+  white-space: pre;
+  text-align: right;
+  color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  user-select: none;
+}
+
+.doc-surface .tiptap pre code {
+  display: block;
+  min-width: max-content;
+  font-size: inherit;
+  background: none;
+  padding: 0;
+}
+
+.doc-surface .tiptap .code-language {
+  position: absolute;
+  top: 0.375rem;
+  right: 0.5rem;
+  appearance: none;
+  height: 1.375rem;
+  padding: 0 0.5rem;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--color-muted-foreground);
+  font-family: var(--font-sans);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity var(--duration-fast) var(--ease-smooth-out),
+    background-color var(--duration-fast) var(--ease-smooth-out);
+}
+
+.doc-surface .tiptap pre:focus-within .code-language,
+.doc-surface .tiptap .code-language:focus-visible {
+  opacity: 1;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .doc-surface .tiptap pre:hover .code-language {
+    opacity: 1;
+  }
+
+  .doc-surface .tiptap .code-language:hover {
+    background: color-mix(in oklab, var(--color-foreground) 7%, transparent);
+    color: var(--color-foreground);
+  }
+}
+
+@media (hover: none) {
+  .doc-surface .tiptap .code-language {
+    opacity: 1;
+  }
+}
+
+/* ---- Heading anchor ---- */
+.doc-surface .tiptap .heading-anchor {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  margin-left: 0.625rem;
+  padding: 0 0.375rem;
+  height: 1.25rem;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--color-muted-foreground);
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 450;
+  letter-spacing: 0;
+  vertical-align: 0.1em;
+  cursor: pointer;
+  opacity: 0;
+  user-select: none;
+  transition:
+    opacity var(--duration-fast) var(--ease-smooth-out),
+    color var(--duration-fast) var(--ease-smooth-out);
+}
+
+.doc-surface .tiptap .heading-anchor[data-copied="true"] {
+  color: var(--color-brand);
+  opacity: 1;
+}
+
+.doc-surface .tiptap .heading-anchor:focus-visible {
+  opacity: 1;
+  outline: 2px solid color-mix(in oklab, var(--color-brand) 55%, transparent);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .doc-surface .tiptap .has-anchor:hover .heading-anchor {
+    opacity: 1;
+  }
+
+  .doc-surface .tiptap .heading-anchor:hover {
+    color: var(--color-foreground);
+  }
+}
+
+@media (hover: none) {
+  .doc-surface .tiptap .heading-anchor {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .doc-surface .tiptap :is(.heading-anchor, .code-language, input[type="checkbox"]) {
+    transition: none;
+  }
+}