@atelic-action/ui 0.17.2 → 1.0.0

package/src/styles/app.css

@@ -0,0 +1,673 @@
+/*
+ * The app shell's stylesheet: the shadcn token mapping, the default light and
+ * dark token values, the base layer, and the AppPage scaffold (the ap-*
+ * classes, the house buttons, the breadcrumbs, the section cards, the right
+ * rail). It is Tailwind source, imported inside an app's Tailwind entry
+ * straight after `@import "tailwindcss"` (an @import below any other rule is
+ * dropped), with the app's own theme after it to override any value here:
+ *
+ *   @import "tailwindcss";
+ *   @import "@atelic-action/ui/styles/app.css";
+ *   @plugin "tailwindcss-animate";
+ *
+ * Tailwind never scans node_modules on its own, so the @source below points
+ * it at the shell's components, relative to this file, and the app adds no
+ * line of its own. An app that keeps its own tokens and does not import this
+ * sheet adds the same thing from its stylesheet instead, relative to that
+ * file: `@source "../../node_modules/@atelic-action/ui/src/app";` from
+ * src/styles/globals.css.
+ *
+ * Unlike the package's other sheets this one is not in the atelic-ui layer:
+ * the tokens and resets sit in Tailwind's base layer and the scaffold stays
+ * unlayered, exactly as the template carried them, so the shell renders as
+ * it did there. Fonts stay with the app, which serves the files.
+ */
+
+@custom-variant dark (&:is(.dark *));
+
+@source "../app";
+
+@theme {
+	--color-border: hsl(var(--border));
+	--color-input: hsl(var(--input));
+	--color-ring: hsl(var(--ring));
+	--color-background: hsl(var(--background));
+	--color-foreground: hsl(var(--foreground));
+
+	--color-primary: hsl(var(--primary));
+	--color-primary-foreground: hsl(var(--primary-foreground));
+
+	--color-secondary: hsl(var(--secondary));
+	--color-secondary-foreground: hsl(var(--secondary-foreground));
+
+	--color-destructive: hsl(var(--destructive));
+	--color-destructive-foreground: hsl(var(--destructive-foreground));
+
+	--color-muted: hsl(var(--muted));
+	--color-muted-foreground: hsl(var(--muted-foreground));
+
+	--color-accent: hsl(var(--accent));
+	--color-accent-foreground: hsl(var(--accent-foreground));
+
+	--color-card: hsl(var(--card));
+	--color-card-foreground: hsl(var(--card-foreground));
+
+	--color-popover: hsl(var(--popover));
+	--color-popover-foreground: hsl(var(--popover-foreground));
+
+	/* The brand accent. Used sparingly: the dot beside the wordmark, active
+	   nav indicators, live signals. Never as a fill. */
+	--color-brand: hsl(var(--brand));
+	--color-brand-soft: hsl(var(--brand) / 0.1);
+
+	--radius-lg: var(--radius);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-sm: calc(var(--radius) - 4px);
+
+	--font-sans:
+		"Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		sans-serif;
+	--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	--font-serif: "Newsreader", Georgia, serif;
+}
+
+@layer base {
+	:root {
+		/* Paper warmth for surfaces. Cards stay pure white so they sit a
+		   touch above the page. */
+		--background: 60 17% 98%; /* #FAFAF8 */
+		--foreground: 240 10% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+		--ring: 240 5.9% 10%;
+		--radius: 0.625rem;
+		/* The brand accent, an orange. HSL components only, consumed via
+		   hsl(var(--brand)). */
+		--brand: 19 98% 50%;
+		/* Density rhythm for the AppPage scaffold. Default values;
+		   a `data-density` attribute on the root swaps compact/roomy. We ship
+		   `default` only — no toggle UI yet. */
+		--d-pad-card: 18px;
+		--d-pad-screen: 24px;
+		--d-gap: 14px;
+		--d-row-pad: 14px;
+	}
+
+	[data-density="compact"] {
+		--d-pad-card: 14px;
+		--d-pad-screen: 18px;
+		--d-gap: 10px;
+		--d-row-pad: 11px;
+	}
+	[data-density="roomy"] {
+		--d-pad-card: 26px;
+		--d-pad-screen: 32px;
+		--d-gap: 20px;
+		--d-row-pad: 18px;
+	}
+
+	.dark {
+		--background: 30 5% 7%;
+		--foreground: 30 8% 95%;
+		--card: 30 5% 9%;
+		--card-foreground: 30 8% 95%;
+		--popover: 30 5% 9%;
+		--popover-foreground: 30 8% 95%;
+		--primary: 30 8% 95%;
+		--primary-foreground: 30 8% 8%;
+		--secondary: 30 5% 14%;
+		--secondary-foreground: 30 8% 95%;
+		--muted: 30 5% 14%;
+		--muted-foreground: 30 5% 60%;
+		--accent: 30 5% 14%;
+		--accent-foreground: 30 8% 95%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 30 8% 95%;
+		--border: 30 5% 18%;
+		--input: 30 5% 18%;
+		--ring: 30 4.9% 83.9%;
+		--brand: 19 98% 55%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground font-sans antialiased;
+	}
+	a {
+		@apply cursor-pointer;
+	}
+}
+
+/* ============================================================
+   AppPage scaffold: ap-*
+   ------------------------------------------------------------
+   The common page chrome every authenticated surface
+   reuses: a page header (crumb · title · live dot · subtitle ·
+   aside), a tools bar (search + filter dropdowns + actions),
+   and a canonical full-height right rail. Ported from the
+   claude.ai/design prototype (lib/app-page.jsx + styles.css),
+   token-remapped to the app's hsl(var(--*)) scale. Page-specific
+   content is passed as children; nothing here is page-specific.
+   See src/app/layout/AppPage.tsx for the React.
+   ============================================================ */
+
+/* ---- house buttons (toolbar actions) ---- */
+.btn-ghost {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	background: transparent;
+	border: 1px solid hsl(var(--border));
+	padding: 7px 12px;
+	border-radius: 6px;
+	color: hsl(var(--foreground));
+	font: 500 13px / 1 var(--font-sans);
+	cursor: pointer;
+	transition: border-color 150ms ease;
+}
+.btn-ghost:hover {
+	border-color: hsl(var(--foreground));
+}
+.btn-ghost:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+.btn-ghost:disabled:hover {
+	border-color: hsl(var(--border));
+}
+.btn-solid {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	background: hsl(var(--primary));
+	color: hsl(var(--primary-foreground));
+	border: none;
+	padding: 9px 14px;
+	border-radius: 6px;
+	font: 500 13px / 1 var(--font-sans);
+	cursor: pointer;
+}
+.btn-solid:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* ---- roots ----
+   One responsive DOM keyed on the app's lg breakpoint (1024px), matching where
+   AppLayout swaps its sidebar in. Mobile flows in the document (the shell's
+   body scroll, the shell's bottom nav). Desktop becomes a full-height flex row:
+   a main column that scrolls on its own beside an optional full-height rail.
+   AppPage does NOT render nav — AppLayout owns the rail / tab bar. */
+.ap-page {
+	min-height: 100%;
+	background: hsl(var(--background));
+	color: hsl(var(--foreground));
+}
+.ap-col {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+.ap-scroll::-webkit-scrollbar {
+	width: 0;
+	height: 0;
+}
+
+@media (min-width: 1024px) {
+	.ap-page {
+		display: flex;
+		flex-direction: row;
+		height: 100dvh;
+		overflow: hidden;
+	}
+	.ap-col {
+		flex: 1;
+		min-height: 0;
+	}
+	.ap-scroll {
+		flex: 1;
+		overflow-y: auto;
+		overflow-x: hidden;
+		padding-bottom: 48px;
+		scrollbar-width: none;
+	}
+}
+
+/* ---- header ---- */
+.ap-head {
+	padding: 30px var(--d-pad-screen, 24px) 0;
+}
+@media (min-width: 1024px) {
+	.ap-head {
+		padding: 28px 36px 0;
+	}
+}
+.ap-head .ap-crumb {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	margin-bottom: 14px;
+}
+/* the crumb content keeps the app's Breadcrumbs styling; only the aside
+   (an attribution) sits opposite it. */
+.ap-head .ap-crumb > :first-child {
+	min-width: 0;
+}
+.ap-title {
+	display: flex;
+	align-items: center;
+	gap: 13px;
+}
+.ap-title .glyph {
+	color: hsl(var(--foreground));
+	display: inline-flex;
+}
+.ap-title h1 {
+	font: 300 38px / 1 var(--font-sans);
+	letter-spacing: -0.028em;
+	margin: 0;
+}
+@media (min-width: 1024px) {
+	.ap-title h1 {
+		font-size: 40px;
+	}
+}
+.ap-title .live {
+	width: 7px;
+	height: 7px;
+	border-radius: 9999px;
+	background: hsl(var(--brand));
+	align-self: flex-start;
+	margin-top: 5px;
+}
+.ap-sub {
+	margin: 14px 0 0;
+	font: 300 21px / 1.36 var(--font-sans);
+	letter-spacing: -0.012em;
+	color: hsl(var(--foreground));
+	max-width: 30ch;
+}
+.ap-sub em {
+	font-family: var(--font-serif);
+	font-style: italic;
+	font-weight: 300;
+}
+@media (min-width: 1024px) {
+	.ap-sub {
+		max-width: 42ch;
+	}
+}
+
+/* ---- tools: search + filter dropdowns + actions ---- */
+.ap-tools {
+	padding: 24px var(--d-pad-screen, 24px) 4px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+@media (min-width: 1024px) {
+	.ap-tools {
+		padding: 22px 36px 6px;
+		flex-direction: row;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 12px;
+	}
+}
+/* Below lg the row wraps: the search claims the width it needs to be typed
+   into and the actions drop beneath it when they would otherwise squeeze it
+   to a sliver (a phone with a search and a sync button). Desktop keeps one
+   line. */
+.ap-toolrow {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	align-items: stretch;
+}
+@media (min-width: 1024px) {
+	.ap-toolrow {
+		flex: 1;
+		flex-wrap: nowrap;
+		min-width: 320px;
+	}
+}
+.ap-search {
+	flex: 1 1 240px;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 11px 14px;
+	border: 1px solid hsl(var(--border));
+	border-radius: 12px;
+	background: hsl(var(--card));
+	color: hsl(var(--muted-foreground));
+	transition: border-color 150ms ease;
+}
+.ap-search:focus-within {
+	border-color: hsl(var(--foreground));
+}
+.ap-search svg {
+	flex-shrink: 0;
+}
+.ap-search input {
+	flex: 1;
+	min-width: 0;
+	border: none;
+	background: transparent;
+	outline: none;
+	font: 400 15px / 1 var(--font-sans);
+	color: hsl(var(--foreground));
+}
+.ap-search input::placeholder {
+	color: hsl(var(--muted-foreground));
+}
+.ap-search .ap-search-clear {
+	border: none;
+	background: transparent;
+	color: hsl(var(--muted-foreground));
+	cursor: pointer;
+	display: inline-flex;
+	padding: 0;
+}
+.ap-search .ap-search-clear:hover {
+	color: hsl(var(--foreground));
+}
+.ap-selects {
+	display: flex;
+	gap: 10px;
+	flex: 0 0 auto;
+}
+.ap-select {
+	flex: 1;
+	min-width: 0;
+	appearance: none;
+	-webkit-appearance: none;
+	border: 1px solid hsl(var(--border));
+	border-radius: 12px;
+	background-color: hsl(var(--card));
+	color: hsl(var(--foreground));
+	font: 500 14px / 1 var(--font-sans);
+	padding: 13px 38px 13px 15px;
+	cursor: pointer;
+	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238a8a93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
+	background-repeat: no-repeat;
+	background-position: right 14px center;
+	transition: border-color 150ms ease;
+}
+.ap-select:hover {
+	border-color: hsl(var(--foreground));
+}
+.ap-select:focus {
+	outline: none;
+	border-color: hsl(var(--foreground));
+}
+@media (min-width: 1024px) {
+	.ap-select {
+		flex: 0 0 auto;
+		min-width: 178px;
+	}
+}
+.ap-actions {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+	flex: 0 0 auto;
+}
+.ap-actions .btn-ghost,
+.ap-actions .btn-solid {
+	padding: 11px 14px;
+	white-space: nowrap;
+}
+.ap-actions .ago {
+	font: 500 11px / 1 var(--font-mono);
+	color: hsl(var(--muted-foreground));
+	letter-spacing: 0.02em;
+}
+.ap-toolnotice {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font: 500 12px / 1.3 var(--font-mono);
+	font-variant-numeric: tabular-nums;
+	color: hsl(var(--muted-foreground));
+	letter-spacing: 0.02em;
+}
+.ap-toolnotice svg {
+	flex-shrink: 0;
+}
+
+/* ---- breadcrumbs ----
+   Two renderings in one nav, one per breakpoint (see Breadcrumbs.tsx). Below
+   lg a page with a parent shows a thumb sized back link and a root page shows
+   nothing, its title being the section. At lg and up the full trail runs, the
+   current page truncating instead of wrapping. The breakpoint lives here rather than in
+   Tailwind classes, since these rules set display and would otherwise beat
+   the utility in the cascade. */
+.crumbs {
+	min-width: 0;
+}
+.crumbs-back {
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	min-height: 40px;
+	margin: -10px 0 -8px -8px;
+	padding: 0 12px 0 4px;
+	border-radius: 10px;
+	font: 500 15px / 1 var(--font-sans);
+	letter-spacing: -0.01em;
+	color: hsl(var(--foreground));
+	transition: background-color 150ms ease;
+}
+.crumbs-back:active {
+	background: hsl(var(--accent));
+}
+.crumbs-back span {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.crumbs-trail {
+	display: none;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+	font: 500 13px / 1 var(--font-sans);
+	color: hsl(var(--muted-foreground));
+}
+@media (min-width: 1024px) {
+	.crumbs-back {
+		display: none;
+	}
+	.crumbs-trail {
+		display: flex;
+	}
+}
+.crumbs-trail li {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+}
+.crumbs-trail li:last-child {
+	flex: 0 1 auto;
+}
+.crumbs-trail a {
+	color: hsl(var(--foreground));
+	white-space: nowrap;
+}
+.crumbs-trail [aria-current="page"] {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 40ch;
+}
+
+/* ---- section landing cards ----
+   A section's sub pages as tap targets on its landing page, read from the app's nav.
+   Two across on a phone, up to the full row on desktop. */
+.ap-sections {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 10px;
+	padding: 6px var(--d-pad-screen, 24px) 8px;
+}
+@media (min-width: 640px) {
+	.ap-sections {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 12px;
+	}
+}
+@media (min-width: 1024px) {
+	.ap-sections {
+		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+		padding: 6px 36px 8px;
+	}
+}
+.ap-section-card {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	min-height: 108px;
+	padding: 14px 14px 12px;
+	border: 1px solid hsl(var(--border));
+	border-radius: 14px;
+	background: hsl(var(--card));
+	color: inherit;
+	transition: border-color 150ms ease;
+}
+.ap-section-card:hover {
+	border-color: hsl(var(--foreground));
+}
+.ap-section-card:active {
+	background: hsl(var(--accent));
+}
+.ap-section-card .ic {
+	display: inline-flex;
+	color: hsl(var(--foreground));
+}
+.ap-section-card .lb {
+	font: 500 15px / 1.2 var(--font-sans);
+	letter-spacing: -0.01em;
+}
+.ap-section-card .bl {
+	font: 400 12px / 1.35 var(--font-sans);
+	color: hsl(var(--muted-foreground));
+}
+
+/* Generic content padding for AppPage children that don't bring their own
+   (e.g. a grid of cards). Matches the scaffold's screen padding. */
+.ap-body {
+	padding: 18px var(--d-pad-screen, 24px) 8px;
+}
+@media (min-width: 1024px) {
+	.ap-body {
+		padding: 18px 36px 8px;
+	}
+}
+
+/* ---- canonical right rail ----
+   A page may pass a `rail` to AppPage. On mobile it stacks inline beneath the
+   header (.ap-rail-inline, inside the scroll flow). On desktop it becomes a
+   true full-height right column (.ap-rail) that mirrors the left nav rail,
+   divided by a hairline running the entire height, scrolling independently
+   while the main column scrolls to its left. The rail node is rendered in both
+   slots; CSS shows exactly one per breakpoint. */
+.ap-rail-inline {
+	padding: 22px var(--d-pad-screen, 24px) 0;
+}
+.ap-rail {
+	display: none;
+}
+@media (min-width: 1024px) {
+	.ap-rail-inline {
+		display: none;
+	}
+	.ap-rail {
+		display: block;
+		width: 344px;
+		flex-shrink: 0;
+		border-left: 1px solid hsl(var(--border));
+		overflow-y: auto;
+		padding: 30px 32px 40px;
+		scrollbar-width: none;
+		transition:
+			width 200ms ease-out,
+			padding 200ms ease-out,
+			border-color 200ms ease-out,
+			visibility 200ms ease-out;
+	}
+	.ap-rail::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+	}
+	/* Collapsed desktop rail: width animates to 0 and the main column reclaims
+	   the space (it is flex:1). Mirrors the left nav-rail collapse. `visibility:
+	   hidden` (which snaps at the end of the collapse and the start of the expand)
+	   pulls the rail's interactive elements out of the tab order while hidden. The
+	   mobile inline rail (.ap-rail-inline) is a separate node and is never collapsed. */
+	.ap-rail.is-collapsed {
+		width: 0;
+		padding-left: 0;
+		padding-right: 0;
+		border-left-color: transparent;
+		overflow: hidden;
+		visibility: hidden;
+	}
+}
+
+/* Desktop-only rail collapse toggle, rendered in the AppPage header opposite
+   the breadcrumb. Hidden on mobile, where the rail is always inline. */
+.ap-rail-toggle {
+	display: none;
+}
+.ap-head .ap-crumb-actions {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	flex-shrink: 0;
+}
+@media (min-width: 1024px) {
+	.ap-rail-toggle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 34px;
+		height: 34px;
+		border-radius: 8px;
+		color: hsl(var(--muted-foreground));
+		flex-shrink: 0;
+		transition:
+			background-color 150ms ease,
+			color 150ms ease;
+	}
+	.ap-rail-toggle:hover {
+		background: hsl(var(--accent));
+		color: hsl(var(--foreground));
+	}
+	.ap-rail-toggle:focus-visible {
+		outline: 2px solid hsl(var(--ring));
+		outline-offset: 2px;
+	}
+}