@olympusoss/canvas 2.6.19

package/src/tokens/spacing.ts

@@ -0,0 +1,55 @@
+/**
+ * Olympus spacing scale — platform-agnostic design tokens.
+ * Values in pixels, convertible to rem (web) or dp (React Native).
+ */
+
+export const spacing = {
+	0: 0,
+	0.5: 2,
+	1: 4,
+	1.5: 6,
+	2: 8,
+	2.5: 10,
+	3: 12,
+	3.5: 14,
+	4: 16,
+	5: 20,
+	6: 24,
+	7: 28,
+	8: 32,
+	9: 36,
+	10: 40,
+	11: 44,
+	12: 48,
+	14: 56,
+	16: 64,
+	20: 80,
+	24: 96,
+	28: 112,
+	32: 128,
+	36: 144,
+	40: 160,
+	44: 176,
+	48: 192,
+	52: 208,
+	56: 224,
+	60: 240,
+	64: 256,
+	72: 288,
+	80: 320,
+	96: 384,
+} as const;
+
+export const radius = {
+	none: 0,
+	sm: 4,
+	md: 6,
+	lg: 8,
+	xl: 12,
+	"2xl": 16,
+	"3xl": 24,
+	full: 9999,
+} as const;
+
+/** Default border radius used across components (0.5rem = 8px) */
+export const defaultRadius = "0.5rem";

package/src/tokens/typography.ts

@@ -0,0 +1,27 @@
+/**
+ * Olympus typography tokens — platform-agnostic design tokens.
+ * Font families, sizes, weights, and line heights.
+ */
+
+export const fontFamily = {
+	sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+	mono: ["JetBrains Mono", "Fira Code", "monospace"],
+} as const;
+
+export const fontSize = {
+	xs: { size: 12, lineHeight: 16 },
+	sm: { size: 14, lineHeight: 20 },
+	base: { size: 16, lineHeight: 24 },
+	lg: { size: 18, lineHeight: 28 },
+	xl: { size: 20, lineHeight: 28 },
+	"2xl": { size: 24, lineHeight: 32 },
+	"3xl": { size: 30, lineHeight: 36 },
+	"4xl": { size: 36, lineHeight: 40 },
+} as const;
+
+export const fontWeight = {
+	normal: 400,
+	medium: 500,
+	semibold: 600,
+	bold: 700,
+} as const;

package/styles/canvas.css

@@ -0,0 +1,55 @@
+/* ---------- Canvas lib runtime entry ----------
+ *
+ * The single CSS import that gives a consumer Canvas's full styling contract:
+ *   - Tailwind v4 with @source pointed at canvas/src
+ *   - Canonical design tokens (light + dark, tiered surfaces, sidebar, stat-card)
+ *   - @theme inline mapping so `bg-card`, `text-foreground`, etc. resolve
+ *   - Leaflet defaults for canvas/components/molecules/leaflet-map and scalable-globe
+ *
+ * Consumers (athena/hera/site/daedalus) and the canvas-docs site both import
+ * this file. Inside canvas-docs, the per-example iframe filters parent
+ * stylesheets down to ONLY this one — the sentinel rule below
+ * (`--canvas-runtime`) is what the filter looks for. Keep that rule.
+ */
+
+@import "tailwindcss";
+@source "../src/**/*.{ts,tsx}";
+@import "./tokens.css";
+@import "./leaflet.css";
+@import "./dashboard-grid.css";
+
+@theme inline {
+	--color-background: hsl(var(--background));
+	--color-foreground: hsl(var(--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));
+	--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-muted: hsl(var(--muted));
+	--color-muted-foreground: hsl(var(--muted-foreground));
+	--color-accent: hsl(var(--accent));
+	--color-accent-foreground: hsl(var(--accent-foreground));
+	--color-destructive: hsl(var(--destructive));
+	--color-destructive-foreground: hsl(var(--destructive-foreground));
+	--color-brand: hsl(var(--brand));
+	--color-brand-foreground: hsl(var(--brand-foreground));
+	--color-border: hsl(var(--border));
+	--color-input: hsl(var(--input));
+	--color-ring: hsl(var(--ring));
+}
+
+/* ---------- Iframe-filter sentinel ----------
+ * Do NOT remove. The canvas-docs Example wrapper uses this token to identify
+ * the canvas-runtime stylesheet among all parent-document styles when cloning
+ * into the per-example iframe. Stripping this rule will cause example
+ * components to render unstyled inside the docs preview.
+ */
+@layer canvas-runtime {
+	:root {
+		--canvas-runtime: 1;
+	}
+}

package/styles/dashboard-grid.css

@@ -0,0 +1,47 @@
+/**
+ * Re-export of react-grid-layout's base stylesheets.
+ *
+ * Consumers of `<DashboardGrid>` import this once at app entry:
+ *
+ *   import "@olympusoss/canvas/styles/dashboard-grid.css";
+ *
+ * The actual imports resolve through the consumer's bundler. Both
+ * `react-grid-layout` and `react-resizable` are direct dependencies of
+ * canvas; if either isn't installed (e.g. peer-only consumer) the @import
+ * errors at build time, which is the right signal.
+ *
+ * On top of the lib's stock styles, the rules below recolour the placeholder
+ * (drop-target hint) and resize handles to match canvas tokens — the lib
+ * defaults are bright red / blue and don't fit the design system.
+ */
+@import "react-grid-layout/css/styles.css";
+@import "react-resizable/css/styles.css";
+
+.react-grid-item.react-grid-placeholder {
+	background: hsl(var(--accent));
+	opacity: 0.45;
+	border-radius: 0.75rem;
+	transition-property: transform;
+}
+
+.react-grid-item > .react-resizable-handle {
+	opacity: 0;
+	transition: opacity 150ms ease;
+}
+
+.react-grid-item:hover > .react-resizable-handle,
+.react-grid-item.react-draggable-dragging > .react-resizable-handle {
+	opacity: 1;
+}
+
+/* Recolour the corner glyph the lib draws via ::after */
+.react-grid-item > .react-resizable-handle::after {
+	border-color: hsl(var(--muted-foreground));
+}
+
+/* When DashboardGrid is in view-mode (`editing=false`) we hide handles
+ * entirely — the cursor never tells the user "you can resize this".
+ */
+[data-dashboard-grid-editing="false"] .react-grid-item > .react-resizable-handle {
+	display: none;
+}

package/styles/leaflet.css

@@ -0,0 +1,13 @@
+/**
+ * Re-export of Leaflet's base stylesheet.
+ *
+ * Consumers of `<WorldHeatMap>` import this once at app entry:
+ *
+ *   import "@olympusoss/canvas/styles/leaflet.css";
+ *
+ * The actual import resolves through the consumer's bundler — `leaflet` is a
+ * peer-optional dependency, so an app that doesn't use the map doesn't
+ * incur this stylesheet. If `leaflet` isn't installed, the @import errors at
+ * build time, which is the right signal.
+ */
+@import "leaflet/dist/leaflet.css";

package/styles/tokens.css

@@ -0,0 +1,234 @@
+/* ---------- Canvas tokens — single source of truth ----------
+ *
+ * Surface elevation (dark mode):
+ *   L0  body background     `--background`         deepest
+ *   L1  sidebar chrome      `--sidebar-background` subtle lift, distinct hue
+ *   L2  cards + popovers    `--card` / `--popover` clearly elevated
+ *   L3  inside-card chips   `--muted` / `--secondary` / `--accent` topmost
+ *
+ * In light mode the canonical shadcn convention keeps body and cards both
+ * pure white — surfaces are differentiated by borders + 1px shadow rather
+ * than tone. That's intentional.
+ *
+ * Dual-form sidebar declaration (load-bearing — do NOT remove either form):
+ *   - Raw HSL triplets like `--sidebar-background: 230 25% 97%` are consumed
+ *     by `hsl(var(--…))` patterns inside component CSS / inline styles.
+ *   - Resolved `hsl()` forms like `--sidebar: hsl(230 25% 97%)` feed Tailwind
+ *     v4's `@theme inline { --color-sidebar: var(--sidebar) }` mapping so
+ *     `bg-sidebar` / `text-sidebar-foreground` utilities resolve.
+ *
+ * Typography canonical: Inter for surfaces, JetBrains Mono for code.
+ */
+
+@layer base {
+	:root {
+		/* ── Base palette (light) ───────────────────────────────────
+		 * Light mode keeps body and surfaces both white — borders +
+		 * shadow define cards. */
+		--background: 0 0% 100%;
+		--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%;
+		--brand: 213 94% 68%;
+		--brand-foreground: 0 0% 100%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+		--ring: 240 5.9% 10%;
+		--radius: 0.5rem;
+
+		/* ── Chart palette ─────────────────────────────────────────── */
+		--chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+		/* Sixth slot added for Athena dashboard charts (CHARTS.md). The 1-5
+		 * triplets above are canonical canvas values and intentionally diverge
+		 * from CHARTS.md's recommended palette per the "Canvas wins" rule —
+		 * flagged in PR. */
+		--chart-6: 173 70% 42%;
+
+		/* ── Sidebar — blue-tinted gray (hue 230) per handoff ──────── */
+		--sidebar-background: 230 25% 97%;
+		--sidebar-foreground: 230 15% 40%;
+		--sidebar-primary: 230 45% 25%;
+		--sidebar-primary-foreground: 0 0% 98%;
+		--sidebar-accent: 230 40% 92%;
+		--sidebar-accent-foreground: 230 45% 25%;
+		--sidebar-border: 230 20% 90%;
+		--sidebar-ring: 217.2 91.2% 59.8%;
+
+		/* ── StatCard variant tokens ───────────────────────────────── *
+		 * Used by molecules/stat-card.tsx via
+		 *   bg-[hsl(var(--stat-blue)/0.1)] text-[hsl(var(--stat-blue))]
+		 * to render a 10%-tint background with full-saturation icon. */
+		--stat-blue: 217 91% 60%;        /* #3b82f6 */
+		--stat-success: 160 84% 39%;     /* #10b981 */
+		--stat-purple: 258 90% 66%;      /* #8b5cf6 */
+		--stat-destructive: 0 84% 60%;   /* #ef4444 */
+		--stat-amber: 38 92% 50%;        /* #f59e0b */
+
+		/* ── Typography ────────────────────────────────────────────── */
+		--font-sans: "Inter", system-ui, -apple-system, sans-serif;
+		--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+
+		/* ── Letter-spacing scale ──────────────────────────────────── *
+		 * Used by display, h2, page title, stat-card.value. */
+		--tracking-tighter: -0.02em;
+		--tracking-tight: -0.015em;
+		--tracking-normal: 0;
+	}
+
+	.dark {
+		/* ── Base palette (dark) — tiered elevation ─────────────────
+		 * L0: body  L1: sidebar  L2: card/popover  L3: muted/secondary/accent
+		 * All tiers share hue 225 (slight blue-cool) and step lightness
+		 * by ~4-6% so surfaces visually lift above the body. */
+
+		/* L0 — deepest body */
+		--background: 225 24% 6%;
+		--foreground: 220 14% 92%;
+
+		/* L2 — cards & popovers (clearly lifted above body) */
+		--card: 225 18% 13%;
+		--card-foreground: 220 14% 92%;
+		--popover: 225 18% 13%;
+		--popover-foreground: 220 14% 92%;
+
+		/* Primary action — keep light text on dark accent */
+		--primary: 220 14% 95%;
+		--primary-foreground: 225 24% 6%;
+
+		/* L3 — chips/inputs/hover surfaces inside cards */
+		--secondary: 225 14% 19%;
+		--secondary-foreground: 220 14% 92%;
+		--muted: 225 14% 19%;
+		--muted-foreground: 225 9% 64%;
+		--accent: 225 14% 22%;
+		--accent-foreground: 220 14% 92%;
+
+		--destructive: 0 70% 45%;
+		--destructive-foreground: 0 0% 98%;
+		--brand: 213 94% 68%;
+		--brand-foreground: 0 0% 100%;
+
+		/* Borders — visible but subtle separation */
+		--border: 225 14% 22%;
+		--input: 225 14% 22%;
+		--ring: 217 91% 60%;
+
+		/* Chart palette */
+		--chart-1: 220 70% 50%;
+		--chart-2: 160 60% 45%;
+		--chart-3: 30 80% 55%;
+		--chart-4: 280 65% 60%;
+		--chart-5: 340 75% 55%;
+		--chart-6: 173 70% 50%;
+
+		/* L1 — sidebar (between body and cards, distinct hue 225) */
+		--sidebar-background: 225 16% 10%;
+		--sidebar-foreground: 220 14% 80%;
+		--sidebar-primary: 217 91% 65%;
+		--sidebar-primary-foreground: 0 0% 100%;
+		--sidebar-accent: 225 22% 16%;
+		--sidebar-accent-foreground: 220 14% 92%;
+		--sidebar-border: 225 14% 18%;
+		--sidebar-ring: 217.2 91.2% 59.8%;
+
+		/* StatCard variants — same hex; 10% tint reads on dark via opacity */
+		--stat-blue: 217 91% 60%;
+		--stat-success: 160 84% 39%;
+		--stat-purple: 258 90% 66%;
+		--stat-destructive: 0 84% 60%;
+		--stat-amber: 38 92% 50%;
+	}
+
+	* {
+		border-color: hsl(var(--border));
+	}
+
+	body {
+		background: hsl(var(--background));
+		color: hsl(var(--foreground));
+	}
+}
+
+@custom-variant dark (&:is(.dark *));
+
+/* ---------- Resolved hsl() forms ----------
+ * These feed Tailwind v4's `@theme inline { --color-sidebar: var(--sidebar) }`
+ * mapping. They mirror the raw HSL triplets above; keep the two in sync.
+ */
+:root {
+	--sidebar: hsl(230 25% 97%);
+	--sidebar-foreground: hsl(230 15% 40%);
+	--sidebar-primary: hsl(230 45% 25%);
+	--sidebar-primary-foreground: hsl(0 0% 98%);
+	--sidebar-accent: hsl(230 40% 92%);
+	--sidebar-accent-foreground: hsl(230 45% 25%);
+	--sidebar-border: hsl(230 20% 90%);
+	--sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
+	--sidebar: hsl(225 16% 10%);
+	--sidebar-foreground: hsl(220 14% 80%);
+	--sidebar-primary: hsl(217 91% 65%);
+	--sidebar-primary-foreground: hsl(0 0% 100%);
+	--sidebar-accent: hsl(225 22% 16%);
+	--sidebar-accent-foreground: hsl(220 14% 92%);
+	--sidebar-border: hsl(225 14% 18%);
+	--sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@theme inline {
+	--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);
+
+	/* StatCard variant colors — exposed as Tailwind utilities
+	 * (e.g. text-stat-blue, bg-stat-success) for ergonomic access. */
+	--color-stat-blue: hsl(var(--stat-blue));
+	--color-stat-success: hsl(var(--stat-success));
+	--color-stat-purple: hsl(var(--stat-purple));
+	--color-stat-destructive: hsl(var(--stat-destructive));
+	--color-stat-amber: hsl(var(--stat-amber));
+}
+
+@keyframes orb-float-1 {
+	0%, 100% {
+		transform: translate3d(0, 0, 0) scale(1);
+	}
+	33% {
+		transform: translate3d(40px, -30px, 0) scale(1.05);
+	}
+	66% {
+		transform: translate3d(-20px, 20px, 0) scale(0.95);
+	}
+}
+
+@keyframes orb-float-2 {
+	0%, 100% {
+		transform: translate3d(0, 0, 0) scale(1);
+	}
+	50% {
+		transform: translate3d(-30px, -40px, 0) scale(1.08);
+	}
+}

package/tailwind.config.ts

@@ -0,0 +1,70 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+	content: ["./src/**/*.{ts,tsx}"],
+	darkMode: "class",
+	theme: {
+		extend: {
+			colors: {
+				background: "hsl(var(--background))",
+				foreground: "hsl(var(--foreground))",
+				card: {
+					DEFAULT: "hsl(var(--card))",
+					foreground: "hsl(var(--card-foreground))",
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover))",
+					foreground: "hsl(var(--popover-foreground))",
+				},
+				primary: {
+					DEFAULT: "hsl(var(--primary))",
+					foreground: "hsl(var(--primary-foreground))",
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary))",
+					foreground: "hsl(var(--secondary-foreground))",
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted))",
+					foreground: "hsl(var(--muted-foreground))",
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent))",
+					foreground: "hsl(var(--accent-foreground))",
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive))",
+					foreground: "hsl(var(--destructive-foreground))",
+				},
+				border: "hsl(var(--border))",
+				input: "hsl(var(--input))",
+				ring: "hsl(var(--ring))",
+				chart: {
+					"1": "hsl(var(--chart-1))",
+					"2": "hsl(var(--chart-2))",
+					"3": "hsl(var(--chart-3))",
+					"4": "hsl(var(--chart-4))",
+					"5": "hsl(var(--chart-5))",
+				},
+				sidebar: {
+					DEFAULT: "hsl(var(--sidebar-background))",
+					foreground: "hsl(var(--sidebar-foreground))",
+					primary: "hsl(var(--sidebar-primary))",
+					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+					accent: "hsl(var(--sidebar-accent))",
+					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+					border: "hsl(var(--sidebar-border))",
+					ring: "hsl(var(--sidebar-ring))",
+				},
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)",
+			},
+		},
+	},
+	plugins: [],
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"jsx": "react-jsx",
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"declaration": true,
+		"declarationMap": true,
+		"outDir": "./dist",
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"include": ["src/**/*.ts", "src/**/*.tsx"],
+	"exclude": ["node_modules", "dist"]
+}