@ogygia/devtools 0.0.0 → 0.11.1

package/dist/profiler/ui/profiler.css

@@ -0,0 +1,650 @@
+/*
+ * The shared profiler vocabulary — the design system every profiler page composes with: tokens,
+ * page frame, typography, the dashboard grid + panel card, tables, form controls, buttons, and the
+ * classes used across more than one component. Global on purpose; anything exclusive to one
+ * component is scoped in its own `<style>`. Imported by Shell (which wraps every page), so it ships
+ * on every profiler page via the server-router CSS handoff (link/router-css.ts).
+ *
+ * DESIGN LANGUAGE — ogygia's own (apps/docs app.css): a green-tinted dark ground, a mint accent, an
+ * editorial serif for display, Instrument Sans for text, JetBrains Mono for code. The fonts are
+ * named with full system fallbacks so the profiler looks right inside any app, whether or not the
+ * webfonts are loaded. This is a power tool: it takes the whole width and reads as a dashboard of
+ * cards, not a scroll of headings.
+ *
+ * A plain `.css` file rather than a `<style>` `:global {}` block: the shipped component's type
+ * declarations are generated by svelte2tsx, whose lexer chokes on Svelte 5's nested `:global {}`.
+ */
+:root {
+	color-scheme: dark;
+
+	--bg: #0a0f0d;
+	--bg-raised: #101713;
+	--bg-panel: #0e150f;
+	--bg-sunken: #060907;
+	--bg-hover: #16201a;
+
+	--text: #e6eee9;
+	--text-dim: #8fa398;
+	/* (4.5:1 on the panel and on the warn/hover tints; #6f8378 fell to 3.5:1 on the warm ones) */
+	--text-faint: #879b90;
+	--text-on-accent: #06120c;
+
+	--accent: #6fe3b0;
+	--accent-strong: #8ff0c6;
+	--accent-deep: #173b2d;
+	--accent-line: #234a3a;
+
+	--line: #1c2620;
+	--line-strong: #2a3830;
+
+	--warn: #e0b56f;
+	--warn-deep: #3a2c15;
+	--bad: #e88f7a;
+	--bad-deep: #3a1f18;
+	--good: #6fe3b0;
+
+	/* the data palette — chart series and category chips, tuned to sit on the green ground */
+	--c-blue: #6ca8e0;
+	--c-violet: #a98fe0;
+	--c-orange: #e0a06f;
+	--c-teal: #5fc9c0;
+	--c-pink: #e08fb8;
+
+	--shadow-panel: 0 1px 0 rgba(111, 227, 176, 0.04), 0 12px 32px -18px rgba(0, 0, 0, 0.7);
+	--r-sm: 6px;
+	--r-md: 10px;
+	--r-lg: 14px;
+
+	--font-display: 'Geist Serif', Georgia, serif;
+	--font-body: 'Instrument Sans Variable', 'Instrument Sans', system-ui, -apple-system, sans-serif;
+	--font-mono:
+		'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* Light palette — forced with `data-theme="light"`, or in system mode when the OS prefers light.
+   `data-theme="dark"` opts out of the media query. Mirrors ogygia's own app.css. */
+:root[data-theme='light'] {
+	color-scheme: light;
+	--bg: #f2f6f4;
+	--bg-raised: #ffffff;
+	--bg-panel: #ffffff;
+	--bg-sunken: #e6ece9;
+	--bg-hover: #e2eae5;
+	--text: #121a16;
+	--text-dim: #4a5c52;
+	/* 4.5:1 on white AND on the sunken grey (#6a7c72 was 4.43 on white, 3.7 on sunken) */
+	--text-faint: #56675d;
+	--text-on-accent: #ffffff;
+	--accent: #0f7a4f;
+	--accent-strong: #0a5c3b;
+	--accent-deep: #d5efe3;
+	--accent-line: #b0d4c2;
+	--line: #d5e0da;
+	--line-strong: #b8c9bf;
+	/* (4.5:1 on the sunken grey too: #9a6b1c was 3.9 there) */
+	--warn: #7d5510;
+	--warn-deep: #f4e8d0;
+	--bad: #c0492e;
+	--bad-deep: #f6dfd7;
+	--good: #0f7a4f;
+	/* the data palette reads as TEXT too (a fix's saving, a ledger line): deep enough for a light ground */
+	--c-blue: #2c6aa8;
+	--c-orange: #9a4f14;
+	--shadow-panel: 0 1px 0 rgba(15, 122, 79, 0.06), 0 12px 32px -18px rgba(18, 26, 22, 0.16);
+}
+@media (prefers-color-scheme: light) {
+	:root:not([data-theme='dark']):not([data-theme='light']) {
+		color-scheme: light;
+		--bg: #f2f6f4;
+		--bg-raised: #ffffff;
+		--bg-panel: #ffffff;
+		--bg-sunken: #e6ece9;
+		--bg-hover: #e2eae5;
+		--text: #121a16;
+		--text-dim: #4a5c52;
+		--text-faint: #56675d;
+		--text-on-accent: #ffffff;
+		--accent: #0f7a4f;
+		--accent-strong: #0a5c3b;
+		--accent-deep: #d5efe3;
+		--accent-line: #b0d4c2;
+		--line: #d5e0da;
+		--line-strong: #b8c9bf;
+		--warn: #7d5510;
+		--warn-deep: #f4e8d0;
+		--bad: #c0492e;
+		--bad-deep: #f6dfd7;
+		--good: #0f7a4f;
+		--c-blue: #2c6aa8;
+		--c-orange: #9a4f14;
+		--shadow-panel: 0 1px 0 rgba(15, 122, 79, 0.06), 0 12px 32px -18px rgba(18, 26, 22, 0.16);
+	}
+}
+* {
+	box-sizing: border-box;
+	margin: 0;
+}
+body {
+	background:
+		radial-gradient(1200px 600px at 80% -10%, rgba(111, 227, 176, 0.05), transparent 60%), var(--bg);
+	color: var(--text);
+	font: 14px/1.55 var(--font-body);
+	-webkit-font-smoothing: antialiased;
+	margin: 0;
+}
+
+/* ── the app shell: a FIXED rail + the dashboard ────────────────────────── */
+/* the rail is position:fixed (not a sticky grid child — that scrolled away in practice); the main
+   column is offset by its width so nothing sits under it */
+.app {
+	min-height: 100vh;
+}
+.app-main {
+	min-width: 0;
+	margin-left: 236px;
+	padding: 22px clamp(18px, 2.4vw, 40px) 80px;
+}
+.app-main.app-bare {
+	margin-left: 0;
+	max-width: 640px;
+	margin-inline: auto;
+	padding-top: 48px;
+}
+@media (max-width: 860px) {
+	.app-main {
+		margin-left: 0;
+	}
+}
+/* the report page opts in (OnThisPage adds .has-toc) so the fixed right rail never overlaps content */
+@media (min-width: 1500px) {
+	.app-main.has-toc {
+		padding-right: 234px;
+	}
+}
+
+/* ── typography ─────────────────────────────────────────────────────────── */
+h1 {
+	font-family: var(--font-display);
+	font-size: 26px;
+	font-weight: 500;
+	letter-spacing: -0.01em;
+	margin: 0 0 2px;
+}
+h1 small {
+	font-family: var(--font-body);
+	color: var(--text-faint);
+	font-weight: 400;
+	font-size: 13px;
+	margin-left: 10px;
+	letter-spacing: 0;
+}
+h2 {
+	font-family: var(--font-display);
+	font-size: 17px;
+	font-weight: 500;
+	letter-spacing: -0.005em;
+	margin: 26px 0 3px;
+}
+.panel > h2:first-child {
+	margin-top: 0;
+}
+h3 {
+	font-size: 13px;
+	font-weight: 600;
+	margin: 14px 0 4px;
+	color: var(--text);
+}
+h2 .hint,
+h3 .hint {
+	font-family: var(--font-body);
+	font-weight: 400;
+	font-size: 12px;
+	color: var(--text-faint);
+	margin-left: 8px;
+	letter-spacing: 0;
+}
+p.hint,
+.hint {
+	color: var(--text-faint);
+	font-size: 12.5px;
+}
+h2 + p.hint {
+	margin: 4px 0 12px;
+}
+a {
+	color: var(--accent);
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+/* a link inside a sentence is told from the text around it by more than its colour */
+p a,
+li a:not(.btn),
+b a,
+.verdict a,
+td.pages a {
+	text-decoration: underline;
+	text-underline-offset: 2px;
+	text-decoration-thickness: 1px;
+}
+/* a colour key beside a word (the word keeps the text colour) */
+.sw {
+	display: inline-block;
+	width: 0.7em;
+	height: 0.7em;
+	margin: 0 0.3em 0 0.15em;
+	border-radius: 2px;
+	vertical-align: baseline;
+}
+/* text for a screen reader only (a column header whose column is buttons) */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+b {
+	font-weight: 600;
+}
+code {
+	background: var(--bg-sunken);
+	padding: 1px 5px;
+	border-radius: var(--r-sm);
+	font-family: var(--font-mono);
+	font-size: 12px;
+	color: var(--accent-strong);
+}
+.good {
+	color: var(--good);
+}
+.warn {
+	color: var(--warn);
+}
+
+/* ── the dashboard: parts, grid, panels ─────────────────────────────────── */
+/* a part is a labelled band of the report; the panels below it lay out in a responsive grid */
+.part {
+	display: flex;
+	align-items: baseline;
+	gap: 10px;
+	margin: 40px 0 14px;
+	padding-bottom: 8px;
+	border-bottom: 1px solid var(--line);
+}
+.part-n {
+	font-family: var(--font-mono);
+	font-size: 12px;
+	color: var(--accent);
+	letter-spacing: 0.04em;
+}
+.part-t {
+	font-family: var(--font-display);
+	font-size: 19px;
+	font-weight: 500;
+}
+.part .hint {
+	margin-left: auto;
+	font-size: 12px;
+	text-align: right;
+}
+.grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
+	gap: 18px;
+	align-items: start;
+	margin: 0 0 18px;
+}
+@media (max-width: 720px) {
+	.grid {
+		grid-template-columns: 1fr;
+	}
+}
+.panel {
+	background: var(--bg-panel);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	padding: 18px 20px;
+	box-shadow: var(--shadow-panel);
+	min-width: 0;
+	margin: 0 0 18px;
+	/* a too-wide table/chart scrolls inside its own card, never forcing the whole page sideways */
+	overflow-x: auto;
+	/* and the card is the containing block of any absolutely placed bar or label inside it, so
+	   the overflow clip applies to those too (an absolute box escapes a non-positioned clip) */
+	position: relative;
+}
+/* an island's wrapper is inline by default; inside a card it holds block content (a chart, a
+   table), and an inline box lets that content size to itself and push past the card */
+.panel > ogygia-region {
+	display: block;
+	min-width: 0;
+}
+/* inside a grid the gap handles spacing, so drop the standalone margin */
+.grid > .panel {
+	margin: 0;
+}
+.panel.wide {
+	grid-column: 1 / -1;
+}
+/* a section that is its own card gets breathing room around a chart/table */
+.panel > .hint:first-of-type {
+	margin-bottom: 12px;
+}
+.panel > h2:first-child,
+.panel > h3:first-child {
+	margin-top: 0;
+}
+.panel > table {
+	margin-top: 4px;
+}
+
+/* ── stat tiles ─────────────────────────────────────────────────────────── */
+.summary {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+	gap: 10px;
+	margin: 16px 0;
+}
+.stat {
+	background: var(--bg-raised);
+	border: 1px solid var(--line);
+	border-radius: var(--r-md);
+	padding: 12px 14px;
+}
+.stat b {
+	display: block;
+	font-family: var(--font-mono);
+	font-size: 21px;
+	font-weight: 500;
+	letter-spacing: -0.01em;
+	font-variant-numeric: tabular-nums;
+	color: var(--text);
+}
+.stat span {
+	color: var(--text-faint);
+	font-size: 11.5px;
+	line-height: 1.4;
+	display: block;
+	margin-top: 2px;
+}
+
+/* ── tables ─────────────────────────────────────────────────────────────── */
+table {
+	border-collapse: collapse;
+	width: 100%;
+	font-size: 13px;
+}
+th,
+td {
+	text-align: left;
+	padding: 6px 12px 6px 0;
+	border-bottom: 1px solid var(--line);
+	vertical-align: top;
+}
+tbody tr:hover td {
+	background: var(--bg-hover);
+}
+th {
+	color: var(--text-faint);
+	font-weight: 500;
+	font-size: 11px;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	white-space: nowrap;
+}
+td.num,
+th.num {
+	text-align: right;
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
+	font-family: var(--font-mono);
+}
+th.num {
+	font-family: var(--font-body);
+}
+td.file {
+	color: var(--text-faint);
+	font-family: var(--font-mono);
+	font-size: 11.5px;
+	word-break: break-all;
+}
+td.fn {
+	font-family: var(--font-mono);
+	font-size: 12px;
+}
+th.sort {
+	cursor: pointer;
+	user-select: none;
+	white-space: nowrap;
+}
+th.sort:hover {
+	color: var(--text);
+}
+th.sort.active {
+	color: var(--accent);
+}
+th.sort .arr {
+	opacity: 0.6;
+	font-size: 10px;
+}
+td.split {
+	min-width: 160px;
+}
+.split-bar {
+	position: relative;
+	height: 12px;
+	background: var(--bg-sunken);
+	border-radius: 3px;
+	overflow: hidden;
+}
+.split-bar .tot {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 100%;
+	background: var(--line-strong);
+	border-radius: 3px;
+}
+.split-bar .slf {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 100%;
+	border-radius: 3px;
+}
+.chip {
+	display: inline-block;
+	padding: 0 7px;
+	border-radius: 999px;
+	font-size: 11px;
+	line-height: 18px;
+	color: var(--text-on-accent);
+	font-weight: 600;
+}
+.bar {
+	height: 14px;
+	border-radius: 3px;
+	min-width: 2px;
+}
+
+/* ── findings / verdicts ────────────────────────────────────────────────── */
+.verdict {
+	background: var(--bg-raised);
+	border: 1px solid var(--line);
+	border-left: 3px solid var(--accent);
+	border-radius: var(--r-md);
+	padding: 14px 18px;
+	margin: 0 0 16px;
+	font-size: 14px;
+}
+.verdict p + p {
+	margin-top: 6px;
+}
+.crumb {
+	color: var(--text-faint);
+	font-size: 12px;
+	margin: 6px 0;
+	min-height: 18px;
+}
+
+/* ── forms + buttons ────────────────────────────────────────────────────── */
+form.inline {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	flex-wrap: wrap;
+	margin: 10px 0;
+}
+input,
+select,
+button {
+	background: var(--bg-raised);
+	color: var(--text);
+	border: 1px solid var(--line-strong);
+	border-radius: var(--r-sm);
+	padding: 6px 10px;
+	font: inherit;
+	font-size: 13px;
+}
+input:focus,
+select:focus {
+	outline: none;
+	border-color: var(--accent-line);
+}
+/* the keyboard's place on a row, a sort header, a timeline block (press.ts makes them reachable) */
+[tabindex='0']:focus-visible,
+button:focus-visible,
+a:focus-visible,
+summary:focus-visible {
+	outline: 2px solid var(--accent);
+	outline-offset: -2px;
+}
+button {
+	cursor: pointer;
+	background: var(--bg-hover);
+}
+button:hover {
+	background: var(--accent-deep);
+	border-color: var(--accent-line);
+}
+.actions {
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+	align-items: center;
+	margin: 16px 0;
+}
+.btn {
+	display: inline-flex;
+	align-items: center;
+	gap: 7px;
+	padding: 8px 14px;
+	border-radius: var(--r-sm);
+	border: 1px solid var(--line-strong);
+	background: var(--bg-raised);
+	color: var(--text);
+	cursor: pointer;
+	font: inherit;
+	font-size: 13px;
+	text-decoration: none;
+	transition:
+		background 0.12s,
+		border-color 0.12s;
+}
+.btn:hover {
+	background: var(--bg-hover);
+	border-color: var(--accent-line);
+	text-decoration: none;
+}
+.btn.primary {
+	background: var(--accent);
+	border-color: var(--accent);
+	color: var(--text-on-accent);
+	font-weight: 600;
+}
+.btn.primary:hover {
+	background: var(--accent-strong);
+	border-color: var(--accent-strong);
+}
+/* Reset — clears a running or stuck recording. Amber so it reads as "recovery", not a primary action;
+ * gets a live outline while a profile is actually running so it's obvious what to hit if the site drags. */
+/* (ink from the theme's own warn: the fixed cream vanished on the light theme's cream fill) */
+.btn.danger {
+	background: var(--warn-deep);
+	border-color: #6b5228;
+	color: var(--warn);
+}
+.btn.danger:hover {
+	border-color: var(--warn);
+}
+.btn.danger.recording {
+	border-color: var(--warn);
+	color: var(--warn);
+	box-shadow: 0 0 0 1px rgba(224, 181, 111, 0.4);
+}
+.btn[disabled] {
+	opacity: 0.55;
+	cursor: default;
+}
+.btn .ic {
+	width: 15px;
+	height: 15px;
+	opacity: 0.85;
+}
+.btn .sub {
+	color: var(--text-faint);
+	font-size: 11px;
+}
+/* on the accent fill the faint grey vanished (1.1:1): the button's own ink, a touch lighter */
+.btn.primary .sub {
+	color: inherit;
+}
+/* Share-link form controls — used by both the create panel (ShareLink) and the recipient's unlock
+   page (PermalinkGate). */
+.share-form {
+	display: flex;
+	gap: 8px;
+	margin: 10px 0 0;
+}
+.share-form input {
+	flex: 1;
+	min-width: 0;
+	padding: 8px 10px;
+	border-radius: var(--r-sm);
+	border: 1px solid var(--line-strong);
+	background: var(--bg-sunken);
+	color: var(--text);
+	font: inherit;
+	font-size: 13px;
+}
+.share-form input:focus {
+	outline: none;
+	border-color: var(--accent-line);
+}
+.share-form button {
+	padding: 8px 14px;
+	border-radius: var(--r-sm);
+	border: 1px solid var(--accent);
+	background: var(--accent);
+	color: var(--text-on-accent);
+	cursor: pointer;
+	font: inherit;
+	font-size: 13px;
+	font-weight: 600;
+}
+.share-form button[disabled] {
+	opacity: 0.55;
+	cursor: default;
+}
+.share-err {
+	color: var(--bad);
+	font-size: 12.5px;
+	margin: 8px 0 0;
+}