@eocrm/design-system 0.8.0 → 0.8.2

package/AI-PRIMER.md

@@ -96,7 +96,7 @@ Each `<Name>` below is documented in `docs/components/<Name>.md`.
 - `ImageCrop` — controlled image cropper
 - `Card` — bordered container
 - `DefinitionList` — semantic key/value pairs (dl / dt / dd)
-- `List` — bulleted / numbered prose lists (ul / ol), optional badge step numbers
+- `List` — bulleted / numbered / `plain` (marker-less, for interactive rows) lists (ul / ol), optional badge step numbers
 - `Stack` — vertical layout
 - `Page` — page-root layout primitive
 - `Cluster` — horizontal layout that wraps

package/dist/components/DashboardCanvas/DashboardCanvas.js

@@ -150,12 +150,21 @@ var DashboardCanvas = forwardRef(function DashboardCanvas({ value, onChange, ren
 	};
 	const isPortalEvent = (event) => !(event.target instanceof Node) || !rootRef.current?.contains(event.target);
 	const underOpenOverlay = () => overlayStack.topDepth() > 0 && !rootRef.current?.closest(OVERLAY_HOST_SELECTOR);
-	const armPendingRelease = (drag) => {
+	const armRelease = (drag) => {
 		const release = (event) => {
 			if (event.pointerId !== drag.pointerId) return;
 			window.removeEventListener("pointerup", release, true);
 			window.removeEventListener("pointercancel", release, true);
-			if (dragRef.current === drag && !drag.moved) dragRef.current = null;
+			if (dragRef.current !== drag) return;
+			if (drag.kind !== "resize" && !drag.moved) {
+				dragRef.current = null;
+				return;
+			}
+			setTimeout(() => {
+				if (dragRef.current !== drag) return;
+				dragRef.current = null;
+				setLive(null);
+			});
 		};
 		window.addEventListener("pointerup", release, true);
 		window.addEventListener("pointercancel", release, true);
@@ -185,13 +194,14 @@ var DashboardCanvas = forwardRef(function DashboardCanvas({ value, onChange, ren
 			preview: null
 		};
 		dragRef.current = drag;
-		armPendingRelease(drag);
+		armRelease(drag);
 	};
 	const onResizePointerDown = (event, placement, container, edge) => {
 		if (!editingEnabled || event.button !== 0 || dragRef.current || pick) return;
 		if (isPortalEvent(event) || underOpenOverlay()) return;
 		event.stopPropagation();
-		dragRef.current = {
+		event.preventDefault();
+		const drag = {
 			kind: "resize",
 			pointerId: event.pointerId,
 			id: placement.id,
@@ -206,11 +216,14 @@ var DashboardCanvas = forwardRef(function DashboardCanvas({ value, onChange, ren
 			lastH: placement.h,
 			preview: null
 		};
+		dragRef.current = drag;
+		armRelease(drag);
 		capturePointer(rootRef.current, event.pointerId);
 	};
 	const onHeaderPointerDown = (event, sectionId) => {
 		if (!editingEnabled || event.button !== 0 || dragRef.current || pick) return;
 		if (isPortalEvent(event) || underOpenOverlay()) return;
+		event.preventDefault();
 		const fromIndex = value.sections.findIndex((section) => section.id === sectionId);
 		if (fromIndex === -1) return;
 		const drag = {
@@ -224,7 +237,7 @@ var DashboardCanvas = forwardRef(function DashboardCanvas({ value, onChange, ren
 			slot: fromIndex
 		};
 		dragRef.current = drag;
-		armPendingRelease(drag);
+		armRelease(drag);
 	};
 	const handleRootPointerMove = (event) => {
 		onPointerMoveProp?.(event);
@@ -234,6 +247,7 @@ var DashboardCanvas = forwardRef(function DashboardCanvas({ value, onChange, ren
 			if (!drag.moved) {
 				if (isPortalEvent(event) || Math.abs(event.clientX - drag.startX) + Math.abs(event.clientY - drag.startY) < DRAG_ACTIVATION_PX) return;
 				drag.moved = true;
+				window.getSelection()?.removeAllRanges();
 				capturePointer(rootRef.current, event.pointerId);
 			}
 			for (const entry of containersRef.current.values()) {
@@ -299,6 +313,7 @@ var DashboardCanvas = forwardRef(function DashboardCanvas({ value, onChange, ren
 		if (!drag.moved) {
 			if (isPortalEvent(event) || Math.abs(event.clientX - drag.startX) + Math.abs(event.clientY - drag.startY) < DRAG_ACTIVATION_PX) return;
 			drag.moved = true;
+			window.getSelection()?.removeAllRanges();
 			capturePointer(rootRef.current, event.pointerId);
 		}
 		let slot = 0;
@@ -491,6 +506,14 @@ var DashboardCanvas = forwardRef(function DashboardCanvas({ value, onChange, ren
 	};
 	const dragging = live != null;
 	useFloatingSurface(dragging || pick != null);
+	useEffect(() => {
+		const onSelectStart = (event) => {
+			const d = dragRef.current;
+			if (d && (d.kind === "resize" || d.moved)) event.preventDefault();
+		};
+		document.addEventListener("selectstart", onSelectStart);
+		return () => document.removeEventListener("selectstart", onSelectStart);
+	}, []);
 	useEffect(() => {
 		if (!dragging && !pick) return void 0;
 		const onKeyDown = (event) => {

package/dist/components/LinkCard/LinkCard.css

@@ -37,6 +37,7 @@
 .LinkCard__linkCard__wrwBJ {
   --link-card-elevation: var(--link-card-shadow);
   display: block;
+  text-align: start;
   background: var(--card-bg);
   border: var(--border-width) solid var(--card-border-color);
   border-radius: var(--card-radius);
@@ -47,6 +48,9 @@
   cursor: pointer;
   transition: var(--link-card-transition);
 }
+.LinkCard__linkCard__wrwBJ:where(button) {
+  width: 100%;
+}
 
 .LinkCard__linkCard__wrwBJ:hover {
   --link-card-elevation: var(--link-card-hover-shadow);

package/dist/components/List/List.css

@@ -67,6 +67,10 @@
   gap: var(--list-marker-gap);
 }
 
+.List__list__u7QbW[data-variant=plain] > .List__item__DXe2D {
+  display: block;
+}
+
 .List__marker__EqIaJ {
   display: flex;
   flex: none;

package/dist/components/List/List.d.ts

@@ -3,8 +3,9 @@ import { type HTMLAttributes, type ReactNode } from 'react';
  * Marker style.
  * - `'bullet'` (default) — a dot per item, rendered in a `<ul>`.
  * - `'number'` — 1, 2, 3 per item, rendered in an `<ol>`.
+ * - `'plain'` — no marker, rendered in a `<ul>`; for rows of interactive items (buttons, links) that still need list semantics. `numberStyle` and `size` do not apply.
  */
-export type ListVariant = 'bullet' | 'number';
+export type ListVariant = 'bullet' | 'number' | 'plain';
 /**
  * Space between items.
  * - `'xs'` — `var(--space-1)`; dense reference lists.
@@ -15,7 +16,7 @@ export type ListGap = 'xs' | 'sm' | 'md';
 /**
  * How `variant="number"` draws its numbers.
  * - `'plain'` (default) — a muted figure.
- * - `'badge'` — an accent badge for numbered steps: circular at body size, a rounded square at `size="heading"`. Ignored for bullets.
+ * - `'badge'` — an accent badge for numbered steps: circular at body size, a rounded square at `size="heading"`. Ignored for bullets and `'plain'`.
  */
 export type ListNumberStyle = 'plain' | 'badge';
 /**
@@ -29,9 +30,9 @@ export interface ListProps extends HTMLAttributes<HTMLElement> {
     variant?: ListVariant;
     /** Space between items. See `ListGap`. Default `'sm'`. */
     gap?: ListGap;
-    /** Marker scale; use `'heading'` when each item starts with a `Title size="xl"`. See `ListSize`. Default `'body'`. */
+    /** Marker scale; no effect on `variant="plain"`. Use `'heading'` when each item starts with a `Title size="xl"`. See `ListSize`. Default `'body'`. */
     size?: ListSize;
-    /** Number look; only applies to `variant="number"`. See `ListNumberStyle`. Default `'plain'`. */
+    /** Number look; only applies to `variant="number"` (not `'plain'`). See `ListNumberStyle`. Default `'plain'`. */
     numberStyle?: ListNumberStyle;
     /** `List.Item` elements. A nested `List` goes inside a `List.Item`. */
     children?: ReactNode;

package/dist/components/List/List.js

@@ -40,6 +40,12 @@ var ListRoot = forwardRef(function ListRoot({ variant = "bullet", gap = "sm", si
 /** One list entry; the marker is drawn here and hidden from assistive tech. */
 var ListItem = forwardRef(function ListItem({ className, children, ...rest }, ref) {
 	const { variant, numberStyle } = useContext(Ctx);
+	if (variant === "plain") return /* @__PURE__ */ jsx("li", {
+		ref,
+		className: clsx(List_module_default.item, className),
+		...rest,
+		children
+	});
 	const inner = variant === "bullet" ? /* @__PURE__ */ jsx("span", { className: List_module_default.bullet }) : /* @__PURE__ */ jsx("span", { className: numberStyle === "badge" ? List_module_default.badge : List_module_default.number });
 	return /* @__PURE__ */ jsxs("li", {
 		ref,

package/dist/components/PersonDisplay/PersonDisplay.js

@@ -132,6 +132,7 @@ var PersonDisplayOnBehalfOf = forwardRef(function PersonDisplayOnBehalfOf({ clas
 			}), " "] }),
 			/* @__PURE__ */ jsx(Text, {
 				as: "span",
+				align: "start",
 				className: PersonDisplay_module_default.onBehalfOfMember,
 				title: text,
 				...textProps,

package/dist/components/RichText/RichText.d.ts

@@ -2,6 +2,7 @@ import { type HTMLAttributes } from 'react';
 import type { RichDoc } from './engine/model.js';
 import type { RenderLink } from './engine/renderLink.js';
 import type { RenderMention } from './engine/renderMention.js';
+import type { RichTextImageActivateHandler } from './RichTextAttachment.js';
 export interface RichTextProps extends HTMLAttributes<HTMLDivElement> {
     /** The document to render. Build one with `emptyDoc()` / `createBlock()` or the transforms. */
     value: RichDoc;
@@ -40,6 +41,16 @@ export interface RichTextProps extends HTMLAttributes<HTMLDivElement> {
      * pass a large value to effectively remove the cap.
      */
     imageMaxHeight?: number;
+    /**
+     * Make inline images keyboard-operable triggers (e.g. to open a `Lightbox`).
+     * When set, each ready image attachment renders inside a native
+     * `<button type="button">` named "Open image: <alt or file name>"; click,
+     * Enter and Space focus the button, then call this with `{ src, alt }` and
+     * it — so an overlay that restores focus on close (e.g. `Lightbox`) returns there. Unset: the plain `<img>`, unchanged.
+     * Pass a stable reference (`useCallback`): a new function each render
+     * rebuilds every attachment block.
+     */
+    onImageActivate?: RichTextImageActivateHandler;
 }
 /**
  * Read-only renderer for a `RichDoc` (paragraphs, headings, lists, quotes, code blocks, inline marks) on the in-house engine.

package/dist/components/RichText/RichText.js

@@ -10,7 +10,7 @@ import { jsx } from "react/jsx-runtime";
 * Read-only renderer for a `RichDoc` (paragraphs, headings, lists, quotes, code blocks, inline marks) on the in-house engine.
 * @see docs/components/RichText.md
 */
-var RichText = forwardRef(function RichText({ value, renderLink, renderMention, imageMaxHeight, className, style, ...props }, ref) {
+var RichText = forwardRef(function RichText({ value, renderLink, renderMention, onImageActivate, imageMaxHeight, className, style, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: clsx(RichText_module_default.root, className),
@@ -18,7 +18,8 @@ var RichText = forwardRef(function RichText({ value, renderLink, renderMention,
 		...props,
 		children: renderDoc(value, {
 			renderLink,
-			renderMention
+			renderMention,
+			onImageActivate
 		})
 	});
 });

package/dist/components/RichText/RichTextAttachment.css

@@ -48,4 +48,18 @@ figure[data-attachment][data-align=center] {
 
 figure[data-attachment][data-align=right] {
   text-align: right;
+}
+
+.RichTextAttachment__imageTrigger__5_u8P {
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  line-height: 0;
+  cursor: zoom-in;
+}
+.RichTextAttachment__imageTrigger__5_u8P:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: var(--ring-offset);
 }

package/dist/components/RichText/RichTextAttachment.d.ts

@@ -1,5 +1,16 @@
 import type { Block } from './engine/model.js';
-export declare function RichTextAttachment({ block, editable }: {
+/**
+ * Called when a reader activates an inline image (click, Enter or Space) in the
+ * read-only `<RichText>`. `src` is the sanitized URL; `alt` is the block's alt
+ * as stored (may be `''` or absent). `trigger` is the DS-owned button, already
+ * focused when this runs, so an overlay that restores focus on close returns it there.
+ */
+export type RichTextImageActivateHandler = (image: {
+    src: string;
+    alt?: string;
+}, trigger: HTMLElement) => void;
+export declare function RichTextAttachment({ block, editable, onImageActivate, }: {
     block: Block;
     editable?: boolean;
+    onImageActivate?: RichTextImageActivateHandler;
 }): import("react").JSX.Element;

package/dist/components/RichText/RichTextAttachment.js

@@ -11,7 +11,7 @@ import { useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { RotateCw, X } from "lucide-react";
 // src/components/RichText/RichTextAttachment.tsx
-function RichTextAttachment({ block, editable }) {
+function RichTextAttachment({ block, editable, onImageActivate }) {
 	const t = useTranslation();
 	const name = block.name ?? "";
 	const errorId = useId();
@@ -79,17 +79,34 @@ function RichTextAttachment({ block, editable }) {
 		});
 	}
 	const href = safeHref(block.src ?? "");
-	if (attachmentIsImage(block) && href) return /* @__PURE__ */ jsx("img", {
-		className: RichTextAttachment_module_default.attachmentImg,
-		src: href,
-		alt: block.alt ?? name,
-		width: block.width,
-		height: block.height,
-		onLoad: (e) => {
-			const img = e.currentTarget;
-			if (img.naturalWidth && img.naturalHeight) img.style.setProperty("--rich-text-image-aspect", String(img.naturalWidth / img.naturalHeight));
-		}
-	});
+	if (attachmentIsImage(block) && href) {
+		const img = /* @__PURE__ */ jsx("img", {
+			className: RichTextAttachment_module_default.attachmentImg,
+			src: href,
+			alt: onImageActivate ? "" : block.alt ?? name,
+			width: block.width,
+			height: block.height,
+			onLoad: (e) => {
+				const img = e.currentTarget;
+				if (img.naturalWidth && img.naturalHeight) img.style.setProperty("--rich-text-image-aspect", String(img.naturalWidth / img.naturalHeight));
+			}
+		});
+		if (!onImageActivate) return img;
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: RichTextAttachment_module_default.imageTrigger,
+			"aria-label": t("richText.openImage", { name: block.alt || name }),
+			onClick: (e) => {
+				const trigger = e.currentTarget;
+				trigger.focus();
+				onImageActivate({
+					src: href,
+					alt: block.alt
+				}, trigger);
+			},
+			children: img
+		});
+	}
 	return /* @__PURE__ */ jsxs("a", {
 		className: RichTextAttachment_module_default.attachmentChip,
 		href,

package/dist/components/RichText/RichTextAttachment.module.js

@@ -7,6 +7,7 @@ var attachmentChip = "RichTextAttachment__attachmentChip__pQhOg";
 var attachmentName = "RichTextAttachment__attachmentName__qEYIR";
 var attachmentLabel = "RichTextAttachment__attachmentLabel__RBGKX";
 var attachmentReason = "RichTextAttachment__attachmentReason__6Es5S";
+var imageTrigger = "RichTextAttachment__imageTrigger__5_u8P";
 var RichTextAttachment_module_default = {
 	attachmentImg,
 	attachmentLoading,
@@ -14,6 +15,7 @@ var RichTextAttachment_module_default = {
 	attachmentChip,
 	attachmentName,
 	attachmentLabel,
-	attachmentReason
+	attachmentReason,
+	imageTrigger
 };
-export { attachmentChip, attachmentError, attachmentImg, attachmentLabel, attachmentLoading, attachmentName, attachmentReason, RichTextAttachment_module_default as default };
+export { attachmentChip, attachmentError, attachmentImg, attachmentLabel, attachmentLoading, attachmentName, attachmentReason, RichTextAttachment_module_default as default, imageTrigger };

package/dist/components/RichText/engine/renderDoc.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import type { RichDoc } from './model.js';
 import type { RenderLink } from './renderLink.js';
 import type { RenderMention } from './renderMention.js';
+import { type RichTextImageActivateHandler } from '../RichTextAttachment.js';
 export interface RenderDocOptions {
     /** Editable surface: add `data-block-id` anchors + render empty blocks with a `<br>`. */
     editable?: boolean;
@@ -22,6 +23,11 @@ export interface RenderDocOptions {
      * standard non-interactive mention span. Composes with `renderLink`.
      */
     renderMention?: RenderMention;
+    /**
+     * Make each ready image attachment a native `<button>` that calls this on
+     * activation (read-only viewer). Unset: the plain `<img>`, unchanged.
+     */
+    onImageActivate?: RichTextImageActivateHandler;
 }
 /**
  * Render a `RichDoc` to React nodes.

package/dist/components/RichText/engine/renderDoc.js

@@ -9,14 +9,12 @@ import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/RichText/engine/renderDoc.tsx
 var blockCache = /* @__PURE__ */ new WeakMap();
-function cachedBlockEl(block, editable, renderLink, renderMention, build) {
+function cachedBlockEl(block, opts, build) {
 	const hit = blockCache.get(block);
-	if (hit && hit.editable === editable && hit.renderLink === renderLink && hit.renderMention === renderMention) return hit.el;
+	if (hit && hit.editable === opts.editable && hit.renderLink === opts.renderLink && hit.renderMention === opts.renderMention && hit.onImageActivate === opts.onImageActivate) return hit.el;
 	const el = build();
 	blockCache.set(block, {
-		editable,
-		renderLink,
-		renderMention,
+		...opts,
 		el
 	});
 	return el;
@@ -173,7 +171,8 @@ function buildBlock(block, opts) {
 			"data-align": block.align || void 0,
 			children: /* @__PURE__ */ jsx(RichTextAttachment, {
 				block,
-				editable: opts.editable
+				editable: opts.editable,
+				onImageActivate: opts.onImageActivate
 			})
 		}, block.id);
 		default: return /* @__PURE__ */ jsx("p", {
@@ -183,7 +182,7 @@ function buildBlock(block, opts) {
 	}
 }
 function renderBlock(block, opts) {
-	return cachedBlockEl(block, opts.editable, opts.renderLink, opts.renderMention, () => buildBlock(block, opts));
+	return cachedBlockEl(block, opts, () => buildBlock(block, opts));
 }
 function collectList(blocks, start, eff, opts) {
 	const baseDepth = eff[start];
@@ -238,7 +237,8 @@ function renderDoc(doc, options = {}) {
 	const opts = {
 		editable: options.editable ?? false,
 		renderLink: options.renderLink,
-		renderMention: options.renderMention
+		renderMention: options.renderMention,
+		onImageActivate: options.onImageActivate
 	};
 	const eff = effectiveDepths(doc.blocks);
 	const out = [];

package/dist/components/RichText/index.d.ts

@@ -1,5 +1,6 @@
 export { RichText } from './RichText.js';
 export type { RichTextProps } from './RichText.js';
+export type { RichTextImageActivateHandler } from './RichTextAttachment.js';
 export type { RichDoc, Block as RichBlock, BlockType as RichBlockType, Inline as RichInline, Mark as RichMark, MarkType as RichMarkType, Point as RichPoint, Range as RichRange, } from './engine/model.js';
 export { emptyDoc, createBlock, docFromText } from './engine/model.js';
 export { insertText, deleteRange, splitBlock, mergeBlockBackward, applyMark, removeMark, toggleMark, setBlockType, } from './engine/transforms.js';

package/dist/components/Text/Text.css

@@ -97,6 +97,14 @@
   color: var(--text-fg-warning);
 }
 
+.Text__alignStart__iXgpi {
+  text-align: start;
+}
+
+.Text__alignEnd__I4Zil {
+  text-align: end;
+}
+
 .Text__alignLeft__RyNbJ {
   text-align: left;
 }

package/dist/components/Text/Text.d.ts

@@ -14,8 +14,8 @@ export type TextTone = 'default' | 'muted'
  | 'subtle' | 'accent' | 'danger' | 'success' | 'warning';
 /** Font weight. */
 export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
-/** Text alignment. */
-export type TextAlign = 'left' | 'center' | 'right';
+/** Text alignment. Logical `start` / `end` follow writing direction; `left` / `right` are physical. */
+export type TextAlign = 'start' | 'end' | 'left' | 'center' | 'right';
 export interface TextProps extends HTMLAttributes<HTMLElement> {
     /**
      * Associates a `<label>` with its form control. Only meaningful when
@@ -66,7 +66,16 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
     tone?: TextTone;
     /** Font weight. Defaults to `'regular'`. */
     weight?: TextWeight;
-    /** Text alignment. Defaults to `'left'`. */
+    /**
+     * Text alignment. No default — omitted, Text sets no `text-align` and
+     * inherits it from its container (e.g. a `Table.Cell align="end"` keeps a
+     * Text value at the end). Pass `align` only to override the container.
+     * - `start` — start of the line in the writing direction (left in LTR, right in RTL). Prefer over `left`.
+     * - `end` — end of the line in the writing direction (right in LTR, left in RTL). Prefer over `right`.
+     * - `center` — centred.
+     * - `left` — physical left in every direction; wrong in RTL, use `start`.
+     * - `right` — physical right in every direction; wrong in RTL, use `end`.
+     */
     align?: TextAlign;
     /**
      * Truncate to a single line with ellipsis. Defaults to `false`. Use inside

package/dist/components/Text/Text.js

@@ -28,6 +28,8 @@ var WEIGHT_CLASS = {
 	bold: Text_module_default.weightBold
 };
 var ALIGN_CLASS = {
+	start: Text_module_default.alignStart,
+	end: Text_module_default.alignEnd,
 	left: Text_module_default.alignLeft,
 	center: Text_module_default.alignCenter,
 	right: Text_module_default.alignRight
@@ -36,7 +38,7 @@ var ALIGN_CLASS = {
 * Body / inline text primitive for all non-heading text (`p`, `span`, `div` or `label`).
 * @see docs/components/Text.md
 */
-var Text = forwardRef(function Text({ as = "p", size = "md", tone = "default", weight = "regular", align = "left", truncate = false, lineClamp, className, style, children, ...rest }, ref) {
+var Text = forwardRef(function Text({ as = "p", size = "md", tone = "default", weight = "regular", align, truncate = false, lineClamp, className, style, children, ...rest }, ref) {
 	const Component = as;
 	const useLineClamp = typeof lineClamp === "number" && lineClamp > 0;
 	const useTruncate = !useLineClamp && truncate;
@@ -46,7 +48,7 @@ var Text = forwardRef(function Text({ as = "p", size = "md", tone = "default", w
 	} : style;
 	return /* @__PURE__ */ jsx(Component, {
 		ref,
-		className: clsx(Text_module_default.text, SIZE_CLASS[size], TONE_CLASS[tone], WEIGHT_CLASS[weight], ALIGN_CLASS[align], useTruncate && Text_module_default.truncate, useLineClamp && Text_module_default.lineClamp, className),
+		className: clsx(Text_module_default.text, SIZE_CLASS[size], TONE_CLASS[tone], WEIGHT_CLASS[weight], align && ALIGN_CLASS[align], useTruncate && Text_module_default.truncate, useLineClamp && Text_module_default.lineClamp, className),
 		style: mergedStyle,
 		...rest,
 		children

package/dist/components/Text/Text.module.js

@@ -18,6 +18,8 @@ var toneAccent = "Text__toneAccent__MhCvt";
 var toneDanger = "Text__toneDanger___Z5Uc";
 var toneSuccess = "Text__toneSuccess__hgcOm";
 var toneWarning = "Text__toneWarning___Qj9v";
+var alignStart = "Text__alignStart__iXgpi";
+var alignEnd = "Text__alignEnd__I4Zil";
 var alignLeft = "Text__alignLeft__RyNbJ";
 var alignCenter = "Text__alignCenter__hKaav";
 var alignRight = "Text__alignRight__Cx6EZ";
@@ -42,10 +44,12 @@ var Text_module_default = {
 	toneDanger,
 	toneSuccess,
 	toneWarning,
+	alignStart,
+	alignEnd,
 	alignLeft,
 	alignCenter,
 	alignRight,
 	truncate,
 	lineClamp
 };
-export { alignCenter, alignLeft, alignRight, Text_module_default as default, lineClamp, sizeInherit, sizeLg, sizeMd, sizeSm, sizeXl, sizeXs, text, toneAccent, toneDanger, toneDefault, toneMuted, toneSubtle, toneSuccess, toneWarning, truncate, weightBold, weightMedium, weightRegular, weightSemibold };
+export { alignCenter, alignEnd, alignLeft, alignRight, alignStart, Text_module_default as default, lineClamp, sizeInherit, sizeLg, sizeMd, sizeSm, sizeXl, sizeXs, text, toneAccent, toneDanger, toneDefault, toneMuted, toneSubtle, toneSuccess, toneWarning, truncate, weightBold, weightMedium, weightRegular, weightSemibold };

package/dist/components/Timeline/Timeline.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --timeline-gutter: var(--size-md);
   --timeline-node-size: var(--size-md);
@@ -5,6 +6,8 @@
   --timeline-content-gap: var(--space-3);
   --timeline-line-width: var(--border-width);
   --timeline-line-color: var(--color-border);
+  --timeline-first-line-font-size: var(--font-size-sm);
+  --timeline-first-line-height: var(--line-height-normal);
   --timeline-gutter-compact: var(--size-sm);
   --timeline-node-size-compact: var(--size-sm);
   --timeline-row-gap-compact: var(--space-2);
@@ -21,26 +24,33 @@
 .Timeline__item__OFAEY {
   display: grid;
   grid-template-columns: var(--timeline-gutter) 1fr;
+  grid-template-rows: auto 1fr;
   column-gap: var(--timeline-content-gap);
+  align-items: first baseline;
 }
 
 .Timeline__gutter__G51XE {
-  position: relative;
+  display: contents;
 }
 
 .Timeline__nodeBox__3ZPJu {
+  grid-area: 1/1;
   height: var(--timeline-node-size);
   display: flex;
   align-items: center;
   justify-content: center;
 }
+.Timeline__nodeBox__3ZPJu::before {
+  content: "​";
+  content: "​"/"";
+  font-size: var(--timeline-first-line-font-size);
+  line-height: var(--timeline-first-line-height);
+}
 
 .Timeline__connector__QoIUd {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: var(--timeline-node-size);
-  bottom: 0;
+  grid-area: 2/1;
+  align-self: stretch;
+  justify-self: center;
   width: var(--timeline-line-width);
   background: var(--timeline-line-color);
 }
@@ -50,6 +60,7 @@
 }
 
 .Timeline__content__0ee3p {
+  grid-area: 1/2/span 2;
   min-width: 0;
   padding-block-end: var(--timeline-row-gap);
 }

package/dist/i18n/en.js

@@ -494,6 +494,7 @@ var en = {
 		suggestions: "Suggestions",
 		collectionTag: "list"
 	},
+	richText: { openImage: ({ name }) => name ? `Open image: ${name}` : "Open image" },
 	richTextEditor: {
 		editorLabel: "Rich text editor",
 		toolbar: "Formatting",

package/dist/i18n/messages.d.ts

@@ -1193,6 +1193,13 @@ export interface Messages {
         /** Muted tag marking a collection (array) variable in menus. */
         collectionTag: string;
     };
+    richText: {
+        /** Function leaf — aria-label on an inline-image trigger (`onImageActivate`).
+         * `name` is the image's alt, else its file name; may be empty. */
+        openImage: (params: {
+            name: string;
+        }) => string;
+    };
     richTextEditor: {
         /** Default aria-label for the editable region when none is supplied. */
         editorLabel: string;

package/dist/i18n/ru.js

@@ -511,6 +511,7 @@ var ru = {
 		suggestions: "Подсказки",
 		collectionTag: "список"
 	},
+	richText: { openImage: ({ name }) => name ? `Открыть изображение: ${name}` : "Открыть изображение" },
 	richTextEditor: {
 		editorLabel: "Редактор форматированного текста",
 		toolbar: "Форматирование",

package/dist/index.d.ts

@@ -206,7 +206,7 @@ export type { CodeBlockProps, CodeBlockSample, CodeBlockHighlightLines, CodeBloc
 export { HighlightedText } from './components/HighlightedText/index.js';
 export type { HighlightedTextProps, HighlightRange } from './components/HighlightedText/index.js';
 export { RichText } from './components/RichText/index.js';
-export type { RichTextProps, RichDoc, RichBlock, RichBlockType, RichInline, RichMark, RichMarkType, RichPoint, RichRange, } from './components/RichText/index.js';
+export type { RichTextProps, RichTextImageActivateHandler, RichDoc, RichBlock, RichBlockType, RichInline, RichMark, RichMarkType, RichPoint, RichRange, } from './components/RichText/index.js';
 export type { RichTextLink, RenderLink } from './components/RichText/engine/renderLink.js';
 export type { RichTextMention, RenderMention } from './components/RichText/engine/renderMention.js';
 export { emptyDoc, createBlock, docFromText, insertText, deleteRange, splitBlock, mergeBlockBackward, applyMark, removeMark, toggleMark, setBlockType, fromHtml, fromMarkdown, toHtml, toMarkdown, } from './components/RichText/index.js';

package/dist/styles.css

@@ -6767,6 +6767,7 @@ pre {
   flex-shrink: 0;
   font-weight: var(--pill-menu-caption-font-weight);
 }
+@charset "UTF-8";
 :root {
   --timeline-gutter: var(--size-md);
   --timeline-node-size: var(--size-md);
@@ -6774,6 +6775,8 @@ pre {
   --timeline-content-gap: var(--space-3);
   --timeline-line-width: var(--border-width);
   --timeline-line-color: var(--color-border);
+  --timeline-first-line-font-size: var(--font-size-sm);
+  --timeline-first-line-height: var(--line-height-normal);
   --timeline-gutter-compact: var(--size-sm);
   --timeline-node-size-compact: var(--size-sm);
   --timeline-row-gap-compact: var(--space-2);
@@ -6790,26 +6793,33 @@ pre {
 .Timeline__item__OFAEY {
   display: grid;
   grid-template-columns: var(--timeline-gutter) 1fr;
+  grid-template-rows: auto 1fr;
   column-gap: var(--timeline-content-gap);
+  align-items: first baseline;
 }
 
 .Timeline__gutter__G51XE {
-  position: relative;
+  display: contents;
 }
 
 .Timeline__nodeBox__3ZPJu {
+  grid-area: 1/1;
   height: var(--timeline-node-size);
   display: flex;
   align-items: center;
   justify-content: center;
 }
+.Timeline__nodeBox__3ZPJu::before {
+  content: "​";
+  content: "​"/"";
+  font-size: var(--timeline-first-line-font-size);
+  line-height: var(--timeline-first-line-height);
+}
 
 .Timeline__connector__QoIUd {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: var(--timeline-node-size);
-  bottom: 0;
+  grid-area: 2/1;
+  align-self: stretch;
+  justify-self: center;
   width: var(--timeline-line-width);
   background: var(--timeline-line-color);
 }
@@ -6819,6 +6829,7 @@ pre {
 }
 
 .Timeline__content__0ee3p {
+  grid-area: 1/2/span 2;
   min-width: 0;
   padding-block-end: var(--timeline-row-gap);
 }
@@ -7332,6 +7343,14 @@ pre {
   color: var(--text-fg-warning);
 }
 
+.Text__alignStart__iXgpi {
+  text-align: start;
+}
+
+.Text__alignEnd__I4Zil {
+  text-align: end;
+}
+
 .Text__alignLeft__RyNbJ {
   text-align: left;
 }
@@ -12691,6 +12710,20 @@ figure[data-attachment][data-align=center] {
 figure[data-attachment][data-align=right] {
   text-align: right;
 }
+
+.RichTextAttachment__imageTrigger__5_u8P {
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  line-height: 0;
+  cursor: zoom-in;
+}
+.RichTextAttachment__imageTrigger__5_u8P:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: var(--ring-offset);
+}
 .RichTextEditor__root__-1u5M {
   display: flex;
   flex-direction: column;
@@ -14655,6 +14688,10 @@ figure[data-attachment][data-align=right] {
   gap: var(--list-marker-gap);
 }
 
+.List__list__u7QbW[data-variant=plain] > .List__item__DXe2D {
+  display: block;
+}
+
 .List__marker__EqIaJ {
   display: flex;
   flex: none;
@@ -14834,6 +14871,7 @@ figure[data-attachment][data-align=right] {
 .LinkCard__linkCard__wrwBJ {
   --link-card-elevation: var(--link-card-shadow);
   display: block;
+  text-align: start;
   background: var(--card-bg);
   border: var(--border-width) solid var(--card-border-color);
   border-radius: var(--card-radius);
@@ -14844,6 +14882,9 @@ figure[data-attachment][data-align=right] {
   cursor: pointer;
   transition: var(--link-card-transition);
 }
+.LinkCard__linkCard__wrwBJ:where(button) {
+  width: 100%;
+}
 
 .LinkCard__linkCard__wrwBJ:hover {
   --link-card-elevation: var(--link-card-hover-shadow);

package/docs/components/HighlightedText.md

@@ -26,7 +26,7 @@
 | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'inherit'` | no | Visual size. Defaults to `'md'` (body text). - `xs` — 11px, dense metadata / captions - `sm` — 12px, small body / labels - `md` — 14px, body text (default) - `lg` — 16px, large body / lead text - `xl` — 20px, very large body (rare) - `inherit` — no fixed size; font-size AND line-height inherit from the parent. For inline runs inside a heading (`as="span"` inside a `<Title>` / `<PageHeader.Title>`) that must keep the heading's size — e.g. a muted task-key prefix. Tone / weight still apply — font-weight stays Text's own (default `regular`), it does NOT inherit; pass `weight` to match the heading if needed. |
 | `tone` | `'default' \| 'muted' \| 'subtle' \| 'accent' \| 'danger' \| 'success' \| 'warning'` | no | Color tone. Defaults to `'default'`. - `default` — `--color-fg` - `muted` — `--color-fg-muted` (for secondary copy) - `subtle` — **@deprecated: resolves to `muted`. Use `muted`.** In LIGHT theme the two neutrals were indistinguishable: OKLab ΔE 0.0261 when the deprecation was filed, 0.0365 after `--color-fg-muted` was retuned, against the 0.065 floor this library's perceptual gates use. In DARK they were 0.0707 apart — a real step — so **this deprecation changes dark-theme appearance**: `subtle` text in dark gets lighter, moving from `--color-fg-subtle` to `--color-fg-muted`. That is the accepted trade (a tier that exists in one theme only is not a tier), but it is a visual change, not the removal of a duplicate. `--text-fg-subtle` now aliases `--text-fg-muted`, so nothing breaks at the type or build level; if you need the old dark value back, override `--text-fg-subtle`. - `accent` — `--color-accent` - `danger` / `success` / `warning` — state-coded text |
 | `weight` | `'regular' \| 'medium' \| 'semibold' \| 'bold'` | no | Font weight. Defaults to `'regular'`. |
-| `align` | `'left' \| 'center' \| 'right'` | no | Text alignment. Defaults to `'left'`. |
+| `align` | `'start' \| 'end' \| 'left' \| 'center' \| 'right'` | no | Text alignment. No default — omitted, Text sets no `text-align` and inherits it from its container (e.g. a `Table.Cell align="end"` keeps a Text value at the end). Pass `align` only to override the container. - `start` — start of the line in the writing direction (left in LTR, right in RTL). Prefer over `left`. - `end` — end of the line in the writing direction (right in LTR, left in RTL). Prefer over `right`. - `center` — centred. - `left` — physical left in every direction; wrong in RTL, use `start`. - `right` — physical right in every direction; wrong in RTL, use `end`. |
 | `truncate` | `boolean` | no | Truncate to a single line with ellipsis. Defaults to `false`. Use inside narrow containers (table cells, card list rows). Mutually exclusive with `lineClamp` — if both are set, `lineClamp` wins. |
 | `lineClamp` | `number` | no | Clamp to N lines with ellipsis (uses `-webkit-line-clamp`). Defaults to `undefined`. Overrides `truncate` when set. Example: `lineClamp={2}` for a 2-line description that ellipses on the third. If you also pass `style.WebkitLineClamp`, the `lineClamp` prop takes precedence — the component merges the dynamic line-clamp value into `style` AFTER spreading your `style`, so the prop wins. |
 | …native | | | plus native HTML attributes |

package/docs/components/Lightbox.md

@@ -1,6 +1,6 @@
 # `<Lightbox>` — full-screen image & document gallery overlay
 
-`<Lightbox open onOpenChange items>` shows one large item at a time (an image, or a PDF in an `<iframe>`) with prev/next chevrons, ← → keys, a thumbnail strip, a position counter, and an optional caption. Controlled `open` like `<Modal>`; the current index is uncontrolled (`defaultIndex`) unless you pass `index` + `onIndexChange`. `loop` (default true) wraps at the ends. The consumer owns the trigger — typically a row of interactive `<Image>` thumbnails. For a single inline image use `<Image>`.
+`<Lightbox open onOpenChange items>` shows one large item at a time (an image, or a PDF in an `<iframe>`) with prev/next chevrons, ← → keys, a thumbnail strip, a position counter, and an optional caption. Controlled `open` like `<Modal>`; the current index is uncontrolled (`defaultIndex`) unless you pass `index` + `onIndexChange`. `loop` (default true) wraps at the ends. The consumer owns the trigger — typically a row of interactive `<Image>` thumbnails, or an inline image in `<RichText onImageActivate>`. For a single inline image use `<Image>`.
 
 ```tsx
 const [open, setOpen] = useState(false);

package/docs/components/LinkCard.md

@@ -13,6 +13,8 @@
 <LinkCard as="button" type="button" onClick={openImporter}>Import contacts</LinkCard>
 ```
 
+The `as="button"` form start-aligns text like the anchor form and fills its container's width (a `<button>` would otherwise shrink-wrap); the anchor form keeps normal block sizing, so it can still sit in a flex row such as `Cluster`.
+
 <!-- props:start -->
 
 ## Props

package/docs/components/List.md

@@ -35,10 +35,10 @@ TL;DR: `<List>` for bullets, `<List variant="number">` for ordered steps, `numbe
 <!-- prettier-ignore -->
 | Prop | Type | Required | Description |
 |---|---|---|---|
-| `variant` | `'bullet' \| 'number'` | no | Marker style. See `ListVariant`. Default `'bullet'`. |
+| `variant` | `'bullet' \| 'number' \| 'plain'` | no | Marker style. See `ListVariant`. Default `'bullet'`. |
 | `gap` | `'xs' \| 'sm' \| 'md'` | no | Space between items. See `ListGap`. Default `'sm'`. |
-| `size` | `'body' \| 'heading'` | no | Marker scale; use `'heading'` when each item starts with a `Title size="xl"`. See `ListSize`. Default `'body'`. |
-| `numberStyle` | `'plain' \| 'badge'` | no | Number look; only applies to `variant="number"`. See `ListNumberStyle`. Default `'plain'`. |
+| `size` | `'body' \| 'heading'` | no | Marker scale; no effect on `variant="plain"`. Use `'heading'` when each item starts with a `Title size="xl"`. See `ListSize`. Default `'body'`. |
+| `numberStyle` | `'plain' \| 'badge'` | no | Number look; only applies to `variant="number"` (not `'plain'`). See `ListNumberStyle`. Default `'plain'`. |
 | `children` | `ReactNode` | no | `List.Item` elements. A nested `List` goes inside a `List.Item`. |
 | …native | | | plus native HTML attributes |
 
@@ -58,10 +58,11 @@ TL;DR: `<List>` for bullets, `<List variant="number">` for ordered steps, `numbe
 - Nest by putting a `List` inside a `List.Item`; it indents one level. A nested `List` uses its own `size`, so a body list inside a `size="heading"` step keeps body markers.
 - On a `size="heading"` List, marker size, shape and font size come from the `--list-heading-*` tokens: overriding `--list-marker-height`/`-width`, `--list-bullet-size`, `--list-number-font-size` or `--list-badge-size`/`-radius`/`-font-size` has no effect there. Colour, weight and gap tokens (`--list-marker-fg`, `--list-badge-bg`/`-fg`, `--list-*-font-weight`, `--list-marker-gap`) apply to both sizes.
 - `numberStyle` has no effect on bullets.
+- `variant="plain"` renders a marker-less `<ul>` for rows of interactive items (title button, timestamp, icon button) that need list semantics; `numberStyle` and `size` do not apply. Put a `Cluster` in each `List.Item` for the row layout.
 - With `numberStyle="badge"` the numbers are visual only; screen readers announce the list position ("1 of 3") rather than the badge text.
 - `size="heading"` fits markers to a `Title size="xl"` first line; the badge turns into a rounded square.
 
-When NOT to use: key–value pairs → `DefinitionList`; rows of records → `Card.List` / `Table`; interactive or selectable rows → `Card.List`; custom markers or icons (unsupported).
+When NOT to use: key–value pairs → `DefinitionList`; rows of records → `Card.List` / `Table`; selectable rows → `Card.List`; interactive rows that only need list semantics → `variant="plain"`; custom markers or icons (unsupported).
 
 - ❌ Raw `<ul>` / `<ol>` or `Stack` + `Dot` composites for prose lists: use `List`.
 - ❌ Children other than `List.Item` (a `div`, text, a raw `li`): they get no marker and are not counted. Wrapper components are fine if they render `List.Item`.

package/docs/components/RichText.md

@@ -23,6 +23,7 @@ const doc = {
 | `renderLink` | `RenderLink` | no | Substitute how a link renders. Called per link with `{ href, text }` and the default `<a>` node; return your own node (e.g. a task/member chip) or the `defaultNode` to keep the standard anchor. Render-time only — the document model is unchanged, so serialization still emits a plain link. Prose link styling (accent colour + underline) applies to BARE anchors only: an `<a>` you return with any `className` — including a DS `<Link>` — keeps its own decoration and colour entirely. |
 | `renderMention` | `RenderMention` | no | Substitute how an `@`-mention renders. Called per mention with `{ id, label }` and the default mention span; return your own node (e.g. an interactive member chip / popover trigger) or the `defaultNode` to keep the standard non-interactive span. Render-time only — the document model is unchanged, so serialization still emits the mention mark. Composes with `renderLink`. |
 | `imageMaxHeight` | `number` | no | Maximum DISPLAYED height of image attachments, in px. Default: the `--size-rich-text-image-max-height` token (480px). A taller image shrinks (width follows, aspect preserved) — render-time only; stored `width`/`height` are unchanged, so existing documents need no migration. There is no "off": pass a large value to effectively remove the cap. |
+| `onImageActivate` | `RichTextImageActivateHandler` | no | Make inline images keyboard-operable triggers (e.g. to open a `Lightbox`). When set, each ready image attachment renders inside a native `<button type="button">` named "Open image: <alt or file name>"; click, Enter and Space focus the button, then call this with `{ src, alt }` and it — so an overlay that restores focus on close (e.g. `Lightbox`) returns there. Unset: the plain `<img>`, unchanged. Pass a stable reference (`useCallback`): a new function each render rebuilds every attachment block. |
 | …native | | | plus native `<div>` attributes |
 
 <!-- props:end -->
@@ -39,6 +40,16 @@ const renderLink: RenderLink = ({ href }, fallback) => {
 
 **`renderMention`** (optional) — `(mention: { id, label }, defaultNode) => ReactNode` — same contract as `renderLink` but for `@`-mention marks (render an interactive member chip/popover trigger), or return `defaultNode` for the standard non-interactive mention span. Composes with `renderLink`. Render-time only — `toHtml`/`toMarkdown` and the model still emit the mention mark. Works in both `<RichText>` and `<RichTextEditor>` (where a substituted mention becomes an atomic chip).
 
+**`onImageActivate`** (optional) — `(image: { src, alt? }, trigger) => void` — makes inline images keyboard-operable triggers, typically to open a `<Lightbox>`. When set, each ready image attachment renders inside a native `<button type="button">` (Tab-focusable, Enter/Space, library focus ring) named "Open image: <alt, else file name>"; the inner `<img>` gets `alt=""` so the name isn't read twice. File chips get no trigger. `trigger` is that button, already focused when the handler runs (the library focuses it, since a click doesn't in Safari), so an overlay that restores focus on close — `Lightbox` does — returns it there with no extra code. `alt` is the stored value (may be `''` or absent) — `LightboxItem.alt` is required, so supply your own fallback. Pass a stable reference (`useCallback`) — a new function each render rebuilds every attachment block. Unset, images render as the plain `<img>`, unchanged. Read-only `<RichText>` only.
+
+```tsx
+const [image, setImage] = useState<{ src: string; alt?: string } | null>(null);
+const onImageActivate = useCallback<RichTextImageActivateHandler>((img) => setImage(img), []);
+<RichText value={doc} onImageActivate={onImageActivate} />
+<Lightbox open={image !== null} onOpenChange={(o) => !o && setImage(null)} items={image ? [{ src: image.src, alt: image.alt || 'Attached image' }] : []} />;
+```
+
 When NOT to use: plain text → `Text`. For editing → `<RichTextEditor>`. The model is immutable; render the doc returned by a transform, never mutate in place.
 
 - ❌ Hand-writing HTML to display rich content — feed a `RichDoc` to `<RichText>`.
+- ❌ A delegated `onClick` on the `<RichText>` root to open images — mouse/touch only: the `<img>` isn't focusable, has no button role and leaves nothing to return focus to. Use `onImageActivate`.

package/docs/components/Text.md

@@ -20,7 +20,7 @@
 | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'inherit'` | no | Visual size. Defaults to `'md'` (body text). - `xs` — 11px, dense metadata / captions - `sm` — 12px, small body / labels - `md` — 14px, body text (default) - `lg` — 16px, large body / lead text - `xl` — 20px, very large body (rare) - `inherit` — no fixed size; font-size AND line-height inherit from the parent. For inline runs inside a heading (`as="span"` inside a `<Title>` / `<PageHeader.Title>`) that must keep the heading's size — e.g. a muted task-key prefix. Tone / weight still apply — font-weight stays Text's own (default `regular`), it does NOT inherit; pass `weight` to match the heading if needed. |
 | `tone` | `'default' \| 'muted' \| 'subtle' \| 'accent' \| 'danger' \| 'success' \| 'warning'` | no | Color tone. Defaults to `'default'`. - `default` — `--color-fg` - `muted` — `--color-fg-muted` (for secondary copy) - `subtle` — **@deprecated: resolves to `muted`. Use `muted`.** In LIGHT theme the two neutrals were indistinguishable: OKLab ΔE 0.0261 when the deprecation was filed, 0.0365 after `--color-fg-muted` was retuned, against the 0.065 floor this library's perceptual gates use. In DARK they were 0.0707 apart — a real step — so **this deprecation changes dark-theme appearance**: `subtle` text in dark gets lighter, moving from `--color-fg-subtle` to `--color-fg-muted`. That is the accepted trade (a tier that exists in one theme only is not a tier), but it is a visual change, not the removal of a duplicate. `--text-fg-subtle` now aliases `--text-fg-muted`, so nothing breaks at the type or build level; if you need the old dark value back, override `--text-fg-subtle`. - `accent` — `--color-accent` - `danger` / `success` / `warning` — state-coded text |
 | `weight` | `'regular' \| 'medium' \| 'semibold' \| 'bold'` | no | Font weight. Defaults to `'regular'`. |
-| `align` | `'left' \| 'center' \| 'right'` | no | Text alignment. Defaults to `'left'`. |
+| `align` | `'start' \| 'end' \| 'left' \| 'center' \| 'right'` | no | Text alignment. No default — omitted, Text sets no `text-align` and inherits it from its container (e.g. a `Table.Cell align="end"` keeps a Text value at the end). Pass `align` only to override the container. - `start` — start of the line in the writing direction (left in LTR, right in RTL). Prefer over `left`. - `end` — end of the line in the writing direction (right in LTR, left in RTL). Prefer over `right`. - `center` — centred. - `left` — physical left in every direction; wrong in RTL, use `start`. - `right` — physical right in every direction; wrong in RTL, use `end`. |
 | `truncate` | `boolean` | no | Truncate to a single line with ellipsis. Defaults to `false`. Use inside narrow containers (table cells, card list rows). Mutually exclusive with `lineClamp` — if both are set, `lineClamp` wins. |
 | `lineClamp` | `number` | no | Clamp to N lines with ellipsis (uses `-webkit-line-clamp`). Defaults to `undefined`. Overrides `truncate` when set. Example: `lineClamp={2}` for a 2-line description that ellipses on the third. If you also pass `style.WebkitLineClamp`, the `lineClamp` prop takes precedence — the component merges the dynamic line-clamp value into `style` AFTER spreading your `style`, so the prop wins. |
 | `children` | `ReactNode` | yes | Text content. |
@@ -61,6 +61,7 @@ If you need a size or tone the primitive doesn't expose, that is a token-vocabul
 - `<Text as="h2">`: Text doesn't accept heading tags; use `<Title order={2}>`.
 - Wrapping a `<Title>` in `<Text>` for tone/weight tweaks: pass tone/weight to the `<Title>`. `size="inherit"` is for runs INSIDE a heading, not for wrapping it.
 - Nesting `<Text>` in another `<Text>` with the default `as="p"`: the inner `<p>` inside the outer `<p>` is invalid HTML and triggers React's DOM nesting warning. Use `<Text as="span" tone="...">` for an inline override inside a paragraph.
+- `<Text align="right">` inside `<Table.Cell align="end">`: Text inherits its container's alignment when `align` is omitted, so drop the prop. When you do need to override, use logical `start` / `end`; `left` / `right` are physical and wrong in RTL.
 
 ## Typography hard rule
 

package/docs/components/Timeline.md

@@ -42,6 +42,7 @@
 <!-- props:end -->
 
 - The last item's connector stops automatically (CSS `:last-child`); `compact` flows via CSS vars.
+- The node centres on the item's **first line**, not the content block — a header that wraps, or a `<Cluster>` holding `Text size="sm"` and an inline `<PersonDisplay>`, still lines up on line 1. It works by first-baseline alignment against a strut set in `Text size="sm"` type, so **start each item with a text line**: content that opens with an image or other baseline-less box aligns the node to that box's bottom edge. If the first line is not `sm` text, set `--timeline-first-line-font-size` / `--timeline-first-line-height` on the `<Timeline>` to its type.
 
 ```tsx
 // Compact sidebar widget with dot nodes:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eocrm/design-system",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Design system for the EOCRM product — React 19 + CSS custom properties.",
   "license": "Apache-2.0",
   "type": "module",
@@ -51,7 +51,7 @@
     "qrcode-generator": "^2.0.4"
   },
   "devDependencies": {
-    "@eocrm/design-tokens": "0.8.0",
+    "@eocrm/design-tokens": "0.8.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",