@atproto-ui/core 0.13.0

package/dist/styles.js

@@ -0,0 +1,1728 @@
+var UNITLESS = new Set([
+	"fontWeight",
+	"lineHeight",
+	"opacity",
+	"zIndex",
+	"flex",
+	"flexGrow",
+	"flexShrink",
+	"order",
+	"aspectRatio"
+]);
+function camelToKebab(e) {
+	return e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+}
+function styleString(g) {
+	return Object.entries(g).map(([g, _]) => {
+		let v = typeof _ == "number" && !UNITLESS.has(g) ? `${_}px` : _;
+		return `${camelToKebab(g)}: ${v}`;
+	}).join("; ");
+}
+function mergeStyles(...e) {
+	return Object.assign({}, ...e.filter(Boolean));
+}
+var C = {
+	bg: "var(--atproto-color-bg)",
+	bgElevated: "var(--atproto-color-bg-elevated)",
+	bgSecondary: "var(--atproto-color-bg-secondary)",
+	text: "var(--atproto-color-text)",
+	textSecondary: "var(--atproto-color-text-secondary)",
+	textMuted: "var(--atproto-color-text-muted)",
+	border: "var(--atproto-color-border)",
+	link: "var(--atproto-color-link)",
+	imageBg: "var(--atproto-color-image-bg)",
+	error: "var(--atproto-color-error)"
+};
+const profileStyles = {
+	card: {
+		display: "flex",
+		flexDirection: "column",
+		height: "100%",
+		borderRadius: 12,
+		padding: 16,
+		fontFamily: "system-ui, sans-serif",
+		maxWidth: 480,
+		transition: "background-color 180ms ease, border-color 180ms ease, color 180ms ease",
+		position: "relative",
+		background: C.bg,
+		borderColor: C.border,
+		color: C.text
+	},
+	header: {
+		display: "flex",
+		gap: 12,
+		marginBottom: 8
+	},
+	avatar: {
+		width: 64,
+		height: 64,
+		borderRadius: "50%",
+		background: C.bgElevated
+	},
+	avatarImg: {
+		width: 64,
+		height: 64,
+		borderRadius: "50%",
+		objectFit: "cover"
+	},
+	info: { flex: 1 },
+	display: {
+		fontSize: 20,
+		fontWeight: 600,
+		color: C.text
+	},
+	handleLine: {
+		fontSize: 13,
+		color: C.textSecondary
+	},
+	desc: {
+		whiteSpace: "pre-wrap",
+		fontSize: 14,
+		lineHeight: 1.4,
+		color: C.text
+	},
+	meta: {
+		marginTop: 0,
+		fontSize: 12,
+		color: C.textSecondary
+	},
+	pronouns: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 4,
+		fontSize: 12,
+		fontWeight: 500,
+		borderRadius: 999,
+		padding: "2px 8px",
+		marginTop: 6,
+		background: C.bgElevated,
+		color: C.textSecondary
+	},
+	link: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 4,
+		fontSize: 12,
+		fontWeight: 600,
+		textDecoration: "none",
+		color: C.link
+	},
+	bottomRow: {
+		display: "flex",
+		alignItems: "flex-end",
+		justifyContent: "space-between",
+		marginTop: "auto",
+		paddingTop: 12
+	},
+	bottomLeft: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 8
+	},
+	stateAlert: {
+		padding: 8,
+		color: C.error
+	},
+	stateLoading: { padding: 8 }
+}, postStyles = {
+	card: {
+		borderRadius: 12,
+		padding: 12,
+		fontFamily: "system-ui, sans-serif",
+		display: "flex",
+		flexDirection: "column",
+		gap: 8,
+		maxWidth: 600,
+		transition: "background-color 180ms ease, border-color 180ms ease, color 180ms ease",
+		position: "relative",
+		border: "1px solid var(--atproto-color-border)",
+		background: C.bg,
+		color: C.text
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8
+	},
+	headerIcon: {
+		marginLeft: "auto",
+		display: "flex",
+		alignItems: "center"
+	},
+	avatarPlaceholder: {
+		width: 40,
+		height: 40,
+		borderRadius: "50%",
+		background: C.bgElevated
+	},
+	avatarImg: {
+		width: 40,
+		height: 40,
+		borderRadius: "50%",
+		objectFit: "cover"
+	},
+	identity: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	name: {
+		fontSize: 14,
+		fontWeight: 700
+	},
+	handle: {
+		fontSize: 12,
+		color: C.textSecondary
+	},
+	repostBanner: {
+		fontSize: 12,
+		color: C.textSecondary
+	},
+	replyLine: {
+		fontSize: 12,
+		color: C.textSecondary
+	},
+	replyLink: {
+		textDecoration: "none",
+		fontWeight: 500,
+		color: C.link
+	},
+	body: {
+		fontSize: 14,
+		lineHeight: 1.4
+	},
+	text: {
+		margin: 0,
+		fontSize: 14,
+		lineHeight: 1.4,
+		whiteSpace: "pre-wrap",
+		overflowWrap: "anywhere",
+		color: C.text
+	},
+	embedContainer: {
+		marginTop: 12,
+		padding: 8,
+		borderRadius: 12,
+		border: `1px solid ${C.border}`,
+		background: C.bgElevated,
+		display: "flex",
+		flexDirection: "column",
+		gap: 8
+	},
+	timestampRow: {
+		display: "flex",
+		justifyContent: "flex-end",
+		alignItems: "center",
+		gap: 12,
+		marginTop: 12,
+		flexWrap: "wrap"
+	},
+	time: {
+		fontSize: 11,
+		color: C.textMuted
+	},
+	postLink: {
+		fontSize: 11,
+		textDecoration: "none",
+		fontWeight: 600,
+		color: C.link
+	},
+	linkWithIcon: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 6
+	},
+	inlineIcon: {
+		display: "inline-flex",
+		alignItems: "center"
+	},
+	iconCorner: {
+		position: "absolute",
+		right: 12,
+		bottom: 12,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end"
+	},
+	threadContainer: {
+		display: "flex",
+		flexDirection: "column",
+		maxWidth: 600,
+		width: "100%",
+		background: C.bg,
+		position: "relative",
+		borderRadius: 12,
+		overflow: "hidden"
+	},
+	threadPost: { position: "relative" },
+	threadLayout: {
+		display: "flex",
+		gap: 8,
+		alignItems: "flex-start"
+	},
+	threadMain: {
+		flex: 1,
+		minWidth: 0
+	},
+	threadHeader: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		marginBottom: 4
+	},
+	threadIcon: { marginLeft: "auto" },
+	authorInline: {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		gap: 8
+	},
+	authorStack: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-start",
+		gap: 0
+	},
+	threadCornerIcon: {
+		position: "relative",
+		right: 0,
+		bottom: 0,
+		justifyContent: "flex-start",
+		marginTop: 8,
+		display: "flex"
+	},
+	quoteWrapper: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 8
+	},
+	imagesGrid: {
+		display: "grid",
+		gap: 8,
+		width: "100%"
+	},
+	imageItem: {
+		margin: 0,
+		display: "flex",
+		flexDirection: "column",
+		gap: 4
+	},
+	imageMedia: {
+		position: "relative",
+		width: "100%",
+		borderRadius: 12,
+		overflow: "hidden",
+		background: C.imageBg
+	},
+	imageImg: {
+		width: "100%",
+		height: "100%",
+		objectFit: "cover"
+	},
+	imagePlaceholder: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "100%",
+		minHeight: 120,
+		color: C.textMuted
+	},
+	imageCaption: {
+		fontSize: 12,
+		lineHeight: 1.3,
+		color: C.textSecondary
+	},
+	imageAltBadge: {
+		position: "absolute",
+		bottom: 8,
+		right: 8,
+		padding: "4px 8px",
+		fontSize: 10,
+		fontWeight: 600,
+		letterSpacing: "0.5px",
+		border: "none",
+		borderRadius: 4,
+		cursor: "pointer",
+		transition: "background 150ms ease, color 150ms ease",
+		fontFamily: "system-ui, sans-serif"
+	},
+	stateAlert: {
+		padding: 8,
+		color: C.error
+	},
+	stateLoading: { padding: 8 }
+}, blueskyPostListStyles = {
+	card: {
+		borderRadius: 16,
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: C.border,
+		boxShadow: "0 8px 18px -12px rgba(15, 23, 42, 0.25)",
+		overflow: "hidden",
+		display: "flex",
+		flexDirection: "column",
+		background: C.bg,
+		color: C.text
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: "14px 18px",
+		fontSize: 14,
+		fontWeight: 500,
+		borderBottom: `1px solid ${C.border}`,
+		background: C.bgElevated,
+		color: C.text
+	},
+	headerInfo: {
+		display: "flex",
+		alignItems: "center",
+		gap: 12
+	},
+	headerIcon: {
+		width: 28,
+		height: 28,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: "50%"
+	},
+	headerText: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2
+	},
+	title: {
+		fontSize: 15,
+		fontWeight: 600
+	},
+	subtitle: {
+		fontSize: 12,
+		fontWeight: 500,
+		color: C.textSecondary
+	},
+	pageMeta: {
+		fontSize: 12,
+		color: C.textSecondary
+	},
+	items: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	empty: {
+		padding: "24px 18px",
+		fontSize: 13,
+		textAlign: "center",
+		color: C.textSecondary
+	},
+	rowContainer: {
+		padding: 16,
+		display: "flex",
+		flexDirection: "column",
+		gap: 8,
+		transition: "background-color 120ms ease",
+		position: "relative"
+	},
+	rowDivider: { borderBottom: `1px solid ${C.border}` },
+	repostIndicator: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		fontSize: 13,
+		fontWeight: 500,
+		paddingLeft: 8,
+		marginBottom: 4
+	},
+	repostAvatar: {
+		width: 16,
+		height: 16,
+		borderRadius: "50%",
+		objectFit: "cover"
+	},
+	repostText: {
+		fontSize: 13,
+		fontWeight: 500,
+		color: C.textSecondary
+	},
+	replyIndicator: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		fontSize: 13,
+		fontWeight: 500,
+		paddingLeft: 8,
+		marginBottom: 4
+	},
+	replyAvatar: {
+		width: 16,
+		height: 16,
+		borderRadius: "50%",
+		objectFit: "cover"
+	},
+	replyText: {
+		fontSize: 13,
+		fontWeight: 500,
+		color: C.textSecondary
+	},
+	replyHandle: {
+		color: "#1185FE",
+		fontWeight: 600
+	},
+	postContent: {
+		display: "flex",
+		gap: 12
+	},
+	avatarContainer: { flexShrink: 0 },
+	avatar: {
+		width: 48,
+		height: 48,
+		borderRadius: "50%",
+		objectFit: "cover"
+	},
+	avatarPlaceholder: {
+		width: 48,
+		height: 48,
+		borderRadius: "50%",
+		background: C.bgElevated,
+		color: C.textSecondary,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: 18,
+		fontWeight: 600
+	},
+	postMain: {
+		flex: 1,
+		minWidth: 0,
+		display: "flex",
+		flexDirection: "column",
+		gap: 6
+	},
+	postHeader: {
+		display: "flex",
+		alignItems: "baseline",
+		gap: 6,
+		flexWrap: "wrap"
+	},
+	authorName: {
+		fontWeight: 700,
+		fontSize: 15,
+		textDecoration: "none",
+		maxWidth: 200,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		color: C.text
+	},
+	authorHandle: {
+		fontSize: 15,
+		fontWeight: 400,
+		maxWidth: 150,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		color: C.textSecondary
+	},
+	separator: {
+		fontSize: 15,
+		fontWeight: 400,
+		color: C.textSecondary
+	},
+	timestamp: {
+		fontSize: 15,
+		fontWeight: 400,
+		color: C.textSecondary
+	},
+	postLink: {
+		textDecoration: "none",
+		display: "block",
+		color: C.text
+	},
+	postText: {
+		margin: 0,
+		whiteSpace: "pre-wrap",
+		fontSize: 15,
+		lineHeight: 1.5,
+		wordBreak: "break-word"
+	},
+	emptyPostText: {
+		margin: 0,
+		whiteSpace: "pre-wrap",
+		fontSize: 15,
+		lineHeight: 1.5,
+		wordBreak: "break-word",
+		fontStyle: "italic",
+		color: C.textSecondary
+	},
+	footer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: "12px 18px",
+		borderTop: `1px solid ${C.border}`,
+		fontSize: 13,
+		color: C.text
+	},
+	pageChips: {
+		display: "flex",
+		gap: 6,
+		alignItems: "center"
+	},
+	pageChip: {
+		padding: "4px 10px",
+		borderRadius: 999,
+		fontSize: 13,
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: C.border,
+		color: C.textSecondary,
+		background: C.bg
+	},
+	pageChipActive: {
+		padding: "4px 10px",
+		borderRadius: 999,
+		fontSize: 13,
+		fontWeight: 600,
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: "var(--atproto-color-button-bg)",
+		color: "var(--atproto-color-button-text)",
+		background: "var(--atproto-color-button-bg)"
+	},
+	pageButton: {
+		border: "none",
+		borderRadius: 999,
+		padding: "6px 12px",
+		fontSize: 13,
+		fontWeight: 500,
+		background: "var(--atproto-color-button-bg)",
+		color: "var(--atproto-color-button-text)",
+		display: "flex",
+		alignItems: "center",
+		gap: 4,
+		transition: "background-color 120ms ease"
+	},
+	loadingBar: {
+		padding: "4px 18px 14px",
+		fontSize: 12,
+		textAlign: "right",
+		background: C.bgElevated,
+		color: C.textSecondary
+	},
+	stateAlert: {
+		padding: 8,
+		color: C.error
+	}
+}, cardStyles = {
+	card: {
+		border: `1px solid ${C.border}`,
+		background: C.bg,
+		color: C.text,
+		borderRadius: 12,
+		padding: 12,
+		fontFamily: "system-ui, sans-serif"
+	},
+	cardWide: {
+		maxWidth: 720,
+		width: "100%",
+		border: `1px solid ${C.border}`,
+		background: C.bg,
+		color: C.text,
+		borderRadius: 12,
+		padding: 20,
+		fontFamily: "system-ui, sans-serif"
+	},
+	stateAlert: {
+		padding: 8,
+		color: C.error
+	},
+	stateLoading: { padding: 8 },
+	errorText: { color: C.error },
+	loadingText: { color: C.textSecondary },
+	muted: { color: C.textSecondary },
+	descBlock: {
+		margin: "0 0 10px",
+		color: C.textSecondary
+	},
+	heading: { margin: "0 0 6px" },
+	headingLg: { margin: "0 0 8px" },
+	pill: {
+		border: `1px solid ${C.border}`,
+		borderRadius: 999,
+		padding: "2px 8px"
+	}
+}, tangledStyles = {
+	container: {
+		fontFamily: "system-ui, sans-serif",
+		borderRadius: 6,
+		overflow: "hidden",
+		transition: "background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease",
+		width: "100%",
+		background: C.bg,
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: C.border,
+		color: C.text
+	},
+	header: {
+		padding: 16,
+		display: "flex",
+		flexDirection: "column",
+		background: C.bg
+	},
+	headerTop: {
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "flex-start",
+		gap: 12
+	},
+	headerRight: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8
+	},
+	repoName: {
+		fontFamily: "SFMono-Regular, ui-monospace, Menlo, Monaco, \"Courier New\", monospace",
+		fontSize: 18,
+		fontWeight: 600,
+		wordBreak: "break-word",
+		margin: 0,
+		color: C.text
+	},
+	iconLink: {
+		display: "flex",
+		alignItems: "center",
+		textDecoration: "none",
+		opacity: .7,
+		transition: "opacity 150ms ease",
+		color: C.text
+	},
+	description: {
+		padding: "0 16px 16px 16px",
+		fontSize: 14,
+		lineHeight: 1.5,
+		background: C.bg,
+		color: C.textSecondary
+	},
+	languageSection: {
+		padding: "0 16px 16px 16px",
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		gap: 12,
+		flexWrap: "wrap",
+		background: C.bg
+	},
+	languageTags: {
+		display: "flex",
+		gap: 8,
+		flexWrap: "wrap"
+	},
+	languageTag: {
+		fontSize: 12,
+		fontWeight: 500,
+		padding: "4px 10px",
+		background: C.bg,
+		borderRadius: 12,
+		border: `1px solid ${C.border}`
+	},
+	rightSection: {
+		display: "flex",
+		alignItems: "center",
+		gap: 12
+	},
+	starCountContainer: {
+		display: "flex",
+		alignItems: "center",
+		gap: 4,
+		fontSize: 13,
+		color: C.textSecondary
+	},
+	starCount: {
+		fontSize: 13,
+		fontWeight: 500
+	},
+	viewLink: {
+		fontSize: 13,
+		fontWeight: 500,
+		textDecoration: "none",
+		color: C.link
+	}
+};
+var MONO = "SFMono-Regular, ui-monospace, Menlo, Monaco, \"Courier New\", monospace";
+const tangledStringStyles = {
+	container: {
+		fontFamily: "system-ui, sans-serif",
+		borderRadius: 6,
+		overflow: "hidden",
+		transition: "background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease",
+		width: "100%",
+		background: C.bgElevated,
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: C.border,
+		color: C.text
+	},
+	header: {
+		padding: "10px 16px",
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		gap: 12,
+		background: C.bgElevated,
+		borderBottomWidth: "1px",
+		borderBottomStyle: "solid",
+		borderBottomColor: C.border
+	},
+	headerRight: {
+		display: "flex",
+		alignItems: "center",
+		gap: 12,
+		flexWrap: "wrap",
+		justifyContent: "flex-end"
+	},
+	filename: {
+		fontFamily: MONO,
+		fontSize: 13,
+		wordBreak: "break-all",
+		color: C.text
+	},
+	timestamp: {
+		fontSize: 12,
+		color: C.textSecondary
+	},
+	headerLink: {
+		fontSize: 12,
+		fontWeight: 600,
+		textDecoration: "none",
+		color: C.link
+	},
+	description: {
+		padding: "10px 16px",
+		fontSize: 13,
+		background: C.bg,
+		borderTopWidth: "1px",
+		borderTopStyle: "solid",
+		borderTopColor: C.border,
+		borderBottomWidth: "1px",
+		borderBottomStyle: "solid",
+		borderBottomColor: C.border,
+		color: C.text
+	},
+	codeBlock: {
+		margin: 0,
+		padding: 16,
+		fontSize: 13,
+		overflowX: "auto",
+		background: C.bg,
+		color: C.text,
+		borderTopWidth: "1px",
+		borderTopStyle: "solid",
+		borderTopColor: C.border,
+		fontFamily: MONO
+	}
+}, leafletStyles = {
+	article: cardStyles.cardWide,
+	title: { margin: "0 0 8px" },
+	desc: { color: C.textSecondary },
+	page: { marginTop: 16 },
+	pageText: {
+		whiteSpace: "pre-wrap",
+		lineHeight: 1.55
+	}
+}, grainStyles = {
+	card: cardStyles.card,
+	title: { margin: "0 0 6px" },
+	desc: cardStyles.descBlock,
+	grid: {
+		display: "grid",
+		gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
+		gap: 8
+	},
+	tile: {
+		aspectRatio: 1,
+		borderRadius: 8,
+		background: C.bgSecondary,
+		display: "grid",
+		placeItems: "center",
+		color: C.textMuted,
+		fontSize: 12
+	}
+}, tealStyles = {
+	card: cardStyles.card,
+	label: {
+		fontSize: 11,
+		fontWeight: 700,
+		letterSpacing: ".08em",
+		color: C.textSecondary
+	},
+	trackName: {
+		fontSize: 18,
+		fontWeight: 700,
+		marginTop: 6
+	},
+	artist: { color: C.textSecondary },
+	list: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 10,
+		fontFamily: "system-ui, sans-serif"
+	},
+	grid: {
+		display: "grid",
+		gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
+		gap: 8
+	},
+	songCard: {
+		border: `1px solid ${C.border}`,
+		borderRadius: 10,
+		padding: 10,
+		background: C.bg,
+		color: C.text
+	},
+	songName: { fontWeight: 700 },
+	songArtist: {
+		fontSize: 13,
+		color: C.textSecondary
+	},
+	pager: {
+		display: "flex",
+		justifyContent: "space-between",
+		gap: 8
+	}
+}, tealStatusStyles = {
+	container: {
+		fontFamily: "system-ui, -apple-system, sans-serif",
+		display: "flex",
+		flexDirection: "column",
+		background: C.bg,
+		borderRadius: 16,
+		overflow: "hidden",
+		maxWidth: 420,
+		color: C.text,
+		boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)",
+		border: `1px solid ${C.border}`
+	},
+	artworkContainer: {
+		width: "100%",
+		aspectRatio: "1 / 1",
+		position: "relative",
+		overflow: "hidden"
+	},
+	artwork: {
+		width: "100%",
+		height: "100%",
+		objectFit: "cover",
+		display: "block"
+	},
+	artworkPlaceholder: {
+		width: "100%",
+		height: "100%",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+		color: "rgba(255, 255, 255, 0.5)"
+	},
+	loadingSpinner: {
+		width: 40,
+		height: 40,
+		border: `3px solid ${C.border}`,
+		borderTop: "3px solid var(--atproto-color-primary)",
+		borderRadius: "50%",
+		animation: "atproto-spin 1s linear infinite"
+	},
+	content: {
+		padding: 24,
+		display: "flex",
+		flexDirection: "column",
+		gap: 8
+	},
+	label: {
+		fontSize: 11,
+		fontWeight: 600,
+		letterSpacing: "0.1em",
+		textTransform: "uppercase",
+		color: C.textSecondary,
+		marginBottom: 4
+	},
+	trackName: {
+		fontSize: 28,
+		fontWeight: 700,
+		margin: 0,
+		lineHeight: 1.2,
+		color: C.text
+	},
+	artistName: {
+		fontSize: 16,
+		color: C.textSecondary,
+		marginTop: 4
+	},
+	releaseName: {
+		fontSize: 14,
+		color: C.textSecondary,
+		marginTop: 2
+	},
+	listenButton: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 8,
+		marginTop: 16,
+		padding: "12px 20px",
+		background: C.bgElevated,
+		border: `1px solid ${C.border}`,
+		borderRadius: 24,
+		color: C.text,
+		fontSize: 14,
+		fontWeight: 600,
+		textDecoration: "none",
+		cursor: "pointer",
+		transition: "all 0.2s ease",
+		alignSelf: "flex-start"
+	},
+	modalOverlay: {
+		position: "fixed",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		backgroundColor: "rgba(0, 0, 0, 0.85)",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		zIndex: 9999,
+		backdropFilter: "blur(4px)"
+	},
+	modalContent: {
+		background: C.bg,
+		borderRadius: 16,
+		maxWidth: 450,
+		width: "90%",
+		maxHeight: "80vh",
+		overflow: "auto",
+		boxShadow: "0 20px 60px rgba(0, 0, 0, 0.8)",
+		border: `1px solid ${C.border}`
+	},
+	modalHeader: {
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		padding: "24px 24px 16px 24px",
+		borderBottom: `1px solid ${C.border}`
+	},
+	modalTitle: {
+		margin: 0,
+		fontSize: 20,
+		fontWeight: 700,
+		color: C.text
+	},
+	closeButton: {
+		background: "transparent",
+		border: "none",
+		color: C.textSecondary,
+		fontSize: 32,
+		cursor: "pointer",
+		padding: 0,
+		width: 32,
+		height: 32,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: "50%",
+		lineHeight: 1
+	},
+	platformList: {
+		padding: 16,
+		display: "flex",
+		flexDirection: "column",
+		gap: 8
+	},
+	platformItem: {
+		display: "flex",
+		alignItems: "center",
+		gap: 16,
+		padding: 16,
+		background: "var(--atproto-color-bg-hover)",
+		borderRadius: 12,
+		textDecoration: "none",
+		color: C.text,
+		cursor: "pointer",
+		border: `1px solid ${C.border}`
+	},
+	platformIcon: {
+		width: 32,
+		height: 32,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	platformName: {
+		flex: 1,
+		fontSize: 16,
+		fontWeight: 600
+	},
+	platformArrow: { opacity: .5 },
+	notListeningContainer: {
+		fontFamily: "system-ui, -apple-system, sans-serif",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		background: C.bg,
+		borderRadius: 16,
+		padding: "80px 40px",
+		maxWidth: 420,
+		color: C.textSecondary,
+		border: `1px solid ${C.border}`,
+		textAlign: "center"
+	},
+	notListeningIcon: {
+		width: 120,
+		height: 120,
+		borderRadius: "50%",
+		background: C.bgElevated,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		marginBottom: 24,
+		color: C.textMuted
+	},
+	notListeningTitle: {
+		fontSize: 18,
+		fontWeight: 600,
+		color: C.text,
+		marginBottom: 8
+	},
+	notListeningSubtitle: {
+		fontSize: 14,
+		color: C.textSecondary
+	}
+}, songHistoryStyles = {
+	card: {
+		borderRadius: 16,
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: C.border,
+		boxShadow: "0 8px 18px -12px rgba(15, 23, 42, 0.25)",
+		overflow: "hidden",
+		display: "flex",
+		flexDirection: "column",
+		background: C.bg
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: "14px 18px",
+		fontSize: 14,
+		fontWeight: 500,
+		borderBottom: `1px solid ${C.border}`,
+		background: C.bgElevated,
+		color: C.text
+	},
+	headerInfo: {
+		display: "flex",
+		alignItems: "center",
+		gap: 12
+	},
+	headerIcon: {
+		width: 28,
+		height: 28,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: "50%",
+		color: C.text
+	},
+	headerText: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2
+	},
+	title: {
+		fontSize: 15,
+		fontWeight: 600
+	},
+	subtitle: {
+		fontSize: 12,
+		fontWeight: 500,
+		color: C.textSecondary
+	},
+	pageMeta: {
+		fontSize: 12,
+		color: C.textSecondary
+	},
+	items: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	empty: {
+		padding: "24px 18px",
+		fontSize: 13,
+		textAlign: "center",
+		color: C.textSecondary
+	},
+	row: {
+		padding: 18,
+		display: "flex",
+		gap: 16,
+		alignItems: "center",
+		position: "relative",
+		color: C.text
+	},
+	rowDivider: { borderBottom: `1px solid ${C.border}` },
+	albumArtContainer: {
+		width: 96,
+		height: 96,
+		flexShrink: 0,
+		borderRadius: 8,
+		overflow: "hidden",
+		boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
+	},
+	albumArt: {
+		width: "100%",
+		height: "100%",
+		objectFit: "cover",
+		display: "block"
+	},
+	albumArtPlaceholder: {
+		width: "100%",
+		height: "100%",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+		color: "rgba(255, 255, 255, 0.6)"
+	},
+	loadingSpinner: {
+		width: 28,
+		height: 28,
+		border: "3px solid rgba(255, 255, 255, 0.3)",
+		borderTop: "3px solid rgba(255, 255, 255, 0.9)",
+		borderRadius: "50%",
+		animation: "atproto-spin 1s linear infinite"
+	},
+	songInfo: {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+		gap: 4,
+		minWidth: 0
+	},
+	trackName: {
+		fontSize: 16,
+		fontWeight: 600,
+		lineHeight: 1.3,
+		color: C.text,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	artistName: {
+		fontSize: 14,
+		fontWeight: 500,
+		color: C.textSecondary,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	releaseName: {
+		fontSize: 13,
+		color: C.textSecondary,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	playedTime: {
+		fontSize: 12,
+		fontWeight: 500,
+		marginTop: 2,
+		color: C.textSecondary
+	},
+	externalLink: {
+		flexShrink: 0,
+		width: 36,
+		height: 36,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: "50%",
+		background: C.bgElevated,
+		border: `1px solid ${C.border}`,
+		color: C.textSecondary,
+		cursor: "pointer",
+		textDecoration: "none"
+	},
+	footer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: "12px 18px",
+		borderTop: `1px solid ${C.border}`,
+		fontSize: 13,
+		color: C.text
+	},
+	pageChips: {
+		display: "flex",
+		gap: 6,
+		alignItems: "center"
+	},
+	pageChip: {
+		padding: "4px 10px",
+		borderRadius: 999,
+		fontSize: 13,
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: C.border,
+		color: C.textSecondary,
+		background: C.bg
+	},
+	pageChipActive: {
+		padding: "4px 10px",
+		borderRadius: 999,
+		fontSize: 13,
+		fontWeight: 600,
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: "var(--atproto-color-button-bg)",
+		color: "var(--atproto-color-button-text)",
+		background: "var(--atproto-color-button-bg)"
+	},
+	pageButton: {
+		border: "none",
+		borderRadius: 999,
+		padding: "6px 12px",
+		fontSize: 13,
+		fontWeight: 500,
+		background: "var(--atproto-color-button-bg)",
+		color: "var(--atproto-color-button-text)",
+		display: "flex",
+		alignItems: "center",
+		gap: 4
+	},
+	loadingBar: {
+		padding: "4px 18px 14px",
+		fontSize: 12,
+		textAlign: "right",
+		background: C.bgElevated,
+		color: C.textSecondary
+	}
+}, grainGalleryStyles = {
+	card: {
+		borderRadius: 12,
+		border: `1px solid ${C.border}`,
+		background: C.bg,
+		color: C.text,
+		fontFamily: "system-ui, sans-serif",
+		display: "flex",
+		flexDirection: "column",
+		maxWidth: 600,
+		transition: "background-color 180ms ease, border-color 180ms ease, color 180ms ease",
+		overflow: "hidden"
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		gap: 12,
+		padding: 12,
+		paddingBottom: 0
+	},
+	avatarPlaceholder: {
+		width: 32,
+		height: 32,
+		borderRadius: "50%",
+		background: C.border
+	},
+	avatarImg: {
+		width: 32,
+		height: 32,
+		borderRadius: "50%",
+		objectFit: "cover"
+	},
+	authorInfo: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2
+	},
+	displayName: {
+		fontSize: 14,
+		fontWeight: 600
+	},
+	handle: {
+		fontSize: 12,
+		color: C.textSecondary
+	},
+	galleryInfo: {
+		padding: 12,
+		paddingBottom: 8
+	},
+	title: {
+		margin: 0,
+		fontSize: 18,
+		fontWeight: 600,
+		marginBottom: 4
+	},
+	description: {
+		margin: 0,
+		fontSize: 14,
+		lineHeight: 1.4,
+		whiteSpace: "pre-wrap",
+		color: C.textSecondary
+	},
+	singlePhotoContainer: { padding: 0 },
+	carouselContainer: {
+		position: "relative",
+		padding: 4
+	},
+	photosGrid: {
+		display: "grid",
+		gridTemplateColumns: "repeat(2, 1fr)",
+		gridTemplateRows: "repeat(2, 1fr)",
+		gap: 4,
+		minHeight: 400
+	},
+	navButton: {
+		position: "absolute",
+		top: "50%",
+		transform: "translateY(-50%)",
+		width: 28,
+		height: 28,
+		border: "none",
+		borderRadius: "50%",
+		boxSizing: "border-box",
+		padding: 0,
+		fontSize: 18,
+		fontWeight: 600,
+		cursor: "pointer",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		zIndex: 10,
+		transition: "opacity 150ms ease",
+		userSelect: "none",
+		opacity: .7,
+		color: "#fff",
+		background: "rgba(0, 0, 0, 0.5)",
+		boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)"
+	},
+	navButtonLeft: { left: 8 },
+	navButtonRight: { right: 8 },
+	photoItem: {
+		margin: 0,
+		display: "flex",
+		flexDirection: "column",
+		gap: 4
+	},
+	singlePhotoItem: {
+		margin: 0,
+		display: "flex",
+		flexDirection: "column",
+		gap: 8
+	},
+	photoContainer: {
+		position: "relative",
+		width: "100%",
+		height: "100%",
+		overflow: "hidden",
+		borderRadius: 4,
+		background: C.imageBg
+	},
+	singlePhotoMedia: {
+		position: "relative",
+		width: "100%",
+		overflow: "hidden",
+		borderRadius: 0,
+		background: C.imageBg
+	},
+	photo: {
+		width: "100%",
+		height: "100%",
+		objectFit: "cover",
+		display: "block"
+	},
+	photoGrid: {
+		width: "100%",
+		height: "100%",
+		objectFit: "cover",
+		display: "block"
+	},
+	placeholder: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "100%",
+		height: "100%",
+		minHeight: 100,
+		fontSize: 12,
+		color: C.textMuted
+	},
+	caption: {
+		fontSize: 12,
+		lineHeight: 1.3,
+		padding: "0 12px 8px",
+		color: C.textSecondary
+	},
+	altBadge: {
+		position: "absolute",
+		bottom: 8,
+		right: 8,
+		padding: "4px 8px",
+		fontSize: 10,
+		fontWeight: 600,
+		letterSpacing: "0.5px",
+		border: "none",
+		borderRadius: 4,
+		cursor: "pointer",
+		transition: "background 150ms ease, color 150ms ease",
+		fontFamily: "system-ui, sans-serif"
+	},
+	footer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: 12,
+		paddingTop: 8
+	},
+	time: {
+		fontSize: 11,
+		color: C.textMuted
+	},
+	paginationDots: {
+		display: "flex",
+		gap: 6,
+		alignItems: "center"
+	},
+	paginationDot: {
+		width: 6,
+		height: 6,
+		borderRadius: "50%",
+		border: "none",
+		padding: 0,
+		cursor: "pointer",
+		transition: "background 200ms ease, transform 150ms ease",
+		flexShrink: 0
+	}
+}, leafletDocStyles = {
+	container: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 24,
+		padding: "24px 28px",
+		borderRadius: 20,
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: C.border,
+		maxWidth: 720,
+		width: "100%",
+		fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+		background: C.bg,
+		color: C.text
+	},
+	header: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 16
+	},
+	headerContent: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 8
+	},
+	title: {
+		fontSize: 32,
+		margin: 0,
+		lineHeight: 1.15,
+		color: C.text
+	},
+	subtitle: {
+		margin: 0,
+		fontSize: 16,
+		lineHeight: 1.5,
+		color: C.textSecondary
+	},
+	meta: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: 8,
+		alignItems: "center",
+		fontSize: 14,
+		color: C.textSecondary
+	},
+	body: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 18
+	},
+	page: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 18
+	},
+	paragraph: {
+		margin: "1em 0 0",
+		lineHeight: 1.65,
+		fontSize: 16,
+		color: C.text
+	},
+	heading: {
+		margin: "0.5em 0 0",
+		fontWeight: 700,
+		color: C.text
+	},
+	blockquote: {
+		margin: "1em 0 0",
+		padding: "0.6em 1em",
+		borderLeftWidth: "4px",
+		borderLeftStyle: "solid",
+		borderColor: C.border,
+		background: C.bgElevated,
+		color: C.text
+	},
+	figure: {
+		margin: "1.2em 0 0",
+		display: "flex",
+		flexDirection: "column",
+		gap: 12
+	},
+	imageWrapper: {
+		borderRadius: 16,
+		overflow: "hidden",
+		width: "100%",
+		position: "relative",
+		background: C.bgElevated
+	},
+	image: {
+		width: "100%",
+		height: "100%",
+		objectFit: "cover",
+		display: "block"
+	},
+	imagePlaceholder: {
+		width: "100%",
+		padding: "24px 16px",
+		textAlign: "center",
+		color: C.textSecondary
+	},
+	caption: {
+		fontSize: 13,
+		lineHeight: 1.4,
+		color: C.textSecondary
+	},
+	list: {
+		paddingLeft: 28,
+		margin: "1em 0 0",
+		listStyleType: "disc",
+		listStylePosition: "outside",
+		color: C.text
+	},
+	nestedList: {
+		paddingLeft: 20,
+		marginTop: 8,
+		listStyleType: "circle",
+		listStylePosition: "outside"
+	},
+	listItem: {
+		marginTop: 8,
+		display: "list-item"
+	},
+	linkCard: {
+		borderRadius: 16,
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: C.border,
+		display: "flex",
+		flexDirection: "column",
+		overflow: "hidden",
+		textDecoration: "none",
+		background: C.bgElevated,
+		color: C.text
+	},
+	linkPreview: {
+		width: "100%",
+		height: 180,
+		objectFit: "cover"
+	},
+	linkPreviewPlaceholder: {
+		width: "100%",
+		height: 180,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: 14,
+		background: C.bgElevated,
+		color: C.textSecondary
+	},
+	linkContent: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 6,
+		padding: "16px 18px"
+	},
+	linkTitle: {
+		fontSize: 16,
+		color: C.text
+	},
+	linkDescription: {
+		margin: 0,
+		fontSize: 14,
+		color: C.textSecondary,
+		lineHeight: 1.5
+	},
+	linkSrc: {
+		fontSize: 13,
+		color: C.link,
+		wordBreak: "break-all"
+	},
+	iframe: {
+		width: "100%",
+		height: 360,
+		border: `1px solid ${C.border}`,
+		borderRadius: 16
+	},
+	math: {
+		margin: "1em 0 0",
+		padding: "14px 16px",
+		borderRadius: 12,
+		fontFamily: "Menlo, Consolas, \"SFMono-Regular\", ui-monospace",
+		overflowX: "auto",
+		background: C.bgElevated,
+		color: C.text,
+		border: `1px solid ${C.border}`
+	},
+	embedFallback: {
+		padding: "12px 16px",
+		borderRadius: 12,
+		border: `1px solid ${C.border}`,
+		fontSize: 14
+	},
+	code: {
+		margin: "1em 0 0",
+		padding: "14px 16px",
+		borderRadius: 12,
+		overflowX: "auto",
+		fontSize: 14,
+		background: C.bg,
+		color: C.text,
+		border: `1px solid ${C.border}`,
+		fontFamily: "Menlo, Consolas, \"SFMono-Regular\", ui-monospace"
+	},
+	hr: {
+		border: 0,
+		borderTopWidth: "1px",
+		borderTopStyle: "solid",
+		borderColor: C.border,
+		margin: "24px 0 0"
+	},
+	inlineCode: {
+		fontFamily: "Menlo, Consolas, \"SFMono-Regular\", ui-monospace",
+		background: C.bgElevated,
+		padding: "0 4px",
+		borderRadius: 4
+	},
+	link: {
+		color: C.link,
+		textDecoration: "underline"
+	},
+	highlight: { background: "var(--atproto-color-highlight)" }
+};
+export { blueskyPostListStyles, cardStyles, grainGalleryStyles, grainStyles, leafletDocStyles, leafletStyles, mergeStyles, postStyles, profileStyles, songHistoryStyles, styleString, tangledStringStyles, tangledStyles, tealStatusStyles, tealStyles };