@ciridae/ui 0.16.1 → 1.0.1

package/dist/ciridae.css

@@ -1,492 +1,73 @@
-@import "@fontsource/host-grotesk/latin-400.css";
-@import "@fontsource/host-grotesk/latin-500.css";
-@import "@fontsource/ibm-plex-mono/latin-400.css";
-@import "@fontsource/ibm-plex-mono/latin-500.css";
-@import "./styled-system/styles.css";
-@import "tw-animate-css";
-
-/* Scan both development source exports and built package exports. */
-@source "./**/*.{js,mjs,ts,tsx}";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-	--background: oklch(0.985 0.001 260);
-	--foreground: oklch(0.145 0.002 260);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0.002 260);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0.002 260);
-	--primary: oklch(0.145 0.002 260);
-	--primary-foreground: oklch(0.99 0 0);
-	--secondary: oklch(0.955 0.002 260);
-	--secondary-foreground: oklch(0.2 0.002 260);
-	--muted: oklch(0.955 0.002 260);
-	--muted-foreground: oklch(0.46 0.003 260);
-	--accent: oklch(0.935 0.002 260);
-	--accent-foreground: oklch(0.18 0.002 260);
-	--destructive: oklch(0.48 0.13 27);
-	--destructive-foreground: oklch(0.99 0 0);
-	--border: oklch(0.865 0.002 260);
-	--input: oklch(0.835 0.002 260);
-	--ring: oklch(0.145 0.002 260);
-	--overlay: oklch(0.145 0.002 260 / 0.58);
-	--surface: oklch(1 0 0);
-	--surface-foreground: oklch(0.145 0.002 260);
-	--surface-inverse: oklch(0.145 0.002 260);
-	--surface-inverse-foreground: oklch(0.99 0 0);
-	--success: oklch(0.44 0.075 150);
-	--success-foreground: oklch(0.99 0 0);
-	--success-muted: oklch(0.94 0.03 150);
-	--info: oklch(0.43 0.045 245);
-	--info-foreground: oklch(0.99 0 0);
-	--info-muted: oklch(0.94 0.018 245);
-	--warning: oklch(0.52 0.075 85);
-	--warning-foreground: oklch(0.99 0 0);
-	--warning-muted: oklch(0.95 0.035 85);
-	--chart-1: oklch(0.22 0.002 260);
-	--chart-2: oklch(0.5 0.002 260);
-	--chart-3: oklch(0.72 0.002 260);
-	--chart-4: oklch(0.5 0.055 245);
-	--chart-5: oklch(0.5 0.07 150);
-	--sidebar: oklch(0.965 0.001 260);
-	--sidebar-foreground: oklch(0.23 0.002 260);
-	--sidebar-primary: oklch(0.145 0.002 260);
-	--sidebar-primary-foreground: oklch(0.99 0 0);
-	--sidebar-accent: oklch(0.935 0.002 260);
-	--sidebar-accent-foreground: oklch(0.18 0.002 260);
-	--sidebar-border: oklch(0.865 0.002 260);
-	--sidebar-ring: oklch(0.145 0.002 260);
-	--sidebar-padding: 0.625rem;
-	--sidebar-content-gap: 0.25rem;
-	--sidebar-group-padding: 0.5rem;
-	--sidebar-group-gap: 0.125rem;
-	--sidebar-menu-gap: 0.125rem;
-	--sidebar-item-height: 1.75rem;
-	--sidebar-item-height-sm: 1.5rem;
-	--sidebar-sub-item-height: 1.625rem;
-	--sidebar-item-padding-x: 0.5rem;
-	--sidebar-item-radius: calc(var(--radius) - 2px);
-	--sidebar-icon-size: 0.875rem;
-	--sidebar-active-indicator-width: 2px;
-	--sidebar-nested-indent: 1.125rem;
-	--radius: 0.3125rem;
-	--font-ciridae-sans:
-		"Host Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-		sans-serif;
-	--font-ciridae-display:
-		"Host Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-		sans-serif;
-	--font-ciridae-mono:
-		"IBM Plex Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
-	--font-ciridae-body-line-height: 1.46;
-	--font-ciridae-heading-weight: 400;
-	--font-ciridae-control-weight: 500;
-	--font-ciridae-strong-weight: 500;
-	--font-ciridae-metadata-weight: 500;
-	--font-ciridae-metadata-spacing: 0.035em;
-	--control-height: 2.125rem;
-	--control-height-sm: 1.875rem;
-	--control-height-xs: 1.5rem;
-	--control-padding-x: 0.75rem;
-	--control-gap: 0.375rem;
-	--panel-padding: 1.25rem;
-	--panel-gap: 1rem;
-	--table-row-height: 2rem;
-	--table-cell-padding-x: 0.625rem;
-	--table-cell-padding-y: 0.375rem;
-	--table-header-foreground: oklch(0.42 0.003 260);
-	--menu-item-height: 1.875rem;
-	--menu-item-padding-x: 0.5rem;
-	--badge-radius: var(--radius-sm);
-	--badge-padding-x: 0.375rem;
-	--focus-ring-width: 2px;
-	--motion-duration-fast: 120ms;
-	--motion-duration-base: 200ms;
-	--motion-duration-slow: 300ms;
-	--motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
-	--motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.dark {
-	--background: oklch(0.145 0.002 260);
-	--foreground: oklch(0.935 0.001 260);
-	--card: oklch(0.185 0.002 260);
-	--card-foreground: oklch(0.935 0.001 260);
-	--popover: oklch(0.205 0.002 260);
-	--popover-foreground: oklch(0.935 0.001 260);
-	--primary: oklch(0.965 0.001 260);
-	--primary-foreground: oklch(0.145 0.002 260);
-	--secondary: oklch(0.255 0.002 260);
-	--secondary-foreground: oklch(0.94 0.001 260);
-	--muted: oklch(0.255 0.002 260);
-	--muted-foreground: oklch(0.7 0.002 260);
-	--accent: oklch(0.275 0.002 260);
-	--accent-foreground: oklch(0.94 0.001 260);
-	--destructive: oklch(0.65 0.12 27);
-	--destructive-foreground: oklch(0.12 0.002 260);
-	--border: oklch(0.32 0.002 260);
-	--input: oklch(0.36 0.002 260);
-	--ring: oklch(0.88 0.001 260);
-	--overlay: oklch(0.08 0.001 260 / 0.72);
-	--surface: oklch(0.205 0.002 260);
-	--surface-foreground: oklch(0.935 0.001 260);
-	--surface-inverse: oklch(0.935 0.001 260);
-	--surface-inverse-foreground: oklch(0.145 0.002 260);
-	--success: oklch(0.68 0.075 150);
-	--success-foreground: oklch(0.12 0.002 260);
-	--success-muted: oklch(0.25 0.035 150);
-	--info: oklch(0.7 0.05 245);
-	--info-foreground: oklch(0.12 0.002 260);
-	--info-muted: oklch(0.25 0.028 245);
-	--warning: oklch(0.76 0.075 85);
-	--warning-foreground: oklch(0.12 0.002 260);
-	--warning-muted: oklch(0.27 0.04 85);
-	--chart-1: oklch(0.9 0.001 260);
-	--chart-2: oklch(0.68 0.002 260);
-	--chart-3: oklch(0.48 0.002 260);
-	--chart-4: oklch(0.72 0.065 245);
-	--chart-5: oklch(0.7 0.1 150);
-	--sidebar: oklch(0.18 0.002 260);
-	--sidebar-foreground: oklch(0.88 0.001 260);
-	--sidebar-primary: oklch(0.965 0.001 260);
-	--sidebar-primary-foreground: oklch(0.145 0.002 260);
-	--sidebar-accent: oklch(0.235 0.002 260);
-	--sidebar-accent-foreground: oklch(0.94 0.001 260);
-	--sidebar-border: oklch(0.32 0.002 260);
-	--sidebar-ring: oklch(0.88 0.001 260);
-	--table-header-foreground: oklch(0.78 0.002 260);
-}
-
-@theme inline {
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-destructive: var(--destructive);
-	--color-destructive-foreground: var(--destructive-foreground);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
-	--color-overlay: var(--overlay);
-	--color-surface: var(--surface);
-	--color-surface-foreground: var(--surface-foreground);
-	--color-surface-inverse: var(--surface-inverse);
-	--color-surface-inverse-foreground: var(--surface-inverse-foreground);
-	--color-success: var(--success);
-	--color-success-foreground: var(--success-foreground);
-	--color-success-muted: var(--success-muted);
-	--color-info: var(--info);
-	--color-info-foreground: var(--info-foreground);
-	--color-info-muted: var(--info-muted);
-	--color-warning: var(--warning);
-	--color-warning-foreground: var(--warning-foreground);
-	--color-warning-muted: var(--warning-muted);
-	--color-table-header-foreground: var(--table-header-foreground);
-	--color-chart-1: var(--chart-1);
-	--color-chart-2: var(--chart-2);
-	--color-chart-3: var(--chart-3);
-	--color-chart-4: var(--chart-4);
-	--color-chart-5: var(--chart-5);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-	--font-sans: var(--font-ciridae-sans);
-	--font-display: var(--font-ciridae-display);
-	--font-mono: var(--font-ciridae-mono);
-	--font-weight-medium: var(--font-ciridae-control-weight);
-	--font-weight-semibold: var(--font-ciridae-strong-weight);
-	--radius-sm: calc(var(--radius) - 2px);
-	--radius-md: var(--radius);
-	--radius-lg: calc(var(--radius) + 2px);
-	--radius-xl: calc(var(--radius) + 4px);
-	--shadow-xs: 0 1px 1px oklch(0 0 0 / 0.025);
-	--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04);
-	--shadow-md: 0 8px 20px oklch(0 0 0 / 0.07);
-	--shadow-lg: 0 16px 40px oklch(0 0 0 / 0.1);
-	--shadow-xl: 0 20px 56px oklch(0 0 0 / 0.12);
-	--shadow-sidebar-ring: 0 0 0 1px var(--sidebar-border);
-	--shadow-sidebar-ring-hover: 0 0 0 1px var(--sidebar-accent);
-	--ease-standard: var(--motion-ease-standard);
-	--ease-emphasized: var(--motion-ease-emphasized);
-	--animate-ciridae-fade-in: ciridae-fade-in var(--motion-duration-base) var(--motion-ease-standard)
-		both;
-	--animate-ciridae-slide-up: ciridae-slide-up var(--motion-duration-base)
-		var(--motion-ease-emphasized) both;
+[data-ciridae-ui] {
+	box-sizing: border-box;
+	color-scheme: dark;
+	/* The theme's sans token; the literal is what the default preset bakes, for use without it. */
+	font-family: var(--fonts-sans, "Inter Variable", Inter, sans-serif);
+	/* Grayscale smoothing, as the design renders it; subpixel smoothing reads a weight heavier. */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
-
-@utility container {
-	margin-inline: auto;
-	padding-inline: 1rem;
+/* Native controls and scrollbars read this rather than any token, so it has to
+   follow the theme attribute ThemeProvider writes onto the document element. */
+[data-ciridae-theme="light"] [data-ciridae-ui],
+[data-ciridae-theme="light"][data-ciridae-ui] {
+	color-scheme: light;
 }
-
-@media (width >= 768px) {
-	.container {
-		padding-inline: 1.5rem;
-	}
+[data-ciridae-ui] *,
+[data-ciridae-ui] *::before,
+[data-ciridae-ui] *::after {
+	box-sizing: inherit;
 }
-
-@media (width >= 1280px) {
-	.container {
-		max-width: 1180px;
+/* Base-layer defaults so Panda utility classes on components still win. */
+@layer base {
+	/* Browsers give form controls their own font; keep them on the Finalization typeface. */
+	:where([data-ciridae-ui] :is(button, input, textarea, select)),
+	:where(button, input, textarea)[data-ciridae-ui] {
+		font: inherit;
+		letter-spacing: inherit;
 	}
-}
-
-@keyframes ciridae-fade-in {
-	from {
-		opacity: 0;
+	/* Headings take the theme's display face; the body stays on sans. */
+	:where([data-ciridae-ui] :is(h1, h2, h3)) {
+		font-family: var(--fonts-display, var(--fonts-sans, "Inter Variable", Inter, sans-serif));
 	}
-	to {
-		opacity: 1;
+	/* Links take the surrounding color and never the browser underline; hover states opt in. */
+	:where([data-ciridae-ui] a, a[data-ciridae-ui]) {
+		color: inherit;
+		text-decoration: none;
 	}
 }
 
-@keyframes ciridae-slide-up {
-	from {
-		opacity: 0;
-		transform: translateY(6px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
+/* [data-edge] paints a hairline inside the element's own box, so bordered elements
+   keep a 1px transparent border for layout and borderless groups get an inset ring. */
+[data-ciridae-ui][data-edge] {
+	position: relative;
 }
-
-@keyframes ciridae-agentic-shimmer {
-	from {
-		background-position: 100% 0;
-	}
+[data-ciridae-ui][data-edge]::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	padding: 1px;
+	border-radius: inherit;
+	pointer-events: none;
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	mask-composite: exclude;
 }
-
-@layer base {
-	* {
-		@apply border-border outline-ring/50;
-	}
-
-	html {
-		@apply bg-background antialiased;
-		color-scheme: light;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		scroll-behavior: smooth;
-	}
-
-	html.dark {
-		color-scheme: dark;
-	}
-
-	body {
-		@apply min-h-svh bg-background font-sans text-foreground;
-		font-feature-settings:
-			"rlig" 1,
-			"calt" 1;
-		letter-spacing: 0;
-		line-height: var(--font-ciridae-body-line-height);
-	}
-
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		@apply font-display;
-		font-weight: var(--font-ciridae-heading-weight);
-		letter-spacing: 0;
-	}
-
-	::selection {
-		@apply bg-primary/15 text-foreground;
-	}
-
-	.shiki,
-	.shiki span {
-		background-color: transparent !important;
-	}
-
-	html.dark .shiki,
-	html.dark .shiki span {
-		color: var(--shiki-dark) !important;
-		background-color: transparent !important;
-		font-style: var(--shiki-dark-font-style);
-		font-weight: var(--shiki-dark-font-weight);
-		text-decoration: var(--shiki-dark-text-decoration);
-	}
-
-	button:not(:disabled),
-	[role="button"]:not(:disabled) {
-		cursor: pointer;
-	}
+[data-ciridae-ui][data-edge="glass"]::before {
+	background: var(--colors-border\.glass);
 }
-
-@layer utilities {
-	.text-balance {
-		text-wrap: balance;
-	}
-
-	.motion-standard {
-		transition-duration: var(--motion-duration-base);
-		transition-timing-function: var(--motion-ease-standard);
-	}
-
-	.motion-emphasized {
-		transition-duration: var(--motion-duration-base);
-		transition-timing-function: var(--motion-ease-emphasized);
-	}
-
-	.text-meta {
-		font-size: 0.6875rem;
-		font-weight: var(--font-ciridae-metadata-weight);
-		letter-spacing: var(--font-ciridae-metadata-spacing);
-		line-height: 1rem;
-		text-transform: uppercase;
-	}
-
-	.font-heading {
-		font-weight: var(--font-ciridae-heading-weight);
-	}
-
-	.font-control {
-		font-weight: var(--font-ciridae-control-weight);
-	}
-
-	.font-strong {
-		font-weight: var(--font-ciridae-strong-weight);
-	}
-
-	.font-mono {
-		font-variant-numeric: tabular-nums;
-	}
-
-	.agentic-shimmer {
-		--agentic-shimmer-bg-width: calc(
-			100% + var(--agentic-shimmer-track-width, 200px) + var(--agentic-shimmer-spread, 120px)
-		);
-		--agentic-shimmer-position: calc(
-			var(--agentic-shimmer-track-width, 200px) + var(--agentic-shimmer-spread, 120px) / 2
-		);
-		--agentic-shimmer-bg: var(--muted-foreground);
-		--agentic-shimmer-fg: var(
-			--agentic-shimmer-color,
-			color-mix(in oklch, var(--foreground) 86%, var(--primary) 14%)
-		);
-		--agentic-shimmer-mix-96: color-mix(
-			in oklch,
-			var(--agentic-shimmer-fg),
-			var(--agentic-shimmer-bg) 88%
-		);
-		--agentic-shimmer-mix-83: color-mix(
-			in oklch,
-			var(--agentic-shimmer-fg),
-			var(--agentic-shimmer-bg) 66%
-		);
-		--agentic-shimmer-mix-67: color-mix(
-			in oklch,
-			var(--agentic-shimmer-fg),
-			var(--agentic-shimmer-bg) 43%
-		);
-		--agentic-shimmer-mix-50: color-mix(
-			in oklch,
-			var(--agentic-shimmer-fg),
-			var(--agentic-shimmer-bg) 24%
-		);
-		--agentic-shimmer-mix-33: color-mix(
-			in oklch,
-			var(--agentic-shimmer-fg),
-			var(--agentic-shimmer-bg) 12%
-		);
-		--agentic-shimmer-mix-17: color-mix(
-			in oklch,
-			var(--agentic-shimmer-fg),
-			var(--agentic-shimmer-bg) 6%
-		);
-		--agentic-shimmer-mix-4: color-mix(
-			in oklch,
-			var(--agentic-shimmer-fg),
-			var(--agentic-shimmer-bg) 2%
-		);
-
-		animation: ciridae-agentic-shimmer var(--agentic-shimmer-duration, 2s) linear infinite backwards;
-		background: linear-gradient(
-				105deg,
-				var(--agentic-shimmer-bg)
-					calc(var(--agentic-shimmer-position) - var(--agentic-shimmer-spread, 120px) * 0.5),
-				var(--agentic-shimmer-mix-96)
-					calc(var(--agentic-shimmer-position) - var(--agentic-shimmer-spread, 120px) * 0.44),
-				var(--agentic-shimmer-mix-83)
-					calc(var(--agentic-shimmer-position) - var(--agentic-shimmer-spread, 120px) * 0.37),
-				var(--agentic-shimmer-mix-67)
-					calc(var(--agentic-shimmer-position) - var(--agentic-shimmer-spread, 120px) * 0.31),
-				var(--agentic-shimmer-mix-50)
-					calc(var(--agentic-shimmer-position) - var(--agentic-shimmer-spread, 120px) * 0.25),
-				var(--agentic-shimmer-mix-33)
-					calc(var(--agentic-shimmer-position) - var(--agentic-shimmer-spread, 120px) * 0.19),
-				var(--agentic-shimmer-mix-17)
-					calc(var(--agentic-shimmer-position) - var(--agentic-shimmer-spread, 120px) * 0.12),
-				var(--agentic-shimmer-mix-4)
-					calc(var(--agentic-shimmer-position) - var(--agentic-shimmer-spread, 120px) * 0.06),
-				var(--agentic-shimmer-fg) var(--agentic-shimmer-position),
-				var(--agentic-shimmer-mix-4)
-					calc(var(--agentic-shimmer-position) + var(--agentic-shimmer-spread, 120px) * 0.06),
-				var(--agentic-shimmer-mix-17)
-					calc(var(--agentic-shimmer-position) + var(--agentic-shimmer-spread, 120px) * 0.12),
-				var(--agentic-shimmer-mix-33)
-					calc(var(--agentic-shimmer-position) + var(--agentic-shimmer-spread, 120px) * 0.19),
-				var(--agentic-shimmer-mix-50)
-					calc(var(--agentic-shimmer-position) + var(--agentic-shimmer-spread, 120px) * 0.25),
-				var(--agentic-shimmer-mix-67)
-					calc(var(--agentic-shimmer-position) + var(--agentic-shimmer-spread, 120px) * 0.31),
-				var(--agentic-shimmer-mix-83)
-					calc(var(--agentic-shimmer-position) + var(--agentic-shimmer-spread, 120px) * 0.37),
-				var(--agentic-shimmer-mix-96)
-					calc(var(--agentic-shimmer-position) + var(--agentic-shimmer-spread, 120px) * 0.44),
-				var(--agentic-shimmer-bg)
-					calc(var(--agentic-shimmer-position) + var(--agentic-shimmer-spread, 120px) * 0.5)
-			)
-			0 0 / var(--agentic-shimmer-bg-width) 100% no-repeat;
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-	}
-
-	.dark .agentic-shimmer {
-		--agentic-shimmer-fg: var(
-			--agentic-shimmer-color,
-			color-mix(in oklch, var(--foreground) 82%, var(--primary) 18%)
-		);
-	}
+[data-ciridae-ui][data-edge="control"]::before {
+	background: var(--colors-border\.control);
 }
-
-@media (prefers-reduced-motion: reduce) {
-	*,
-	::before,
-	::after {
-		scroll-behavior: auto !important;
-		transition-duration: 0.01ms !important;
-		animation-duration: 0.01ms !important;
-		animation-iteration-count: 1 !important;
-	}
-
-	.agentic-shimmer {
-		animation: none !important;
-		background: none !important;
-		background-clip: border-box;
-		color: var(--muted-foreground) !important;
-		-webkit-text-fill-color: var(--muted-foreground) !important;
-	}
+[data-ciridae-ui][data-edge="toolbar"]::before {
+	background: var(--colors-border\.toolbar);
+}
+/* An open trigger draws its own border in the text color, so the ring steps aside. */
+[data-ciridae-ui][data-edge][data-popup-open]::before {
+	display: none;
 }

package/dist/components/activity-feed.d.ts

@@ -0,0 +1,80 @@
+import { type ReactNode, type RefObject } from "react";
+import { type CiridaeLabels } from "./locale.js";
+import { type UserChipProps } from "./user-chip.js";
+export type ActivityFeedActor = Pick<UserChipProps, "name" | "kind" | "src" | "icon" | "profile">;
+export type ActivityFeedUpdate = {
+    kind: "update";
+    id: string;
+    at: number;
+    actor: ActivityFeedActor;
+    /** What they did, read after their name: "moved Draw 3 to Inspected". */
+    text: ReactNode;
+    /** A line under it, such as the note sent with the move. */
+    detail?: ReactNode;
+};
+/** Something a comment points at: a person or agent by their avatar, a record by its icon. */
+export type ActivityFeedTag = {
+    id: string;
+    kind: "person" | "agent" | "record";
+    label: string;
+    /** A person's photo. */
+    src?: string;
+    /** A record's mark, such as its type's icon. */
+    icon?: ReactNode;
+    /** Where the posted tag links, such as the record's page. */
+    href?: string;
+    /** Beside the label in the picker: a person's title, a record's type. */
+    detail?: string;
+};
+/** A file posted with a comment; an image with a `url` shows as a thumbnail. */
+export type ActivityFeedAttachment = {
+    id: string;
+    name: string;
+    size?: number;
+    type?: string;
+    url?: string;
+};
+export type ActivityFeedComment = {
+    kind: "comment";
+    id: string;
+    at: number;
+    actor: ActivityFeedActor;
+    /** A string's `[@label](mention://kind/id)` mentions draw as chips, from `tags` or `tagOptions`. */
+    body: ReactNode;
+    attachments?: readonly ActivityFeedAttachment[];
+    tags?: readonly ActivityFeedTag[];
+    /** Written by whoever is reading: drawn on the right, as their own message. */
+    fromViewer?: boolean;
+};
+export type ActivityFeedItem = ActivityFeedUpdate | ActivityFeedComment;
+export type ActivityFeedFilterValue = "all" | "comments" | "updates";
+/** What the composer posts: the text with its mentions, the files waiting with it, and the tags mentioned. */
+export type ActivityFeedDraft = {
+    body: string;
+    files: File[];
+    tags: ActivityFeedTag[];
+};
+export type ActivityFeedProps = {
+    items: readonly ActivityFeedItem[];
+    filter?: ActivityFeedFilterValue;
+    /** Posts a comment; without it the feed has no composer and takes no files. */
+    onComment?: (draft: ActivityFeedDraft) => void;
+    /** What `@` (people and agents), `#` (records) and the Tag button offer; none hides tagging. */
+    tagOptions?: readonly ActivityFeedTag[];
+    /** The composer's placeholder; the locale's "Comment" by default. */
+    placeholder?: string;
+    /** When now is, for the Today and Yesterday labels; the render's time otherwise. */
+    now?: number;
+    /** Rewords the feed's labels over the locale's. */
+    labels?: Partial<ActivityLabels>;
+    /** The comment field, for a host that focuses it, such as from a hotkey. */
+    composerRef?: RefObject<HTMLDivElement | null>;
+};
+export type ActivityLabels = CiridaeLabels["activity"];
+export declare function ActivityFeed({ items, filter, onComment, tagOptions, placeholder, now, labels: ownLabels, composerRef, }: ActivityFeedProps): import("@types/react").JSX.Element;
+/** All, Comments or Updates, as a compact segmented control. */
+export declare function ActivityFeedFilter({ value, onValueChange, labels: ownLabels, }: {
+    value: ActivityFeedFilterValue;
+    onValueChange: (value: ActivityFeedFilterValue) => void;
+    labels?: Partial<ActivityLabels>;
+}): import("@types/react").JSX.Element;