@elyracode/mini-lit 0.9.4

package/package.json

@@ -0,0 +1,69 @@
+{
+	"name": "@elyracode/mini-lit",
+	"version": "0.9.4",
+	"description": "Lightweight Lit components with shadcn-inspired theming and Tailwind CSS integration (fork of @mariozechner/mini-lit)",
+	"type": "module",
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"dist",
+		"src/styles",
+		"README.md",
+		"llms.txt"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./dist/*": "./dist/*",
+		"./styles/*": "./src/styles/*"
+	},
+	"scripts": {
+		"clean": "shx rm -rf dist",
+		"build": "tsc",
+		"dev": "tsc --watch --preserveWatchOutput",
+		"check": "tsc --noEmit",
+		"test": "vitest --run",
+		"prepublishOnly": "npm run clean && npm run build"
+	},
+	"dependencies": {
+		"@preact/signals-core": "^1.12.1",
+		"class-variance-authority": "^0.7.1",
+		"diff": "^8.0.2",
+		"highlight.js": "^11.11.1",
+		"html-parse-string": "^0.0.9",
+		"katex": "^0.16.22",
+		"lucide": "^0.544.0",
+		"marked": "^16.3.0",
+		"tailwind-merge": "^3.3.1",
+		"tailwind-variants": "^3.1.1",
+		"uhtml": "^5.0.9"
+	},
+	"peerDependencies": {
+		"lit": "^3.3.1"
+	},
+	"devDependencies": {
+		"@types/node": "^24.5.2",
+		"happy-dom": "^20.0.8",
+		"shx": "^0.4.0",
+		"typescript": "^5.7.3",
+		"vitest": "^3.2.4"
+	},
+	"keywords": [
+		"lit",
+		"web-components",
+		"ui",
+		"components",
+		"tailwind",
+		"mini-lit"
+	],
+	"author": "Knut W. Horne",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/kwhorne/elyra.git",
+		"directory": "packages/mini-lit"
+	}
+}

package/src/styles/base.css

@@ -0,0 +1,63 @@
+/* Base styles for mini-lit */
+
+/* Enable manual dark mode with class for Tailwind v4 */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Utility styles that are commonly needed */
+@import "./utils/syntax-highlighting.css";
+@import "./utils/math.css";
+@import "./utils/markdown.css";
+
+/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind */
+@theme inline {
+   --color-background: var(--background);
+   --color-foreground: var(--foreground);
+   --color-card: var(--card);
+   --color-card-foreground: var(--card-foreground);
+   --color-popover: var(--popover);
+   --color-popover-foreground: var(--popover-foreground);
+   --color-primary: var(--primary);
+   --color-primary-foreground: var(--primary-foreground);
+   --color-secondary: var(--secondary);
+   --color-secondary-foreground: var(--secondary-foreground);
+   --color-muted: var(--muted);
+   --color-muted-foreground: var(--muted-foreground);
+   --color-accent: var(--accent);
+   --color-accent-foreground: var(--accent-foreground);
+   --color-destructive: var(--destructive);
+   --color-destructive-foreground: var(--destructive-foreground);
+   --color-border: var(--border);
+   --color-input: var(--input);
+   --color-ring: var(--ring);
+   --color-chart-1: var(--chart-1);
+   --color-chart-2: var(--chart-2);
+   --color-chart-3: var(--chart-3);
+   --color-chart-4: var(--chart-4);
+   --color-chart-5: var(--chart-5);
+   --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);
+
+   --font-family-sans: var(--font-sans);
+   --font-family-mono: var(--font-mono);
+   --font-family-serif: var(--font-serif);
+
+   --radius-sm: calc(var(--radius) - 4px);
+   --radius-md: calc(var(--radius) - 2px);
+   --radius-lg: var(--radius);
+   --radius-xl: calc(var(--radius) + 4px);
+
+   --shadow-2xs: var(--shadow-2xs);
+   --shadow-xs: var(--shadow-xs);
+   --shadow-sm: var(--shadow-sm);
+   --shadow: var(--shadow);
+   --shadow-md: var(--shadow-md);
+   --shadow-lg: var(--shadow-lg);
+   --shadow-xl: var(--shadow-xl);
+   --shadow-2xl: var(--shadow-2xl);
+}

package/src/styles/themes/claude.css

@@ -0,0 +1,155 @@
+/* Import base styles including dark mode variant and utilities */
+@import "../base.css";
+
+:root {
+   --background: oklch(0.9818 0.0054 95.0986);
+   --foreground: oklch(0.3438 0.0269 95.7226);
+   --card: oklch(0.9818 0.0054 95.0986);
+   --card-foreground: oklch(0.1908 0.002 106.5859);
+   --popover: oklch(1 0 0);
+   --popover-foreground: oklch(0.2671 0.0196 98.939);
+   --primary: oklch(0.6171 0.1375 39.0427);
+   --primary-foreground: oklch(1 0 0);
+   --secondary: oklch(0.9245 0.0138 92.9892);
+   --secondary-foreground: oklch(0.4334 0.0177 98.6048);
+   --muted: oklch(0.9341 0.0153 90.239);
+   --muted-foreground: oklch(0.6059 0.0075 97.4233);
+   --accent: oklch(0.9245 0.0138 92.9892);
+   --accent-foreground: oklch(0.2671 0.0196 98.939);
+   --destructive: oklch(0.1908 0.002 106.5859);
+   --destructive-foreground: oklch(1 0 0);
+   --border: oklch(0.8847 0.0069 97.3627);
+   --input: oklch(0.7621 0.0156 98.3528);
+   --ring: oklch(0.6171 0.1375 39.0427);
+   --chart-1: oklch(0.5583 0.1276 42.9956);
+   --chart-2: oklch(0.6898 0.1581 290.4107);
+   --chart-3: oklch(0.8816 0.0276 93.128);
+   --chart-4: oklch(0.8822 0.0403 298.1792);
+   --chart-5: oklch(0.5608 0.1348 42.0584);
+   --sidebar: oklch(0.9663 0.008 98.8792);
+   --sidebar-foreground: oklch(0.359 0.0051 106.6524);
+   --sidebar-primary: oklch(0.6171 0.1375 39.0427);
+   --sidebar-primary-foreground: oklch(0.9881 0 0);
+   --sidebar-accent: oklch(0.9245 0.0138 92.9892);
+   --sidebar-accent-foreground: oklch(0.325 0 0);
+   --sidebar-border: oklch(0.9401 0 0);
+   --sidebar-ring: oklch(0.7731 0 0);
+   --font-sans:
+      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+      "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+   --radius: 0.5rem;
+   --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+   --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+   --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+   --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+   --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+   --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+   --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+   --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+   --tracking-normal: 0em;
+   --spacing: 0.25rem;
+}
+
+.dark {
+   --background: oklch(0.2679 0.0036 106.6427);
+   --foreground: oklch(0.8074 0.0142 93.0137);
+   --card: oklch(0.2679 0.0036 106.6427);
+   --card-foreground: oklch(0.9818 0.0054 95.0986);
+   --popover: oklch(0.3085 0.0035 106.6039);
+   --popover-foreground: oklch(0.9211 0.004 106.4781);
+   --primary: oklch(0.6724 0.1308 38.7559);
+   --primary-foreground: oklch(1 0 0);
+   --secondary: oklch(0.9818 0.0054 95.0986);
+   --secondary-foreground: oklch(0.3085 0.0035 106.6039);
+   --muted: oklch(0.2213 0.0038 106.707);
+   --muted-foreground: oklch(0.7713 0.0169 99.0657);
+   --accent: oklch(0.213 0.0078 95.4245);
+   --accent-foreground: oklch(0.9663 0.008 98.8792);
+   --destructive: oklch(0.6368 0.2078 25.3313);
+   --destructive-foreground: oklch(1 0 0);
+   --border: oklch(0.3618 0.0101 106.8928);
+   --input: oklch(0.4336 0.0113 100.2195);
+   --ring: oklch(0.6724 0.1308 38.7559);
+   --chart-1: oklch(0.5583 0.1276 42.9956);
+   --chart-2: oklch(0.6898 0.1581 290.4107);
+   --chart-3: oklch(0.213 0.0078 95.4245);
+   --chart-4: oklch(0.3074 0.0516 289.323);
+   --chart-5: oklch(0.5608 0.1348 42.0584);
+   --sidebar: oklch(0.2357 0.0024 67.7077);
+   --sidebar-foreground: oklch(0.8074 0.0142 93.0137);
+   --sidebar-primary: oklch(0.325 0 0);
+   --sidebar-primary-foreground: oklch(0.9881 0 0);
+   --sidebar-accent: oklch(0.168 0.002 106.6177);
+   --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
+   --sidebar-border: oklch(0.9401 0 0);
+   --sidebar-ring: oklch(0.7731 0 0);
+   --font-sans:
+      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+      "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+   --radius: 0.5rem;
+   --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+   --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+   --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+   --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+   --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+   --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+   --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+   --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+@theme inline {
+   --color-background: var(--background);
+   --color-foreground: var(--foreground);
+   --color-card: var(--card);
+   --color-card-foreground: var(--card-foreground);
+   --color-popover: var(--popover);
+   --color-popover-foreground: var(--popover-foreground);
+   --color-primary: var(--primary);
+   --color-primary-foreground: var(--primary-foreground);
+   --color-secondary: var(--secondary);
+   --color-secondary-foreground: var(--secondary-foreground);
+   --color-muted: var(--muted);
+   --color-muted-foreground: var(--muted-foreground);
+   --color-accent: var(--accent);
+   --color-accent-foreground: var(--accent-foreground);
+   --color-destructive: var(--destructive);
+   --color-destructive-foreground: var(--destructive-foreground);
+   --color-border: var(--border);
+   --color-input: var(--input);
+   --color-ring: var(--ring);
+   --color-chart-1: var(--chart-1);
+   --color-chart-2: var(--chart-2);
+   --color-chart-3: var(--chart-3);
+   --color-chart-4: var(--chart-4);
+   --color-chart-5: var(--chart-5);
+   --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);
+
+   --font-family-sans: var(--font-sans);
+   --font-family-mono: var(--font-mono);
+   --font-family-serif: var(--font-serif);
+
+   --radius-sm: calc(var(--radius) - 4px);
+   --radius-md: calc(var(--radius) - 2px);
+   --radius-lg: var(--radius);
+   --radius-xl: calc(var(--radius) + 4px);
+
+   --shadow-2xs: var(--shadow-2xs);
+   --shadow-xs: var(--shadow-xs);
+   --shadow-sm: var(--shadow-sm);
+   --shadow: var(--shadow);
+   --shadow-md: var(--shadow-md);
+   --shadow-lg: var(--shadow-lg);
+   --shadow-xl: var(--shadow-xl);
+   --shadow-2xl: var(--shadow-2xl);
+}

package/src/styles/themes/default.css

@@ -0,0 +1,102 @@
+/* Import base styles including dark mode variant and utilities */
+@import "../base.css";
+
+:root {
+   --background: oklch(1 0 0);
+   --foreground: oklch(0.145 0 0);
+   --card: oklch(1 0 0);
+   --card-foreground: oklch(0.145 0 0);
+   --popover: oklch(1 0 0);
+   --popover-foreground: oklch(0.145 0 0);
+   --primary: oklch(0.205 0 0);
+   --primary-foreground: oklch(0.985 0 0);
+   --secondary: oklch(0.97 0 0);
+   --secondary-foreground: oklch(0.205 0 0);
+   --muted: oklch(0.97 0 0);
+   --muted-foreground: oklch(0.556 0 0);
+   --accent: oklch(0.97 0 0);
+   --accent-foreground: oklch(0.4 0.18 240);
+   --destructive: oklch(0.577 0.245 27.325);
+   --destructive-foreground: oklch(1 0 0);
+   --border: oklch(0.922 0 0);
+   --input: oklch(0.922 0 0);
+   --ring: oklch(0.708 0 0);
+   --chart-1: oklch(0.81 0.1 252);
+   --chart-2: oklch(53.553% 0.02798 259.829);
+   --chart-3: oklch(0.55 0.22 263);
+   --chart-4: oklch(0.49 0.22 264);
+   --chart-5: oklch(0.42 0.18 266);
+   --sidebar: oklch(0.985 0 0);
+   --sidebar-foreground: oklch(0.145 0 0);
+   --sidebar-primary: oklch(0.205 0 0);
+   --sidebar-primary-foreground: oklch(0.985 0 0);
+   --sidebar-accent: oklch(0.97 0 0);
+   --sidebar-accent-foreground: oklch(0.205 0 0);
+   --sidebar-border: oklch(0.922 0 0);
+   --sidebar-ring: oklch(0.708 0 0);
+   --font-sans:
+      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+      "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+   --radius: 0.625rem;
+   --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+   --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+   --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+   --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+   --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+   --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+   --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+   --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+   --tracking-normal: 0em;
+   --spacing: 0.25rem;
+}
+
+.dark {
+   --background: oklch(0.145 0 0);
+   --foreground: oklch(0.985 0 0);
+   --card: oklch(0.205 0 0);
+   --card-foreground: oklch(0.985 0 0);
+   --popover: oklch(0.269 0 0);
+   --popover-foreground: oklch(0.985 0 0);
+   --primary: oklch(0.922 0 0);
+   --primary-foreground: oklch(0.205 0 0);
+   --secondary: oklch(0.269 0 0);
+   --secondary-foreground: oklch(0.985 0 0);
+   --muted: oklch(0.269 0 0);
+   --muted-foreground: oklch(0.708 0 0);
+   --accent: oklch(0.371 0 0);
+   --accent-foreground: oklch(0.75 0.18 85);
+   --destructive: oklch(0.704 0.191 22.216);
+   --destructive-foreground: oklch(0.985 0 0);
+   --border: oklch(0.275 0 0);
+   --input: oklch(0.325 0 0);
+   --ring: oklch(0.556 0 0);
+   --chart-1: oklch(0.81 0.1 252);
+   --chart-2: oklch(0.62 0.19 260);
+   --chart-3: oklch(0.55 0.22 263);
+   --chart-4: oklch(0.49 0.22 264);
+   --chart-5: oklch(0.42 0.18 266);
+   --sidebar: oklch(0.205 0 0);
+   --sidebar-foreground: oklch(0.985 0 0);
+   --sidebar-primary: oklch(0.488 0.243 264.376);
+   --sidebar-primary-foreground: oklch(0.985 0 0);
+   --sidebar-accent: oklch(0.269 0 0);
+   --sidebar-accent-foreground: oklch(0.985 0 0);
+   --sidebar-border: oklch(0.275 0 0);
+   --sidebar-ring: oklch(0.439 0 0);
+   --font-sans:
+      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+      "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+   --radius: 0.625rem;
+   --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+   --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+   --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+   --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+   --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+   --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+   --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+   --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}

package/src/styles/utils/markdown.css

@@ -0,0 +1,104 @@
+/* Markdown content styles using Tailwind utilities */
+
+.markdown-content h1 {
+   @apply text-2xl font-semibold mt-5 mb-2;
+}
+
+.markdown-content h2 {
+   @apply text-xl font-semibold mt-4 mb-2;
+}
+
+.markdown-content h3 {
+   @apply text-lg font-semibold mt-3 mb-2;
+}
+
+.markdown-content h4 {
+   @apply text-base font-semibold mt-3 mb-2;
+}
+
+.markdown-content h5 {
+   @apply text-sm font-semibold mt-2 mb-1;
+}
+
+.markdown-content h6 {
+   @apply text-xs font-semibold mt-2 mb-1;
+}
+
+.markdown-content p {
+   @apply leading-relaxed mt-4 first:mt-0 max-w-full;
+}
+
+.markdown-content a {
+   @apply text-primary underline hover:text-primary/80;
+}
+
+.markdown-content strong {
+   @apply font-semibold;
+}
+
+.markdown-content em {
+   @apply italic;
+}
+
+.markdown-content ul {
+   @apply list-disc my-4 pl-6 space-y-2;
+}
+
+.markdown-content ol {
+   @apply list-decimal my-4 pl-6 space-y-2;
+}
+
+.markdown-content li {
+   @apply leading-relaxed;
+}
+
+/* Nested lists should have less top margin */
+.markdown-content li > ul,
+.markdown-content li > ol {
+   @apply mt-2 mb-0;
+}
+
+/* Paragraphs in lists need proper spacing */
+.markdown-content li > p {
+   @apply mb-2;
+}
+
+.markdown-content li > p:last-child {
+   @apply mb-0;
+}
+
+.markdown-content blockquote {
+   @apply border-l-4 border-border pl-4 my-4 text-muted-foreground;
+}
+
+.markdown-content code:not(.hljs) {
+   @apply bg-muted text-foreground px-1.5 py-0.5 rounded text-sm;
+}
+
+.markdown-content table {
+   @apply w-full border-collapse m-0;
+}
+
+.markdown-content th {
+   @apply bg-muted text-foreground font-semibold p-2 border-b border-r border-border text-left;
+}
+
+.markdown-content th:last-child {
+   @apply border-r-0;
+}
+
+.markdown-content td {
+   @apply p-2 text-foreground  border-b border-r border-border;
+}
+
+.markdown-content td:last-child {
+   @apply border-r-0;
+}
+
+.markdown-content tr:last-child td {
+   @apply border-b-0;
+}
+
+.markdown-content hr {
+   @apply border-0 border-t border-border my-8;
+}

package/src/styles/utils/math.css

@@ -0,0 +1,7 @@
+/* KaTeX CSS for math rendering in markdown */
+@import "katex/dist/katex.min.css";
+
+/* KaTeX display margin override */
+.katex-display {
+   margin: 0;
+}

package/src/styles/utils/syntax-highlighting.css

@@ -0,0 +1,134 @@
+/* Syntax highlighting colors - GitHub Light theme (default) */
+:root {
+   --syntax-keyword: oklch(0.577 0.245 27.325); /* #d73a49 */
+   --syntax-entity: oklch(0.511 0.136 307.715); /* #6f42c1 */
+   --syntax-constant: oklch(0.435 0.141 237.016); /* #005cc5 */
+   --syntax-string: oklch(0.296 0.103 244.038); /* #032f62 */
+   --syntax-variable: oklch(0.608 0.178 54.291); /* #e36209 */
+   --syntax-comment: oklch(0.54 0.019 247.858); /* #6a737d */
+   --syntax-tag: oklch(0.403 0.111 145.348); /* #22863a */
+   --syntax-heading: oklch(0.435 0.141 237.016); /* #005cc5 */
+   --syntax-list: oklch(0.537 0.108 88.766); /* #735c0f */
+   --syntax-addition-bg: oklch(0.984 0.029 166.113); /* #f0fff4 */
+   --syntax-addition-fg: oklch(0.403 0.111 145.348); /* #22863a */
+   --syntax-deletion-bg: oklch(0.981 0.025 17.672); /* #ffeef0 */
+   --syntax-deletion-fg: oklch(0.431 0.183 27.522); /* #b31d28 */
+}
+
+/* Syntax highlighting colors - GitHub Dark theme */
+.dark {
+   --syntax-keyword: oklch(0.698 0.159 21.174); /* #ff7b72 */
+   --syntax-entity: oklch(0.792 0.124 307.715); /* #d2a8ff */
+   --syntax-constant: oklch(0.732 0.137 237.016); /* #79c0ff */
+   --syntax-string: oklch(0.786 0.08 237.016); /* #a5d6ff */
+   --syntax-variable: oklch(0.74 0.141 54.291); /* #ffa657 */
+   --syntax-comment: oklch(0.626 0.025 247.858); /* #8b949e */
+   --syntax-tag: oklch(0.812 0.159 145.348); /* #7ee787 */
+   --syntax-heading: oklch(0.523 0.181 237.016); /* #1f6feb */
+   --syntax-list: oklch(0.866 0.141 88.766); /* #f2cc60 */
+   --syntax-addition-bg: oklch(0.188 0.06 166.113); /* #033a16 */
+   --syntax-addition-fg: oklch(0.87 0.147 145.348); /* #aff5b4 */
+   --syntax-deletion-bg: oklch(0.233 0.129 17.672); /* #67060c */
+   --syntax-deletion-fg: oklch(0.92 0.067 17.672); /* #ffdcd7 */
+}
+
+/* Keywords */
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+   color: var(--syntax-keyword);
+}
+
+/* Entity (functions, classes) */
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+   color: var(--syntax-entity);
+}
+
+/* Constants */
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+   color: var(--syntax-constant);
+}
+
+/* Strings */
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+   color: var(--syntax-string);
+}
+
+/* Built-in variables */
+.hljs-built_in,
+.hljs-symbol {
+   color: var(--syntax-variable);
+}
+
+/* Comments */
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+   color: var(--syntax-comment);
+}
+
+/* Tags */
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+   color: var(--syntax-tag);
+}
+
+/* Default text */
+.hljs-subst {
+   color: var(--color-text-primary);
+}
+
+/* Section headings */
+.hljs-section {
+   color: var(--syntax-heading);
+   font-weight: bold;
+}
+
+/* Bullets */
+.hljs-bullet {
+   color: var(--syntax-list);
+}
+
+/* Emphasis */
+.hljs-emphasis {
+   color: var(--color-text-primary);
+   font-style: italic;
+}
+
+/* Strong */
+.hljs-strong {
+   color: var(--color-text-primary);
+   font-weight: bold;
+}
+
+/* Additions */
+.hljs-addition {
+   color: var(--syntax-addition-fg);
+   background-color: var(--syntax-addition-bg);
+}
+
+/* Deletions */
+.hljs-deletion {
+   color: var(--syntax-deletion-fg);
+   background-color: var(--syntax-deletion-bg);
+}