@stll/ui 0.58.0 → 0.59.1

package/dist/calendar/day-calendar.d.ts

@@ -9,18 +9,28 @@ export type DayCalendarTone = {
 } | {
   type: "neutral";
 };
-/** Whether an entry is still provisional (drawn dashed) or final. */
-export type DayCalendarEntryState = "draft" | "final";
+/**
+ * Whether an entry is final, still provisional (dashed), or only proposed:
+ * a suggestion is not an entry yet, so it is drawn lighter, dashed, and is a
+ * button the caller acts on.
+ */
+export type DayCalendarEntryState = "draft" | "final" | "suggestion";
 type DayCalendarBlockFields = DayCalendarRange & {
   accessibleLabel: string;
-  detail?: ReactNode;
+  caption?: ReactNode;
   id: string;
   title: ReactNode;
   tone: DayCalendarTone;
+  /** Shown on hover, for example the apps a `mixed` block merged. */
+  tooltip?: ReactNode;
 };
 export type DayCalendarBlock = (DayCalendarBlockFields & {
   kind: "entry";
-  state: DayCalendarEntryState;
+  state: Exclude<DayCalendarEntryState, "suggestion">;
+}) | (DayCalendarBlockFields & {
+  kind: "entry";
+  onActivate: () => void;
+  state: "suggestion";
 }) | (DayCalendarBlockFields & {
   kind: "mixed";
 }) | (DayCalendarBlockFields & {

package/dist/calendar/day-calendar.js

@@ -1,7 +1,8 @@
 import { cn } from "../lib/utils.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "../components/tooltip.js";
 import { DAY_CALENDAR_SLOT_HEIGHT_PX, boundsHeight, extendRange, getDayBounds, getHourTicks, isRepeatedWallTime, layoutOverlaps, moveRange, offsetToTime, rangeFromDrag, slotAt, timeToOffset } from "./day-calendar.logic.js";
 import { resolveMatterColor } from "../lib/matter-colors.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { panic } from "better-result";
 import { Temporal } from "temporal-polyfill/full";
@@ -305,7 +306,7 @@ const ColumnBlocks = ({ blocks, grid }) => {
 		}, block.id);
 	});
 };
-/** Below this height a block puts its title and detail on one line. */
+/** Below this height a block puts its title and caption on one line. */
 const TWO_LINE_BLOCK_MIN_PX = 40;
 /** A brief block paints at least this tall, unless the grid ends sooner. */
 const BLOCK_MIN_PX = 6;
@@ -316,7 +317,8 @@ const BLOCK_KIND_CLASSES = {
 };
 const ENTRY_STATE_CLASSES = {
 	draft: "border border-dashed border-current/40",
-	final: ""
+	final: "",
+	suggestion: "border border-dashed border-current/45 outline-none hover:ring-1 hover:ring-ring/50 focus-visible:ring-2 focus-visible:ring-ring"
 };
 const DayCalendarBlockView = ({ block, grid, lane, range }) => {
 	const top = timeToOffset(range.startMs, grid);
@@ -327,36 +329,66 @@ const DayCalendarBlockView = ({ block, grid, lane, range }) => {
 		insetBlockStart: top,
 		insetInlineStart: `${String(lane.lane * 100 / lane.laneCount)}%`
 	};
+	const className = cn("text-foreground flex h-full w-full min-w-0 overflow-hidden rounded-md px-2.5 text-start text-xs", blockSize < TWO_LINE_BLOCK_MIN_PX ? "flex-row items-center gap-2" : "flex-col gap-0.5 py-1", BLOCK_KIND_CLASSES[block.kind], block.kind === "entry" && ENTRY_STATE_CLASSES[block.state], block.tone.type === "matter" && "border-s-[3px]", block.tone.type === "neutral" && "bg-muted");
+	const content = blockSize < 16 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "min-w-0 shrink-0 truncate font-medium",
+		children: block.title
+	}), block.caption === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground min-w-0 truncate tabular-nums",
+		children: block.caption
+	})] });
+	const shared = {
+		"aria-label": block.accessibleLabel,
+		className,
+		"data-block-id": block.id,
+		"data-kind": block.kind,
+		"data-slot": "day-calendar-block",
+		style: blockSurfaceStyle(block)
+	};
+	const surface = block.kind === "entry" && block.state === "suggestion" ? /* @__PURE__ */ jsx("button", {
+		...shared,
+		"data-state": block.state,
+		onClick: block.onActivate,
+		onKeyDown: (event) => event.stopPropagation(),
+		onPointerDown: (event) => event.stopPropagation(),
+		type: "button",
+		children: content
+	}) : /* @__PURE__ */ jsx("article", {
+		...shared,
+		"data-state": block.kind === "entry" ? block.state : void 0,
+		children: content
+	});
 	return /* @__PURE__ */ jsx("div", {
-		className: "pointer-events-none absolute px-1.5 py-px",
+		className: cn("absolute px-1.5 py-px", block.tooltip === void 0 && !(block.kind === "entry" && block.state === "suggestion") && "pointer-events-none"),
 		style: placement,
-		children: /* @__PURE__ */ jsxs("article", {
-			"aria-label": block.accessibleLabel,
-			className: cn("text-foreground flex h-full min-w-0 overflow-hidden rounded-md px-2.5 text-start text-xs", blockSize < TWO_LINE_BLOCK_MIN_PX ? "flex-row items-center gap-2" : "flex-col gap-0.5 py-1", BLOCK_KIND_CLASSES[block.kind], block.kind === "entry" && ENTRY_STATE_CLASSES[block.state], block.tone.type === "matter" && "border-s-[3px]", block.tone.type === "neutral" && "bg-muted"),
-			"data-kind": block.kind,
-			"data-slot": "day-calendar-block",
-			style: blockSurfaceStyle(block),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "min-w-0 shrink-0 truncate font-medium",
-				children: block.title
-			}), block.detail === void 0 ? null : /* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground min-w-0 truncate tabular-nums",
-				children: block.detail
-			})]
-		})
+		children: block.tooltip === void 0 ? surface : /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: surface }), /* @__PURE__ */ jsx(TooltipPopup, {
+			className: "max-w-72",
+			children: block.tooltip
+		})] })
 	});
 };
 const MIXED_STRIPES = "repeating-linear-gradient(135deg, var(--muted) 0 6px, transparent 6px 12px)";
+/** A suggestion's tint is half an entry's, so proposed time reads lighter. */
+const TONE_TINT_PERCENT = {
+	entry: 16,
+	suggestion: 8
+};
 function blockSurfaceStyle(block) {
 	const tone = block.tone;
 	const stripes = block.kind === "mixed" ? MIXED_STRIPES : void 0;
+	const suggestion = block.kind === "entry" && block.state === "suggestion";
 	switch (tone.type) {
-		case "neutral": return { backgroundImage: stripes };
+		case "neutral": return {
+			backgroundColor: suggestion ? "transparent" : void 0,
+			backgroundImage: stripes
+		};
 		case "matter": {
 			const color = resolveMatterColor(tone.matterId, tone.color);
+			const tint = suggestion ? TONE_TINT_PERCENT.suggestion : TONE_TINT_PERCENT.entry;
 			return {
-				backgroundColor: `color-mix(in srgb, ${color} 16%, var(--card))`,
+				backgroundColor: `color-mix(in srgb, ${color} ${String(tint)}%, var(--card))`,
 				backgroundImage: stripes,
+				borderColor: suggestion ? color : void 0,
 				borderInlineStartColor: color
 			};
 		}

package/dist/calendar/day-calendar.logic.d.ts

@@ -1,6 +1,9 @@
 //#region src/calendar/day-calendar.logic.d.ts
 export declare const DAY_CALENDAR_GRANULARITIES: readonly [15, 30, 60];
 export type DayCalendarGranularity = (typeof DAY_CALENDAR_GRANULARITIES)[number];
+/** Below this height a block cannot hold one line of its label, so it draws
+ * its surface only; its accessible label and tooltip still carry it. */
+export declare const DAY_CALENDAR_ONE_LINE_BLOCK_MIN_PX = 16;
 /**
  * Height of one grid slot. Coarser grids get taller slots, but not
  * proportionally: an hour stays tall enough for a two-line block.

package/dist/calendar/day-calendar.logic.js

@@ -6,6 +6,9 @@ const DAY_CALENDAR_GRANULARITIES = [
 	30,
 	60
 ];
+/** Below this height a block cannot hold one line of its label, so it draws
+* its surface only; its accessible label and tooltip still carry it. */
+const DAY_CALENDAR_ONE_LINE_BLOCK_MIN_PX = 16;
 /**
 * Height of one grid slot. Coarser grids get taller slots, but not
 * proportionally: an hour stays tall enough for a two-line block.
@@ -232,4 +235,4 @@ function compareIds(left, right) {
 	return left > right ? 1 : 0;
 }
 //#endregion
-export { DAY_CALENDAR_GRANULARITIES, DAY_CALENDAR_SLOT_HEIGHT_PX, boundsHeight, clampToBounds, extendRange, getDayBounds, getHourTicks, granularityMs, isRepeatedWallTime, layoutOverlaps, mergeShortSegments, moveRange, offsetToTime, rangeFromDrag, slotAt, snapToGrid, timeToOffset };
+export { DAY_CALENDAR_GRANULARITIES, DAY_CALENDAR_ONE_LINE_BLOCK_MIN_PX, DAY_CALENDAR_SLOT_HEIGHT_PX, boundsHeight, clampToBounds, extendRange, getDayBounds, getHourTicks, granularityMs, isRepeatedWallTime, layoutOverlaps, mergeShortSegments, moveRange, offsetToTime, rangeFromDrag, slotAt, snapToGrid, timeToOffset };

package/dist/components/scroll-area.js

@@ -13,7 +13,7 @@ const ScrollArea = ({ axis = "both", className, children, scrollFade = false, sc
 	children: [
 		/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 			ref: viewportRef,
-			className: cn("focus-visible:ring-ring focus-visible:ring-offset-background min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pe-2.5", AXIS_VIEWPORT_CLASS[axis]),
+			className: cn("focus-visible:ring-ring focus-visible:ring-offset-background relative min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pe-2.5", AXIS_VIEWPORT_CLASS[axis]),
 			"data-slot": "scroll-area-viewport",
 			children
 		}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.58.0",
+  "version": "0.59.1",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",