@pagesmith/core 0.1.0

package/package.json

@@ -0,0 +1,136 @@
+{
+  "name": "@pagesmith/core",
+  "version": "0.1.0",
+  "description": "File-based CMS — schema-validated collections, lazy markdown rendering, and runtime CSS/JS exports",
+  "keywords": [
+    "cms",
+    "collections",
+    "content",
+    "content-layer",
+    "markdown",
+    "static-site"
+  ],
+  "homepage": "https://github.com/sujeet-pro/pagesmith/tree/main/packages/core",
+  "bugs": {
+    "url": "https://github.com/sujeet-pro/pagesmith/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sujeet-pro/pagesmith.git",
+    "directory": "packages/core"
+  },
+  "files": [
+    "dist/",
+    "src/styles/",
+    "assets/",
+    "templates/"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime/index.d.mts",
+      "import": "./dist/jsx-runtime/index.mjs"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-runtime/index.d.mts",
+      "import": "./dist/jsx-runtime/index.mjs"
+    },
+    "./markdown": {
+      "types": "./dist/markdown/index.d.mts",
+      "import": "./dist/markdown/index.mjs"
+    },
+    "./css": {
+      "types": "./dist/css/index.d.mts",
+      "import": "./dist/css/index.mjs"
+    },
+    "./css/standalone": {
+      "types": "./css.d.ts",
+      "default": "./src/styles/standalone.css"
+    },
+    "./css/content": {
+      "types": "./css.d.ts",
+      "default": "./src/styles/content.css"
+    },
+    "./css/viewport": {
+      "types": "./css.d.ts",
+      "default": "./src/styles/viewport.css"
+    },
+    "./css/fonts": {
+      "types": "./css.d.ts",
+      "default": "./assets/fonts.css"
+    },
+    "./schemas": {
+      "types": "./dist/schemas/index.d.mts",
+      "import": "./dist/schemas/index.mjs"
+    },
+    "./loaders": {
+      "types": "./dist/loaders/index.d.mts",
+      "import": "./dist/loaders/index.mjs"
+    },
+    "./assets": {
+      "types": "./dist/assets/index.d.mts",
+      "import": "./dist/assets/index.mjs"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.mts",
+      "import": "./dist/runtime/index.mjs"
+    },
+    "./ai": {
+      "types": "./dist/ai/index.d.mts",
+      "import": "./dist/ai/index.mjs"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.mts",
+      "import": "./dist/vite/index.mjs"
+    },
+    "./create": {
+      "types": "./dist/create/index.d.mts",
+      "import": "./dist/create/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "test": "vp test run"
+  },
+  "dependencies": {
+    "chokidar": "^4.0.3",
+    "devalue": "^5.1.1",
+    "fast-glob": "^3.3.0",
+    "gray-matter": "^4.0.3",
+    "json5": "^2.2.3",
+    "lightningcss": "^1.32.0",
+    "rehype-accessible-emojis": "^0.3.2",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-expressive-code": "^0.41.7",
+    "rehype-external-links": "^3.0.0",
+    "rehype-mathjax": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-github-alerts": "^0.1.1",
+    "remark-math": "^6.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "remark-smartypants": "^3.0.2",
+    "rolldown": "^1.0.0-rc.10",
+    "smol-toml": "^1.3.0",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0",
+    "ws": "^8.19.0",
+    "yaml": "^2.7.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "@types/ws": "^8.18.1",
+    "typescript": "^5.9.0",
+    "vite-plus": "^0.1.13"
+  }
+}

package/src/styles/code/inline.css

@@ -0,0 +1,26 @@
+/* ═══════════════════════════════════════════════════════════════
+   Inline code styling
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ─── Inline code ─── */
+.prose code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  padding: 0.15em 0.4em;
+  background: var(--color-code-bg);
+  color: var(--color-code-text);
+  border-radius: var(--radius-sm);
+  word-break: break-word;
+  white-space: normal;
+}
+/* Reset for code inside pre blocks */
+.prose pre code {
+  padding: 0;
+  background: none;
+  color: inherit;
+  border-radius: 0;
+  white-space: pre;
+  font-size: var(--font-size-sm);
+  line-height: 1.7;
+  word-break: normal;
+}

package/src/styles/content/alerts.css

@@ -0,0 +1,87 @@
+/* ═══════════════════════════════════════════════════════════════
+   GitHub-style alerts — > [!NOTE], > [!TIP], > [!IMPORTANT],
+   > [!WARNING], > [!CAUTION]
+   ═══════════════════════════════════════════════════════════════ */
+
+.markdown-alert {
+  padding: 0.75rem 1rem;
+  margin: 1.25rem 0;
+  border-left: 4px solid var(--alert-color, var(--color-border-subtle));
+  border-radius: var(--radius-sm);
+  background: var(--alert-bg, var(--color-bg-alt));
+}
+
+.markdown-alert > :first-child { margin-top: 0; }
+.markdown-alert > :last-child { margin-bottom: 0; }
+
+.markdown-alert-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
+  color: var(--alert-color, var(--color-text));
+}
+
+/* Octicon SVG via CSS mask */
+.octicon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  background-color: currentColor;
+  mask-image: var(--oct-icon);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-image: var(--oct-icon);
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+/* ─── Alert variants ─── */
+
+.markdown-alert-note {
+  --alert-color: #0969da;
+  --alert-bg: color-mix(in srgb, #0969da 6%, transparent);
+}
+.markdown-alert-tip {
+  --alert-color: #1a7f37;
+  --alert-bg: color-mix(in srgb, #1a7f37 6%, transparent);
+}
+.markdown-alert-important {
+  --alert-color: #8250df;
+  --alert-bg: color-mix(in srgb, #8250df 6%, transparent);
+}
+.markdown-alert-warning {
+  --alert-color: #9a6700;
+  --alert-bg: color-mix(in srgb, #9a6700 6%, transparent);
+}
+.markdown-alert-caution {
+  --alert-color: #d1242f;
+  --alert-bg: color-mix(in srgb, #d1242f 6%, transparent);
+}
+
+/* ─── Dark mode ─── */
+@media (prefers-color-scheme: dark) {
+  .markdown-alert-note {
+    --alert-color: #4493f8;
+    --alert-bg: color-mix(in srgb, #4493f8 8%, transparent);
+  }
+  .markdown-alert-tip {
+    --alert-color: #3fb950;
+    --alert-bg: color-mix(in srgb, #3fb950 8%, transparent);
+  }
+  .markdown-alert-important {
+    --alert-color: #a371f7;
+    --alert-bg: color-mix(in srgb, #a371f7 8%, transparent);
+  }
+  .markdown-alert-warning {
+    --alert-color: #d29922;
+    --alert-bg: color-mix(in srgb, #d29922 8%, transparent);
+  }
+  .markdown-alert-caution {
+    --alert-color: #f85149;
+    --alert-bg: color-mix(in srgb, #f85149 8%, transparent);
+  }
+}

package/src/styles/content/prose.css

@@ -0,0 +1,225 @@
+/* ─── Root ─── */
+html {
+  font-family: var(--font-sans);
+  font-size: 16px;
+  color: var(--color-text);
+  background: var(--color-bg);
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+}
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── Headings ─── */
+h1 {
+  font-size: clamp(1.75rem, 4vw, var(--font-size-3xl));
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+h2 {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+  margin-top: 2.5rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+h3 {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  line-height: 1.4;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+}
+h4 {
+  font-size: var(--font-size-base);
+  font-weight: 500;
+  line-height: 1.5;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+/* ─── Prose (markdown content) ─── */
+.prose {
+  color: var(--color-text-secondary);
+  line-height: 1.8;
+  font-size: 17px;
+  overflow-wrap: break-word;
+}
+.prose p {
+  margin-bottom: 1.25rem;
+}
+.prose a {
+  color: var(--color-text);
+  text-decoration: underline;
+  text-decoration-color: var(--color-border);
+  text-underline-offset: 2px;
+  transition: text-decoration-color var(--transition-fast);
+}
+.prose a:hover {
+  text-decoration-color: var(--color-text);
+}
+.prose h1 a, .prose h2 a, .prose h3 a, .prose h4 a {
+  text-decoration: none;
+}
+.prose h1 a:hover, .prose h2 a:hover, .prose h3 a:hover, .prose h4 a:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--color-border);
+}
+.prose strong {
+  font-weight: 600;
+  color: var(--color-text);
+}
+.prose em {
+  font-style: italic;
+}
+.prose ul, .prose ol {
+  padding-left: 1.5rem;
+  margin-bottom: 1.25rem;
+}
+.prose ul {
+  list-style: disc;
+}
+.prose ol {
+  list-style: decimal;
+}
+.prose li {
+  margin-bottom: 0.35rem;
+}
+.prose li::marker {
+  color: var(--color-text-muted);
+}
+.prose hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 2.5rem 0;
+}
+.prose img {
+  border-radius: var(--radius-md);
+  margin: 1.5rem 0;
+}
+.prose > *:first-child {
+  margin-top: 0;
+}
+.prose > *:last-child {
+  margin-bottom: 0;
+}
+
+/* ─── Figures ─── */
+.prose figure {
+  margin: 2rem 0;
+}
+.prose figure img {
+  display: block;
+  max-width: 100%;
+  max-height: 100vh;
+  height: auto;
+  margin: 0 auto;
+  border-radius: var(--radius-md);
+}
+.prose figure img.only-light,
+.prose figure img.only-dark {
+  width: 100%;
+}
+.prose figcaption {
+  margin-top: 0.5rem;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  text-align: center;
+  line-height: 1.5;
+}
+
+/* ─── Tables ─── */
+.prose table {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  margin-bottom: 1.25rem;
+  font-size: var(--font-size-sm);
+}
+.prose th, .prose td {
+  padding: 0.6rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+  white-space: nowrap;
+}
+.prose th {
+  font-weight: 600;
+  color: var(--color-text);
+  background: var(--color-bg-alt);
+}
+.prose tr:last-child td {
+  border-bottom: none;
+}
+
+/* ─── Blockquotes ─── */
+.prose blockquote {
+  border-left: 3px solid var(--color-blockquote-border);
+  padding: 0.5rem 1.25rem;
+  margin-bottom: 1.25rem;
+  color: var(--color-text-muted);
+  background: var(--color-blockquote-bg);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+.prose blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+/* ─── Task lists (GFM) ─── */
+.prose .contains-task-list {
+  list-style: none;
+  padding-left: 0;
+}
+.prose .task-list-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+.prose .task-list-item input[type="checkbox"] {
+  accent-color: var(--color-text-muted);
+}
+
+/* ─── Light/dark image switching ─── */
+img.only-dark, .prose figure img.only-dark {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  img.only-light,
+  .prose figure img.only-light {
+    display: none;
+  }
+  img.only-dark,
+  .prose figure img.only-dark {
+    display: block;
+  }
+}
+
+/* ─── Inline SVGs (embedded, use currentColor) ─── */
+.prose .inline-svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 1.5rem auto;
+  color: var(--color-text-secondary);
+}
+
+/* ─── Invert images in dark mode (.invert. naming convention) ─── */
+@media (prefers-color-scheme: dark) {
+  .prose img.invert-on-dark {
+    filter: invert(1) hue-rotate(180deg);
+  }
+}
+
+/* ─── Scroll margin for anchors ─── */
+.prose h1, .prose h2, .prose h3, .prose h4, h2[id], h3[id] {
+  scroll-margin-top: calc(var(--header-height) + 1.5rem);
+}

package/src/styles/content/toc.css

@@ -0,0 +1,87 @@
+/* ─── TOC ─── */
+.toc {
+  font-size: var(--font-size-sm);
+}
+.toc-title {
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+  margin-bottom: 0.75rem;
+}
+.toc-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  border-left: 2px solid var(--color-border-subtle);
+  padding-left: 0;
+}
+.toc-item a {
+  display: block;
+  padding: 0.2rem 0 0.2rem 0.75rem;
+  color: var(--color-text-muted);
+  transition: color var(--transition-fast), border-color var(--transition-fast);
+  line-height: 1.4;
+  border-left: 2px solid transparent;
+  margin-left: -2px;
+}
+.toc-item a:hover {
+  color: var(--color-text);
+}
+.toc-item.active a {
+  color: var(--color-text);
+  border-left-color: var(--color-accent);
+}
+.toc-item.depth-3 a {
+  padding-left: 1.5rem;
+  font-size: 0.8125rem;
+}
+
+/* ─── Mobile TOC accordion ─── */
+/* Visibility controlled by layout/grid.css breakpoints */
+.toc-mobile {
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-alt);
+}
+.toc-mobile summary {
+  padding: 0.75rem 1rem;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.toc-mobile summary::-webkit-details-marker {
+  display: none;
+}
+.toc-mobile summary::after {
+  content: "";
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  clip-path: polygon(25% 20%, 75% 50%, 25% 80%);
+  transition: transform var(--transition-fast);
+  flex-shrink: 0;
+}
+.toc-mobile[open] summary::after {
+  transform: rotate(90deg);
+}
+.toc-mobile .toc {
+  padding: 0 1rem 0.75rem;
+}
+.toc-mobile .toc-title {
+  display: none;
+}
+.toc-mobile .toc-list {
+  border-left: none;
+}
+.toc-mobile .toc-item a {
+  border-left: none;
+  margin-left: 0;
+}

package/src/styles/content.css

@@ -0,0 +1,22 @@
+/* ═══════════════════════════════════════════════════════════════
+   Content rendering CSS — all-in-one for styled markdown output.
+
+   Import this single file to get everything needed for rendering
+   processed markdown: typography and inline code styling.
+   Code block styling is handled by Expressive Code (injected inline).
+   Does NOT include layout (grid/sidebar) or site-level components.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Foundations */
+@import "./foundations/reset.css";
+@import "./foundations/tokens.css";
+
+/* Prose content */
+@import "./content/prose.css";
+@import "./content/alerts.css";
+
+/* Inline code */
+@import "./code/inline.css";
+
+/* Viewport */
+@import "./viewport.css";

package/src/styles/foundations/reset.css

@@ -0,0 +1,49 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  scroll-behavior: smooth;
+  scrollbar-gutter: stable;
+}
+body {
+  line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+img, svg, video {
+  display: block;
+  max-width: 100%;
+}
+h1, h2, h3, h4, h5, h6, p {
+  overflow-wrap: break-word;
+}
+ul, ol {
+  list-style: none;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+button, input, textarea, select {
+  font: inherit;
+}
+table {
+  border-collapse: collapse;
+}
+
+/* Screen-reader only */
+.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;
+}

package/src/styles/foundations/tokens.css

@@ -0,0 +1,66 @@
+/* -- Design Tokens -- */
+
+:root {
+  color-scheme: light dark;
+
+  /* Colors */
+  --color-bg: light-dark(#f5f4f0, #111110);
+  --color-bg-alt: light-dark(#efefeb, #1a1a18);
+  --color-bg-elevated: light-dark(#f5f4f0, #1e1e1c);
+  --color-bg-code: light-dark(#efefeb, #1a1a18);
+  --color-bg-hover: light-dark(#efefeb, #222220);
+
+  --color-text: light-dark(#111110, #f5f4f0);
+  --color-text-secondary: light-dark(#333330, #ccccca);
+  --color-text-muted: light-dark(#7a7a72, #888882);
+
+  --color-border: light-dark(#d0cfc9, #2a2a28);
+  --color-border-subtle: light-dark(#e5e4de, #222220);
+  --color-border-hover: light-dark(#c0bfb9, #3a3a38);
+
+  --color-accent: light-dark(#d4381e, #e04a2e);
+  --color-accent-hover: light-dark(#b82e16, #f05a3e);
+  --color-accent-subtle: light-dark(rgba(212, 56, 30, 0.06), rgba(224, 74, 46, 0.08));
+
+  --color-code-bg: light-dark(#efefeb, #1a1a18);
+  --color-code-text: light-dark(#333330, #ccccca);
+
+  --color-blockquote-border: light-dark(#d0cfc9, #333330);
+  --color-blockquote-bg: light-dark(#efefeb, #1a1a18);
+
+  --color-overlay-bg: light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
+  --color-header-bg: light-dark(rgba(245, 244, 240, 0.85), rgba(17, 17, 16, 0.85));
+  --color-text-inverse: light-dark(#f5f4f0, #111110);
+
+  /* Shadows */
+  --shadow-color: light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.2));
+  --shadow-color-md: light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.25));
+  --shadow-color-lg: light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.3));
+  --shadow-sm: 0 1px 2px var(--shadow-color);
+  --shadow-md: 0 4px 6px var(--shadow-color-md);
+  --shadow-lg: 0 10px 25px var(--shadow-color-lg);
+
+  /* Typography */
+  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 2rem;
+
+  /* Spacing */
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Layout */
+  --header-height: 60px;
+}