@heyramzi/ui 3.1.0 → 3.2.0

package/src/canvas/ui/StylePanel.svelte

@@ -23,11 +23,13 @@
 	// IMPORTS
 	// =========================
 	import { Panel, useStore } from "@xyflow/svelte";
+	import { Toolbar } from "bits-ui";
 	import type { CanvasOp } from "../ops/ops.js";
 	import {
 		FONT_SIZES,
 		styleOps,
 		summarizeStyle,
+		type FillValue,
 		type FontWeight,
 		type StyleNode,
 		type StyleValues,
@@ -35,8 +37,10 @@
 	} from "../editor/style.js";
 	import { PEN_COLORS } from "../pen/types.js";
 	import "../pen/pen.css";
+	import BarTooltip from "./BarTooltip.svelte";
 	import { placeBeside, type Box } from "./place-panel.js";
 	import "./canvas-ui.css";
+	import * as Tooltip from "../../shadcn/tooltip/index.js";
 
 	// =========================
 	// TYPES
@@ -70,6 +74,8 @@
 	const LEVELS: readonly WidthLevel[] = [0, 1, 2];
 
 	let summary = $derived(summarizeStyle(nodes, frameType));
+	// Roving focus remembers its tab stop by element, so a panel whose sections change is rebuilt fresh.
+	let controlsKey = $derived(summary ? [...summary.controls].join() : "");
 	let strokeLabel = $derived(
 		summary?.controls.has("fill") || summary?.controls.has("width") ? labels.stroke : labels.colour,
 	);
@@ -118,12 +124,24 @@
 		const ops = styleOps(nodes, next, frameType);
 		if (ops.length > 0) commit(ops);
 	}
+
+	// A single-select group sends "" when its pressed item is pressed again. A style stays set.
+	// Each group's values are the item values written below, so a value maps back to its own type.
+	function pick(key: keyof StyleValues, value: string | undefined) {
+		if (!value) return;
+		if (key === "fill") change({ fill: value as FillValue });
+		else if (key === "stroke") change({ stroke: value as PenColor });
+		else if (key === "width") change({ width: Number(value) as WidthLevel });
+		else if (key === "fontSize") change({ fontSize: Number(value) });
+		else change({ fontWeight: value as FontWeight });
+	}
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
 {#if summary}
+	{@const { values, controls } = summary}
 	<Panel
 		position="center-right"
 		class="cv-dock cv-style-dock {placed ? 'is-placed' : ''}"
@@ -132,111 +150,165 @@
 			: undefined}
 		data-side={placed?.side}
 	>
-		<div
-			bind:offsetWidth={barWidth}
-			bind:offsetHeight={barHeight}
-			class="cv-bar cv-side cv-style t-enter"
-			role="toolbar"
-			aria-label={labels.panel}
-			data-testid="style-panel"
-		>
-			{#if summary.controls.has("fill")}
-				<div class="cv-section" role="group" aria-label={labels.fill} data-testid="style-fill">
-					<span class="cv-label" aria-hidden="true">{labels.fill}</span>
-					<div class="cv-swatches">
-						<button
-							type="button"
-							class="cv-swatch cv-swatch-none"
-							aria-pressed={summary.values.fill === "none"}
-							aria-label="{labels.fill}: {labels.none}"
-							data-tip={labels.none}
-							onclick={() => change({ fill: "none" })}
-						></button>
-						{#each PEN_COLORS as swatch (swatch)}
-							<button
-								type="button"
-								class="cv-swatch"
-								aria-pressed={summary.values.fill === swatch}
-								aria-label="{labels.fill}: {labels.colors[swatch]}"
-								data-tip={labels.colors[swatch]}
-								style:--swatch="var(--pen-{swatch})"
-								onclick={() => change({ fill: swatch })}
-							></button>
-						{/each}
-					</div>
-				</div>
-			{/if}
+		<Tooltip.Provider>
+			{#key controlsKey}
+				<Toolbar.Root aria-label={labels.panel}>
+					{#snippet child({ props })}
+						<div
+							{...props}
+							bind:offsetWidth={barWidth}
+							bind:offsetHeight={barHeight}
+							class="cv-bar cv-style t-enter"
+							data-testid="style-panel"
+						>
+							{#if controls.has("fill")}
+								<div
+									class="cv-section"
+									role="group"
+									aria-label={labels.fill}
+									data-testid="style-fill"
+								>
+									<span class="cv-label" aria-hidden="true">{labels.fill}</span>
+									<Toolbar.Group
+										type="single"
+										class="cv-swatches"
+										bind:value={() => values.fill, (value) => pick("fill", value)}
+									>
+										<BarTooltip label={labels.none} name="{labels.fill}: {labels.none}" side="left">
+											{#snippet child({ props })}
+												<Toolbar.GroupItem
+													{...props}
+													value="none"
+													class="cv-swatch cv-swatch-none"
+												/>
+											{/snippet}
+										</BarTooltip>
+										{#each PEN_COLORS as swatch (swatch)}
+											{@render colorItem(swatch, labels.fill)}
+										{/each}
+									</Toolbar.Group>
+								</div>
+							{/if}
 
-			{#if summary.controls.has("stroke")}
-				<div class="cv-section" role="group" aria-label={strokeLabel} data-testid="style-stroke">
-					<span class="cv-label" aria-hidden="true">{strokeLabel}</span>
-					<div class="cv-swatches">
-						{#each PEN_COLORS as swatch (swatch)}
-							<button
-								type="button"
-								class="cv-swatch"
-								aria-pressed={summary.values.stroke === swatch}
-								aria-label="{strokeLabel}: {labels.colors[swatch]}"
-								data-tip={labels.colors[swatch]}
-								style:--swatch="var(--pen-{swatch})"
-								onclick={() => change({ stroke: swatch })}
-							></button>
-						{/each}
-					</div>
-				</div>
-			{/if}
+							{#if controls.has("stroke")}
+								<div
+									class="cv-section"
+									role="group"
+									aria-label={strokeLabel}
+									data-testid="style-stroke"
+								>
+									<span class="cv-label" aria-hidden="true">{strokeLabel}</span>
+									<Toolbar.Group
+										type="single"
+										class="cv-swatches"
+										bind:value={() => values.stroke, (value) => pick("stroke", value)}
+									>
+										{#each PEN_COLORS as swatch (swatch)}
+											{@render colorItem(swatch, strokeLabel)}
+										{/each}
+									</Toolbar.Group>
+								</div>
+							{/if}
 
-			{#if summary.controls.has("width")}
-				<div class="cv-section" role="group" aria-label={labels.width} data-testid="style-width">
-					<span class="cv-label" aria-hidden="true">{labels.width}</span>
-					<div class="cv-swatches">
-						{#each LEVELS as level (level)}
-							<button
-								type="button"
-								class="cv-btn"
-								aria-pressed={summary.values.width === level}
-								aria-label="{labels.width}: {labels.widths[level]}"
-								data-tip={labels.widths[level]}
-								onclick={() => change({ width: level })}
-							>
-								<span class="cv-line" style:--line="{[1.5, 3, 5][level]}px"></span>
-							</button>
-						{/each}
-					</div>
-				</div>
-			{/if}
+							{#if controls.has("width")}
+								<div
+									class="cv-section"
+									role="group"
+									aria-label={labels.width}
+									data-testid="style-width"
+								>
+									<span class="cv-label" aria-hidden="true">{labels.width}</span>
+									<Toolbar.Group
+										type="single"
+										class="cv-swatches"
+										bind:value={() => String(values.width), (value) => pick("width", value)}
+									>
+										{#each LEVELS as level (level)}
+											<BarTooltip
+												label={labels.widths[level]}
+												name="{labels.width}: {labels.widths[level]}"
+												side="left"
+											>
+												{#snippet child({ props })}
+													<Toolbar.GroupItem {...props} value={String(level)} class="cv-btn">
+														<span class="cv-line" style:--line="{[1.5, 3, 5][level]}px"></span>
+													</Toolbar.GroupItem>
+												{/snippet}
+											</BarTooltip>
+										{/each}
+									</Toolbar.Group>
+								</div>
+							{/if}
 
-			{#if summary.controls.has("fontSize")}
-				<div class="cv-section" role="group" aria-label={labels.font} data-testid="style-font">
-					<span class="cv-label" aria-hidden="true">{labels.font}</span>
-					<div class="cv-swatches">
-						{#each FONT_SIZES as size (size)}
-							<button
-								type="button"
-								class="cv-btn cv-figure"
-								aria-pressed={summary.values.fontSize === size}
-								aria-label="{labels.font}: {size}"
-								onclick={() => change({ fontSize: size })}>{size}</button
-							>
-						{/each}
-						{#each WEIGHTS as weight (weight)}
-							<button
-								type="button"
-								class="cv-btn cv-figure"
-								style:font-weight={weight === "bold" ? 700 : 400}
-								aria-pressed={summary.values.fontWeight === weight}
-								aria-label={weight === "bold" ? labels.bold : labels.regular}
-								data-tip={weight === "bold" ? labels.bold : labels.regular}
-								onclick={() => change({ fontWeight: weight })}>Aa</button
-							>
-						{/each}
-					</div>
-				</div>
-			{/if}
-		</div>
+							{#if controls.has("fontSize")}
+								<div
+									class="cv-section"
+									role="group"
+									aria-label={labels.font}
+									data-testid="style-font"
+								>
+									<span class="cv-label" aria-hidden="true">{labels.font}</span>
+									<!-- Size and weight are two picks that share one grid, so each group lays out as its items. -->
+									<div class="cv-swatches">
+										<Toolbar.Group
+											type="single"
+											class="cv-contents"
+											bind:value={() => String(values.fontSize), (value) => pick("fontSize", value)}
+										>
+											{#each FONT_SIZES as size (size)}
+												<Toolbar.GroupItem
+													value={String(size)}
+													class="cv-btn cv-figure"
+													aria-label="{labels.font}: {size}">{size}</Toolbar.GroupItem
+												>
+											{/each}
+										</Toolbar.Group>
+										<Toolbar.Group
+											type="single"
+											class="cv-contents"
+											bind:value={() => values.fontWeight, (value) => pick("fontWeight", value)}
+										>
+											{#each WEIGHTS as weight (weight)}
+												<BarTooltip
+													label={weight === "bold" ? labels.bold : labels.regular}
+													side="left"
+												>
+													{#snippet child({ props })}
+														<Toolbar.GroupItem
+															{...props}
+															value={weight}
+															class="cv-btn cv-figure"
+															style="font-weight: {weight === 'bold' ? 700 : 400}"
+															>Aa</Toolbar.GroupItem
+														>
+													{/snippet}
+												</BarTooltip>
+											{/each}
+										</Toolbar.Group>
+									</div>
+								</div>
+							{/if}
+						</div>
+					{/snippet}
+				</Toolbar.Root>
+			{/key}
+		</Tooltip.Provider>
 	</Panel>
 {/if}
 
+{#snippet colorItem(swatch: PenColor, section: string)}
+	<BarTooltip label={labels.colors[swatch]} name="{section}: {labels.colors[swatch]}" side="left">
+		{#snippet child({ props })}
+			<Toolbar.GroupItem
+				{...props}
+				value={swatch}
+				class="cv-swatch"
+				style="--swatch: var(--pen-{swatch})"
+			/>
+		{/snippet}
+	</BarTooltip>
+{/snippet}
+
 <style>
 	@layer theme, base, components, utilities;
 
@@ -261,12 +333,17 @@
 			line-height: calc(16 / 12);
 		}
 
-		.cv-swatches {
+		/* Bits renders the groups and their items, so those classes are reached through the bar. */
+		.cv-style :global(.cv-swatches) {
 			display: grid;
 			grid-template-columns: repeat(3, var(--cv-btn));
 			gap: 0;
 		}
 
+		.cv-style :global(.cv-contents) {
+			display: contents;
+		}
+
 		.cv-line {
 			width: 18px;
 			height: var(--line);
@@ -274,13 +351,13 @@
 			background: currentColor;
 		}
 
-		.cv-figure {
+		.cv-style :global(.cv-figure) {
 			font-size: 12px;
 			font-variant-numeric: tabular-nums;
 		}
 
 		/* No fill is an empty disc struck through, since a swatch can't show the absence of a colour. */
-		.cv-swatch-none::before {
+		.cv-style :global(.cv-swatch-none)::before {
 			background:
 				linear-gradient(135deg, transparent 46%, var(--cv-ink-muted) 46% 54%, transparent 54%),
 				var(--cv-surface);

package/src/canvas/ui/canvas-ui.css

@@ -67,6 +67,14 @@
     pointer-events: none;
   }
 
+  /* A toolbar group lays its items out as if they sat in the bar itself. */
+  .cv-group {
+    display: flex;
+    flex-direction: inherit;
+    align-items: center;
+    gap: inherit;
+  }
+
   /* Groups are set apart by space, never by a rule. */
   .cv-gap {
     flex: none;
@@ -107,6 +115,7 @@
 
   /* One active style for a tool, a size, a brush and an open popover. */
   .cv-btn[aria-pressed="true"],
+  .cv-btn[data-state="on"],
   .cv-btn[aria-expanded="true"],
   .cv-btn[data-state="open"] {
     background: var(--cv-surface-hover);
@@ -169,7 +178,8 @@
     }
   }
 
-  .cv-swatch[aria-pressed="true"]::before {
+  .cv-swatch[aria-pressed="true"]::before,
+  .cv-swatch[data-state="on"]::before {
     box-shadow:
       0 0 0 2px var(--cv-surface),
       0 0 0 4px var(--cv-ink);
@@ -182,64 +192,9 @@
     background: currentColor;
   }
 
-  /* A label on hover, for a pointer that can hover. Touch gets the aria-label alone. */
-  @media (hover: hover) {
-    .cv-btn[data-tip]::after,
-    .cv-swatch[data-tip]::after {
-      content: attr(data-tip);
-      position: absolute;
-      bottom: calc(100% + 10px);
-      left: 50%;
-      translate: -50% 4px;
-      padding: 4px 8px;
-      border-radius: var(--radius-sm, 6px);
-      background: var(--foreground, #1c1c24);
-      color: var(--background, #fff);
-      font-size: 12px;
-      line-height: 1.2;
-      white-space: pre;
-      pointer-events: none;
-      opacity: 0;
-      z-index: 5;
-      transition:
-        opacity var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out),
-        translate var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out);
-    }
-
-    .cv-btn[data-tip]:hover::after,
-    .cv-btn[data-tip]:focus-visible::after,
-    .cv-swatch[data-tip]:hover::after,
-    .cv-swatch[data-tip]:focus-visible::after {
-      opacity: 1;
-      translate: -50% 0;
-      transition-delay: 350ms;
-    }
-
-    /* On the rail the label opens to the right. */
-    .cv-rail .cv-btn[data-tip]::after {
-      top: 50%;
-      bottom: auto;
-      left: calc(100% + 10px);
-      translate: -4px -50%;
-    }
-
-    .cv-rail .cv-btn[data-tip]:hover::after,
-    .cv-rail .cv-btn[data-tip]:focus-visible::after {
-      translate: 0 -50%;
-    }
-
-    .cv-btn:active::after,
-    .cv-btn:disabled::after,
-    .cv-btn[aria-expanded="true"]::after,
-    .cv-btn[data-state="open"]::after {
-      opacity: 0 !important;
-    }
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .cv-btn,
-    .cv-swatch::before,
-    .cv-btn[data-tip]::after {
+    .cv-swatch::before {
       transition: none;
     }
 
@@ -247,25 +202,6 @@
       scale: 1;
     }
   }
-
-  /* On a bar docked to the right edge the label opens to the left. */
-  @media (hover: hover) {
-    .cv-side .cv-btn[data-tip]::after,
-    .cv-side .cv-swatch[data-tip]::after {
-      top: 50%;
-      bottom: auto;
-      left: auto;
-      right: calc(100% + 10px);
-      translate: 4px -50%;
-    }
-
-    .cv-side .cv-btn[data-tip]:hover::after,
-    .cv-side .cv-btn[data-tip]:focus-visible::after,
-    .cv-side .cv-swatch[data-tip]:hover::after,
-    .cv-side .cv-swatch[data-tip]:focus-visible::after {
-      translate: 0 -50%;
-    }
-  }
 }
 
 @property --cv-fade-start {

package/src/charts/dashboard/data-table.svelte

@@ -43,9 +43,11 @@
 	 */
 	import { cn } from "../../lib/utils.js";
 	import RatingChip from "./rating-chip.svelte";
+	import Hint from "./hint.svelte";
 	import {
 		Pagination,
 		SortableHead,
+		TableSkeleton,
 		paginateRows,
 		totalPages,
 		type SortState,
@@ -127,6 +129,18 @@
 	});
 
 	const visible = $derived(pageSize ? paginateRows(sorted, page, pageSize) : sorted);
+
+	// Placeholder rows hold the 40px of a lead cell's padding, touch or not, and the rule sits
+	// outside it as before. Each cell keeps its column's padding, rule and breakpoint.
+	const loadingCell = "box-content h-10 any-pointer-coarse:h-10";
+	const loadingColumns = $derived([
+		{ width: "w-2/3", class: cn("px-4", loadingCell) },
+		...columns.map((column) => ({
+			width: "w-3/4",
+			align: column.align === "start" ? ("left" as const) : ("right" as const),
+			class: cn(columnClass(column), loadingCell),
+		})),
+	]);
 	const opens = $derived(Boolean(rowHref || onRowClick));
 
 	// Fewer rows than the page you stand on would draw an empty table.
@@ -182,96 +196,82 @@
 					<th
 						scope="col"
 						class={cn(column.align === "start" ? dataThClass : dataThNumClass, columnClass(column))}
-						title={column.hint}
 					>
-						{column.label}
+						<Hint text={column.hint}>{column.label}</Hint>
 					</th>
 				{/if}
 			{/each}
 		</tr>
 	</thead>
-	<tbody>
-		{#if loading}
-			{#each { length: LOADING_ROWS }, index (index)}
-				<tr class={dataTrClass} aria-hidden="true">
-					<td class={cn(dataTdClass, "py-3")}>
-						<span class="block h-4 w-2/3 animate-pulse rounded bg-muted"></span>
-					</td>
-					{#each columns as column (column.key)}
-						<td class={cn(dataTdNumClass, columnClass(column), "align-middle")}>
-							<span
-								class={cn(
-									"block h-4 w-3/4 animate-pulse rounded bg-muted",
-									column.align !== "start" && "ml-auto",
-								)}
-							></span>
-						</td>
-					{/each}
+	{#if loading}
+		<TableSkeleton rows={LOADING_ROWS} columns={loadingColumns} rowClass={dataTrClass} />
+	{:else}
+		<tbody>
+			{#if visible.length === 0 && empty}
+				<tr>
+					<td colspan={columns.length + 1}>{@render empty()}</td>
 				</tr>
-			{/each}
-		{:else if visible.length === 0 && empty}
-			<tr>
-				<td colspan={columns.length + 1}>{@render empty()}</td>
-			</tr>
-		{:else}
-			{#each visible as row (rowKey(row))}
-				<tr class={cn(dataTrClass, "group", opens && "relative cursor-pointer")}>
-					<td class={cn(dataTdClass, "py-3")}>
-						{#if rowHref}
-							<a href={rowHref(row)} class={stretch}>{@render lead(row)}</a>
-						{:else if onRowClick}
-							<button type="button" class={stretch} onclick={() => onRowClick(row)}>
-								{@render lead(row)}
-							</button>
-						{:else}
-							{@render lead(row)}
-						{/if}
-					</td>
-					{#each columns as column (column.key)}
-						<td
-							class={cn(
-								dataTdNumClass,
-								columnClass(column),
-								"align-middle whitespace-nowrap",
-								column.strong && "font-medium",
-								isMuted(column, row) && "text-muted-foreground",
-								column.negative?.(row) && "text-destructive-ink",
-							)}
-							title={column.title?.(row)}
-						>
-							{#if column.cell}
-								{@render column.cell(row)}
-							{:else if column.rating}
-								{@const rating = column.rating(row)}
-								{#if rating}
-									<RatingChip grade={rating.grade} hint={rating.hint} />
-								{:else}
-									<span class="text-muted-foreground">{emptyLabel}</span>
-								{/if}
+			{:else}
+				{#each visible as row (rowKey(row))}
+					<tr class={cn(dataTrClass, "group", opens && "relative cursor-pointer")}>
+						<td class={cn(dataTdClass, "py-3")}>
+							{#if rowHref}
+								<a href={rowHref(row)} class={stretch}>{@render lead(row)}</a>
+							{:else if onRowClick}
+								<button type="button" class={stretch} onclick={() => onRowClick(row)}>
+									{@render lead(row)}
+								</button>
 							{:else}
-								{@const value = column.value?.(row) ?? null}
-								{#if value === null}
-									<span class="text-muted-foreground">{emptyLabel}</span>
-								{:else if column.bar}
-									<span class="flex items-center justify-end gap-3">
-										<span class="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
-											<span
-												class="block h-full origin-left rounded-full bg-primary/70"
-												style:transform="scaleX({Math.min(1, Math.max(0, column.bar(row)))})"
-											></span>
-										</span>
-										<span>{value}</span>
-									</span>
-								{:else}
-									{value}
-								{/if}
+								{@render lead(row)}
 							{/if}
 						</td>
-					{/each}
-				</tr>
-			{/each}
-		{/if}
-	</tbody>
+						{#each columns as column (column.key)}
+							<td
+								class={cn(
+									dataTdNumClass,
+									columnClass(column),
+									"align-middle whitespace-nowrap",
+									column.strong && "font-medium",
+									isMuted(column, row) && "text-muted-foreground",
+									column.negative?.(row) && "text-destructive-ink",
+								)}
+							>
+								<Hint text={column.title?.(row)} class="block">
+									{#if column.cell}
+										{@render column.cell(row)}
+									{:else if column.rating}
+										{@const rating = column.rating(row)}
+										{#if rating}
+											<RatingChip grade={rating.grade} hint={rating.hint} />
+										{:else}
+											<span class="text-muted-foreground">{emptyLabel}</span>
+										{/if}
+									{:else}
+										{@const value = column.value?.(row) ?? null}
+										{#if value === null}
+											<span class="text-muted-foreground">{emptyLabel}</span>
+										{:else if column.bar}
+											<span class="flex items-center justify-end gap-3">
+												<span class="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
+													<span
+														class="block h-full origin-left rounded-full bg-primary/70"
+														style:transform="scaleX({Math.min(1, Math.max(0, column.bar(row)))})"
+													></span>
+												</span>
+												<span>{value}</span>
+											</span>
+										{:else}
+											{value}
+										{/if}
+									{/if}
+								</Hint>
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	{/if}
 </table>
 {#if pageSize && !loading}
 	<Pagination {page} {pageSize} total={sorted.length} onPageChange={(next) => (page = next)} />