@stealthscale/component-messaging 0.1.0

package/dist/recipe-f6w25oLs.js

@@ -0,0 +1,693 @@
+import { FIELD_EDGE, PALETTES, axis, defineSlotRecipe, dense, flatVariants, onSlot, onSlots, paletteVariants, sizeVariants, surface, truncate, wrappedField, wrappedFieldVariants } from "@stealthscale/theme/authoring";
+//#region src/attachment/recipe.ts
+/**
+* Declares the attachment's slot recipe: a file attached to a message or waiting in a composer, and
+* the list that groups several.
+*
+* @remarks
+*   A horizontal attachment is a row: the media square, the title over the description, and the
+*   actions at the end. A vertical one is a tile: the media across the top, the words under it,
+*   and the actions over the media's corner. The root writes its state as `data-state`: an `idle`
+*   attachment, not yet sent, has a dashed edge, and a failed one has the error edge and inks its
+*   media and description in the error ink. The title and the description keep one line and end in
+*   an ellipsis, so a long file name never widens the list. A group stacks rows and wraps tiles.
+*/
+/**
+* Class name of the recipe, which a selector across parts reads.
+*/
+const CLASS$1 = "attachment";
+/**
+* Selects the media of an attachment, from a rule on its root.
+*/
+const MEDIA = `.${CLASS$1}__media`;
+/**
+* Selects the description of an attachment, from a rule on its root.
+*/
+const DESCRIPTION = `.${CLASS$1}__description`;
+/**
+* Sizes the attachment offers.
+*/
+const SIZES$2 = [
+	"xs",
+	"sm",
+	"md"
+];
+/**
+* Maps each size to its steps and text styles.
+*/
+const METRICS$2 = {
+	md: {
+		detail: "body.xs",
+		gap: "sm",
+		inset: "sm",
+		media: "md",
+		text: "label.sm"
+	},
+	sm: {
+		detail: "body.xs",
+		gap: "sm",
+		inset: "xs",
+		media: "sm",
+		text: "label.xs"
+	},
+	xs: {
+		detail: "body.xs",
+		gap: "xs",
+		inset: "xs",
+		media: "xs",
+		text: "label.xs"
+	}
+};
+/**
+* Styles a horizontal attachment at the middle size.
+*/
+const recipe$4 = defineSlotRecipe({
+	base: {
+		actions: {
+			alignItems: "center",
+			display: "flex",
+			flexShrink: "0",
+			gap: dense("{spacing.gap.xs}")
+		},
+		content: {
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			minInlineSize: "0"
+		},
+		description: {
+			...truncate(),
+			color: "fg.muted"
+		},
+		group: {
+			display: "flex",
+			gap: dense("{spacing.gap.sm}"),
+			listStyle: "none",
+			margin: "0",
+			minInlineSize: "0",
+			padding: "0"
+		},
+		media: {
+			"& > img": {
+				blockSize: "full",
+				inlineSize: "full",
+				objectFit: "cover"
+			},
+			"& > svg": {
+				blockSize: "50%",
+				inlineSize: "50%"
+			},
+			alignItems: "center",
+			aspectRatio: "square",
+			backgroundColor: "bg.muted",
+			borderRadius: "l1",
+			color: "fg.muted",
+			display: "flex",
+			flexShrink: "0",
+			justifyContent: "center",
+			overflow: "hidden"
+		},
+		root: {
+			"&[data-state=error]": {
+				[`& ${DESCRIPTION}, & ${MEDIA}`]: { color: "fg.error" },
+				borderColor: "border.error"
+			},
+			"&[data-state=idle]": { borderStyle: "dashed" },
+			alignItems: "center",
+			backgroundColor: "bg.panel",
+			borderColor: "border",
+			borderRadius: "l2",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			display: "flex",
+			maxInlineSize: "full",
+			minInlineSize: "0",
+			position: "relative"
+		},
+		title: {
+			...truncate(),
+			color: "fg",
+			fontWeight: "medium"
+		}
+	},
+	className: CLASS$1,
+	compoundVariants: [{
+		css: { media: { inlineSize: "full" } },
+		name: "tiled",
+		orientation: "vertical"
+	}],
+	defaultVariants: {
+		orientation: "horizontal",
+		size: "md"
+	},
+	jsx: [/^Attachment\.\w+$/u],
+	slots: [
+		"group",
+		"root",
+		"media",
+		"content",
+		"title",
+		"description",
+		"actions"
+	],
+	variants: {
+		/**
+		* Whether an attachment is a row or a tile, and whether a group stacks or wraps them.
+		*/
+		orientation: {
+			horizontal: {
+				group: { flexDirection: "column" },
+				root: {
+					flexDirection: "row",
+					minInlineSize: "min({sizes.40}, 100%)"
+				}
+			},
+			vertical: {
+				actions: {
+					insetBlockStart: dense("{spacing.inset.xs}"),
+					insetInlineEnd: dense("{spacing.inset.xs}"),
+					position: "absolute"
+				},
+				group: {
+					flexDirection: "row",
+					flexWrap: "wrap"
+				},
+				root: {
+					alignItems: "stretch",
+					flexDirection: "column",
+					inlineSize: "{sizes.32}"
+				}
+			}
+		},
+		size: onSlots({
+			description: sizeVariants((size) => ({ textStyle: METRICS$2[size].detail }), SIZES$2),
+			media: sizeVariants((size) => ({ inlineSize: dense(`{sizes.control.${METRICS$2[size].media}}`) }), SIZES$2),
+			root: sizeVariants((size) => ({
+				gap: dense(`{spacing.gap.${METRICS$2[size].gap}}`),
+				padding: dense(`{spacing.inset.${METRICS$2[size].inset}}`)
+			}), SIZES$2),
+			title: sizeVariants((size) => ({ textStyle: METRICS$2[size].text }), SIZES$2)
+		})
+	}
+});
+//#endregion
+//#region src/composer/recipe.ts
+/**
+* Declares the composer's slot recipe: the box a reader writes a message in, with a strip for the
+* message it replies to, the attachments, the text and a row of controls.
+*
+* @remarks
+*   The root is the theme's wrapped field, so its edge, surface, focus ring and states come from
+*   the textarea inside it, as in the input group. The text is a bare `textarea` that grows with
+*   its content through `field-sizing: content` and stops at the number of lines the input writes
+*   as {@link ROWS}, after which it scrolls. While files are dragged over it the box takes the focus
+*   edge. The submit control is pushed to the end of the row of controls. The strip sizes its
+*   leading glyph to its text and pushes a control after its words, such as a dismiss button, to
+*   its end.
+*/
+/**
+* Custom property the input writes: the most lines it grows to before it scrolls.
+*/
+const ROWS = "--composer-rows";
+/**
+* Custom property the size axis sets: the inset around the text and the controls.
+*/
+const INSET = "--composer-inset";
+/**
+* The inset, read from {@link INSET}.
+*/
+const PADDED = `var(${INSET})`;
+/**
+* Sizes the composer offers.
+*/
+const SIZES$1 = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Maps each size to its inset and text style.
+*/
+const METRICS$1 = {
+	lg: {
+		inset: "md",
+		text: "body.lg"
+	},
+	md: {
+		inset: "sm",
+		text: "body.md"
+	},
+	sm: {
+		inset: "xs",
+		text: "body.sm"
+	}
+};
+/**
+* Styles an outlined composer at the middle size.
+*/
+const recipe$3 = defineSlotRecipe({
+	base: {
+		attachments: {
+			paddingBlockStart: PADDED,
+			paddingInline: PADDED
+		},
+		context: {
+			"& > :not(button) + button": { marginInlineStart: "auto" },
+			"& > svg": {
+				blockSize: "1em",
+				flexShrink: "0",
+				inlineSize: "1em"
+			},
+			alignItems: "center",
+			backgroundColor: "bg.subtle",
+			borderStartEndRadius: "inherit",
+			borderStartStartRadius: "inherit",
+			color: "fg.muted",
+			display: "flex",
+			gap: dense("{spacing.gap.sm}"),
+			minInlineSize: "0",
+			paddingBlock: dense("{spacing.gap.xs}"),
+			paddingInline: PADDED,
+			textStyle: "label.sm"
+		},
+		detail: {
+			color: "fg.muted",
+			textStyle: "label.xs"
+		},
+		input: {
+			_placeholder: { color: "fg.muted" },
+			appearance: "none",
+			background: "transparent",
+			borderStyle: "none",
+			color: "fg",
+			display: "block",
+			fieldSizing: "content",
+			font: "inherit",
+			inlineSize: "full",
+			letterSpacing: "inherit",
+			maxBlockSize: `calc(var(${ROWS}) * 1lh + ${PADDED} * 2)`,
+			outline: "none",
+			padding: PADDED,
+			resize: "none"
+		},
+		root: {
+			...wrappedField(),
+			"&[data-dragging]": { [FIELD_EDGE]: "{colors.border.focus}" },
+			borderRadius: "l3",
+			display: "flex",
+			flexDirection: "column",
+			inlineSize: "full",
+			margin: "0",
+			minInlineSize: "0",
+			position: "relative"
+		},
+		submit: { marginInlineStart: "auto" },
+		suggestion: {
+			"&[aria-selected=true]": {
+				_highContrast: {
+					background: "Highlight",
+					color: "HighlightText",
+					forcedColorAdjust: "none"
+				},
+				layerStyle: "fill.muted"
+			},
+			alignItems: "baseline",
+			borderRadius: "l1",
+			cursor: "option",
+			display: "flex",
+			gap: dense("{spacing.gap.sm}"),
+			paddingBlock: dense("{spacing.gap.xs}"),
+			paddingInline: dense("{spacing.inset.sm}"),
+			textStyle: "label.sm"
+		},
+		suggestions: {
+			...surface("md"),
+			display: "flex",
+			flexDirection: "column",
+			insetBlockEnd: "100%",
+			insetInline: "0",
+			marginBlockEnd: dense("{spacing.gap.xs}"),
+			padding: dense("{spacing.inset.xs}"),
+			position: "absolute",
+			zIndex: "dropdown"
+		},
+		toolbar: {
+			alignItems: "center",
+			display: "flex",
+			gap: dense("{spacing.gap.xs}"),
+			paddingBlockEnd: PADDED,
+			paddingInline: PADDED
+		}
+	},
+	className: "composer",
+	defaultVariants: {
+		size: "md",
+		variant: "outline"
+	},
+	jsx: [/^Composer\.\w+$/u],
+	slots: [
+		"root",
+		"context",
+		"attachments",
+		"input",
+		"suggestions",
+		"suggestion",
+		"detail",
+		"toolbar",
+		"submit"
+	],
+	variants: {
+		size: onSlots({
+			input: sizeVariants((size) => ({ textStyle: METRICS$1[size].text }), SIZES$1),
+			root: sizeVariants((size) => ({ [INSET]: dense(`{spacing.inset.${METRICS$1[size].inset}}`) }), SIZES$1)
+		}),
+		variant: onSlot("root", wrappedFieldVariants())
+	}
+});
+//#endregion
+//#region src/conversation/recipe.ts
+/**
+* Declares the conversation's slot recipe: the transcript of turns, the control that jumps to the
+* latest message, and the row that shows another person typing.
+*
+* @remarks
+*   The root and the viewport are the primitives scroll area's, so the bar, the focus ring and the
+*   keyboard scrolling are its own. The content stacks the turns in a column. The jump trigger is
+*   placed over the turns at the middle of the transcript's bottom edge. The viewport contains its
+*   overscroll, so a wheel at either end of the transcript leaves the page where it is. The typing
+*   row's three dots pulse at the theme's ambient pace, each 200ms after the one before, and rest
+*   under reduced motion. The dots fill with `CanvasText` under forced colors, which remove the
+*   dots' `currentcolor` fill in Chromium.
+*/
+/**
+* Styles a transcript of turns 16px apart at the foundation's metrics.
+*/
+const recipe$2 = defineSlotRecipe({
+	base: {
+		content: {
+			display: "flex",
+			flexDirection: "column",
+			gap: dense("{spacing.gap.lg}")
+		},
+		dots: {
+			"& > span": {
+				_highContrast: {
+					background: "CanvasText",
+					forcedColorAdjust: "none"
+				},
+				_motionSafe: {
+					"&:nth-child(2)": { animationDelay: "{durations.moderate}" },
+					"&:nth-child(3)": { animationDelay: "{durations.slower}" }
+				},
+				animationStyle: "pulse",
+				backgroundColor: "currentcolor",
+				blockSize: "0.375em",
+				borderRadius: "full",
+				inlineSize: "0.375em"
+			},
+			alignItems: "center",
+			display: "inline-flex",
+			gap: "0.25em"
+		},
+		jumpTrigger: {
+			insetBlockEnd: dense("{spacing.inset.md}"),
+			left: "50%",
+			position: "absolute",
+			translate: "-50% 0",
+			zIndex: "docked"
+		},
+		root: { position: "relative" },
+		typing: {
+			alignItems: "center",
+			color: "fg.muted",
+			display: "flex",
+			gap: dense("{spacing.gap.sm}"),
+			textStyle: "label.sm"
+		},
+		viewport: { overscrollBehavior: "contain" }
+	},
+	className: "conversation",
+	jsx: [/^Conversation\.\w+$/u],
+	slots: [
+		"root",
+		"viewport",
+		"content",
+		"jumpTrigger",
+		"typing",
+		"dots"
+	]
+});
+//#endregion
+//#region src/message/recipe.ts
+/**
+* Declares the message's slot recipe, which lays out one turn of a conversation.
+*
+* @remarks
+*   A turn is the run of messages one person sent together. It has one avatar, one header and a
+*   bubble per message. `align="end"` puts the reader's own turns at the end of the line: the row
+*   runs the other way and the column aligns its bubbles to the end. A bubble takes the flat looks,
+*   because it is read and never pressed. It is at most 80% of the column wide, so the two sides of
+*   a conversation are apart. The plain look has no fill and no padding and takes the whole column,
+*   for an answer that reads as a document. A bubble has a hairline outline under forced colors,
+*   where every fill is replaced.
+*/
+/**
+* Class name of the recipe, which a selector across parts reads.
+*/
+const CLASS = "message";
+/**
+* Selects the actions of a turn, from a rule on the root.
+*/
+const ACTIONS = `.${CLASS}__actions`;
+/**
+* Sizes the message offers.
+*/
+const SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Maps each size to its steps and text styles.
+*/
+const METRICS = {
+	lg: {
+		gap: "lg",
+		inline: "md",
+		meta: "label.sm",
+		padding: "md",
+		text: "body.lg"
+	},
+	md: {
+		gap: "md",
+		inline: "sm",
+		meta: "label.xs",
+		padding: "sm",
+		text: "body.md"
+	},
+	sm: {
+		gap: "sm",
+		inline: "xs",
+		meta: "label.xs",
+		padding: "xs",
+		text: "body.sm"
+	}
+};
+/**
+* Ends of the line a turn can belong to, in the order a documentation page shows them.
+*/
+const SIDES = ["start", "end"];
+/**
+* Styles a turn at the start of the line in the neutral palette's subtle look, at the middle size.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		actions: {
+			alignItems: "center",
+			display: "flex",
+			gap: dense("{spacing.gap.xs}")
+		},
+		avatar: {
+			alignItems: "center",
+			display: "flex",
+			flexShrink: "0"
+		},
+		bubble: {
+			_highContrast: {
+				outlineColor: "CanvasText",
+				outlineStyle: "solid",
+				outlineWidth: "hairline"
+			},
+			"&[data-failed]": { colorPalette: "error" },
+			borderRadius: "l3",
+			maxInlineSize: "80%",
+			minInlineSize: "0",
+			overflowWrap: "anywhere"
+		},
+		content: {
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			gap: dense("{spacing.gap.xs}"),
+			minInlineSize: "0"
+		},
+		footer: {
+			alignItems: "center",
+			color: "fg.muted",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: dense("{spacing.gap.sm}")
+		},
+		header: {
+			alignItems: "baseline",
+			color: "fg.muted",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: dense("{spacing.gap.sm}")
+		},
+		root: {
+			alignItems: "flex-start",
+			display: "flex",
+			inlineSize: "full",
+			minInlineSize: "0"
+		},
+		status: {
+			"&[data-status=failed]": { color: "fg.error" },
+			"&[data-status=read]": {
+				color: "colorPalette.fg",
+				colorPalette: "primary"
+			},
+			"& > svg": {
+				blockSize: "1em",
+				flexShrink: "0",
+				inlineSize: "1em"
+			},
+			alignItems: "center",
+			display: "inline-flex",
+			gap: "0.25em"
+		}
+	},
+	className: CLASS,
+	compoundVariants: [{
+		css: { bubble: {
+			_highContrast: { outlineStyle: "none" },
+			maxInlineSize: "full",
+			paddingBlock: "0",
+			paddingInline: "0"
+		} },
+		look: "plain",
+		name: "document"
+	}],
+	defaultVariants: {
+		align: "start",
+		look: "subtle",
+		palette: "neutral",
+		reveal: "hover",
+		size: "md"
+	},
+	jsx: [/^Message\.\w+$/u],
+	slots: [
+		"root",
+		"avatar",
+		"content",
+		"header",
+		"bubble",
+		"footer",
+		"status",
+		"actions"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Which end of the line the turn belongs to: the row runs the other way at the end, and the
+		* column aligns its bubbles to that end.
+		*/
+		align: onSlots({
+			content: axis(SIDES, (side) => ({ alignItems: side === "start" ? "flex-start" : "flex-end" }))(),
+			root: axis(SIDES, (side) => ({ flexDirection: side === "start" ? "row" : "row-reverse" }))()
+		}),
+		look: onSlot("bubble", flatVariants()),
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* When the actions of the turn are visible.
+		*
+		* @remarks
+		*   With `hover`, the actions are transparent until a pointer is over the turn or focus is
+		*   inside it. A coarse pointer cannot hover, so under one they are always opaque. They are in
+		*   the tab order under both values, so Tab reveals them.
+		*/
+		reveal: {
+			always: { actions: { opacity: "1" } },
+			hover: {
+				actions: {
+					_touch: { opacity: "1" },
+					opacity: "0",
+					transitionDuration: "press",
+					transitionProperty: "common",
+					transitionTimingFunction: "press"
+				},
+				root: { [`&:focus-within ${ACTIONS}, &:hover ${ACTIONS}`]: { opacity: "1" } }
+			}
+		},
+		size: onSlots({
+			bubble: sizeVariants((size) => ({
+				paddingBlock: dense(`{spacing.gap.${METRICS[size].padding}}`),
+				paddingInline: dense(`{spacing.inset.${METRICS[size].inline}}`),
+				textStyle: METRICS[size].text
+			}), SIZES),
+			footer: sizeVariants((size) => ({ textStyle: METRICS[size].meta }), SIZES),
+			header: sizeVariants((size) => ({ textStyle: METRICS[size].meta }), SIZES),
+			root: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${METRICS[size].gap}}`) }), SIZES)
+		})
+	}
+});
+//#endregion
+//#region src/reactions/recipe.ts
+/**
+* Declares the reactions' slot recipe: a row of reactions under a message, and the choices of the
+* picker that adds one.
+*
+* @remarks
+*   Each reaction and each choice is the actions `Button`, so its looks, its pressed state and its
+*   focus ring are the button's own. The recipe lays out the row and the choices, and sets the
+*   glyphs and counts inside the buttons. The root is a `fieldset`, whose border, margin and
+*   padding the recipe removes. A count is set in tabular figures, so a count that changes keeps
+*   its width.
+*/
+/**
+* Styles a row of reactions 4px apart at the foundation's metrics.
+*/
+const recipe = defineSlotRecipe({
+	base: {
+		choices: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: dense("{spacing.gap.xs}")
+		},
+		count: { fontVariantNumeric: "tabular-nums" },
+		glyph: {
+			display: "inline-flex",
+			lineHeight: "1"
+		},
+		root: {
+			alignItems: "center",
+			borderWidth: "0",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: dense("{spacing.gap.xs}"),
+			margin: "0",
+			minInlineSize: "0",
+			padding: "0"
+		}
+	},
+	className: "reactions",
+	jsx: [/^Reactions\.\w+$/u],
+	slots: [
+		"root",
+		"glyph",
+		"count",
+		"choices"
+	]
+});
+//#endregion
+export { recipe$3 as a, ROWS as i, recipe$1 as n, recipe$4 as o, recipe$2 as r, recipe as t };

package/dist/rolldown-runtime-D7D4PA-g.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/dist/theme.d.ts

@@ -0,0 +1,11 @@
+//#region src/theme.d.ts
+/**
+ * Registers every recipe in the package in the preset an application's style compiler installs.
+ *
+ * @remarks
+ *   The list is written by hand. `theme.spec.ts` fails when a recipe file is missing from it, so no
+ *   generator writes it.
+ */
+declare const _default: import("@stealthscale/theme/authoring").Preset;
+//#endregion
+export { _default as default };