milestone 32: task-shaped configuration, file mode as a rendering, config status api

2026-08-22 22:42:50 +02:00
parent 025edbb093
commit 7e0df5fd94
89 changed files with 6101 additions and 3750 deletions
@@ -0,0 +1,142 @@
+/**
+ * The vocabulary the three configuration pages share. Both renderings — the
+ * editable forms and the file-mode definition lists — sit on the same panels
+ * and headings, so the page keeps its shape when authority changes.
+ */
+
+import * as stylex from "@stylexjs/stylex";
+import { colors } from "@/ui/tokens.stylex";
+
+export const styles = stylex.create({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	intro: {
+		marginTop: "0.25rem",
+		maxWidth: "48rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	panel: {
+		marginTop: "1rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		padding: "1rem",
+	},
+	panelHeading: {
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 500,
+	},
+	/** The collection's own key in the configuration file, beside its heading. */
+	panelKey: {
+		marginLeft: "0.5rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 400,
+		color: colors.textMuted,
+	},
+	note: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	/** The file-mode page note: where edits happen, and what applies them. */
+	fileNote: {
+		marginTop: "1rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceHover,
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textSecondary,
+	},
+	table: {
+		width: "100%",
+		minWidth: "max-content",
+		borderCollapse: "collapse",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	empty: {
+		marginTop: "0.5rem",
+		color: colors.textMuted,
+	},
+	/** Master/detail: the group list beside the selected group. */
+	split: {
+		marginTop: "1rem",
+		display: "grid",
+		gap: "1rem",
+		gridTemplateColumns: {
+			default: "repeat(1, minmax(0, 1fr))",
+			"@media (min-width: 900px)": "16rem 1fr",
+		},
+		alignItems: "start",
+	},
+	masterList: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.25rem",
+	},
+	masterLink: {
+		display: "block",
+		borderRadius: "0.25rem",
+		paddingInline: "0.75rem",
+		paddingBlock: "0.375rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		textDecorationLine: "none",
+		color: colors.textSecondary,
+		backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
+	},
+	masterLinkActive: {
+		backgroundColor: colors.surfaceHover,
+		color: colors.text,
+		fontWeight: 500,
+	},
+	actionRow: {
+		marginTop: "1rem",
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.75rem",
+	},
+	success: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.primaryOnSurface,
+	},
+	/** The authority error state: no forms, no definition list, one way forward. */
+	blocked: {
+		marginTop: "1rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.warnBorder,
+		backgroundColor: colors.warnSurface,
+		color: colors.warnText,
+		padding: "1rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	pending: {
+		marginTop: "1rem",
+		color: colors.textMuted,
+	},
+	restartTag: {
+		marginLeft: "0.375rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+});