autoblogger 0.1.16 → 0.1.17

package/README.md

@@ -313,68 +313,74 @@ The `[[...path]]` syntax is a catch-all route that captures the dashboard's inte
 
 ## Configuring Tailwind
 
-Autoblogger's UI uses Tailwind CSS classes. Add the package's files to your Tailwind content configuration so the classes aren't purged:
+Autoblogger's UI uses Tailwind CSS. Add the package's files to your Tailwind content configuration so the classes aren't purged:
 
 ```javascript
-// tailwind.config.js (or tailwind.config.ts)
+// tailwind.config.js
 module.exports = {
+  presets: [require('autoblogger/styles/preset')],
   content: [
     './app/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
     // Add this line to include Autoblogger's components
     './node_modules/autoblogger/dist/**/*.{js,mjs}',
   ],
+  darkMode: 'class',
   // ... rest of your config
 }
 ```
 
-The dashboard uses semantic color tokens like `bg-card`, `text-muted-foreground`, `border-border`, etc. These come from shadcn/ui conventions. If you're using shadcn, they'll work automatically. Otherwise, add these CSS variables to your globals:
+The `autoblogger/styles/preset` includes:
+- Typography scale (`text-title`, `text-h1`, `text-h2`, `text-h3`, `text-body`, `text-table`)
+- Color tokens (`bg-background`, `text-muted-foreground`, `border-border`, etc.)
+- Border radius utilities
+
+---
+
+## Styling
+
+Autoblogger includes a complete theme with CSS variables, prose styles, and editor styling. Import it in your global CSS:
+
+```css
+/* app/globals.css */
+@import 'autoblogger/styles/autoblogger.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+This provides:
+- **Light and dark mode colors** — shadcn/ui Zinc theme tokens
+- **Typography scale** — Consistent heading and body sizes  
+- **Prose styles** — Article content formatting (headings, paragraphs, lists, code, blockquotes)
+- **Editor styles** — Tiptap focus states and placeholder styling
+- **Animations** — Fade-in effects with reduced motion support
+
+### Customizing
+
+Override any CSS variable after the import:
 
 ```css
-/* globals.css */
+@import 'autoblogger/styles/autoblogger.css';
+
 :root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --ring: 0 0% 3.9%;
+  --primary: 221 83% 53%;  /* Custom blue primary */
 }
+```
 
-.dark {
-  --background: 0 0% 3.9%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 0 0% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
-  --secondary: 0 0% 14.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 63.9%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 14.9%;
-  --input: 0 0% 14.9%;
-  --ring: 0 0% 83.1%;
-}
+Or pass custom styles when creating the CMS:
+
+```typescript
+// lib/cms.ts
+export const cms = createAutoblogger({
+  // ... other config
+  styles: {
+    container: 'max-w-3xl mx-auto px-8',
+    title: 'text-4xl font-serif',
+    prose: 'prose prose-lg dark:prose-invert',
+  },
+})
 ```
 
 ---

package/dist/cli/index.js

@@ -24,8 +24,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 
 // src/cli/init.ts
-var fs6 = __toESM(require("fs"));
-var path5 = __toESM(require("path"));
+var fs7 = __toESM(require("fs"));
+var path6 = __toESM(require("path"));
 var import_child_process2 = require("child_process");
 var import_picocolors3 = __toESM(require("picocolors"));
 
@@ -468,6 +468,40 @@ function writeTailwindConfig(configPath, content) {
   fs4.writeFileSync(configPath, content, "utf-8");
 }
 
+// src/cli/utils/css-patch.ts
+var fs5 = __toESM(require("fs"));
+var path4 = __toESM(require("path"));
+var AUTOBLOGGER_CSS_IMPORT = "@import 'autoblogger/styles/autoblogger.css';";
+function findGlobalsCss(projectRoot) {
+  const candidates = [
+    "app/globals.css",
+    "src/app/globals.css",
+    "styles/globals.css",
+    "src/styles/globals.css",
+    "app/global.css",
+    "src/app/global.css"
+  ];
+  for (const candidate of candidates) {
+    const fullPath = path4.join(projectRoot, candidate);
+    if (fs5.existsSync(fullPath)) {
+      return fullPath;
+    }
+  }
+  return null;
+}
+function patchGlobalsCss(cssPath) {
+  if (!fs5.existsSync(cssPath)) {
+    return { success: false, alreadyPatched: false };
+  }
+  let content = fs5.readFileSync(cssPath, "utf-8");
+  if (content.includes("autoblogger")) {
+    return { success: true, alreadyPatched: true, filePath: cssPath };
+  }
+  content = AUTOBLOGGER_CSS_IMPORT + "\n\n" + content;
+  fs5.writeFileSync(cssPath, content, "utf-8");
+  return { success: true, alreadyPatched: false, filePath: cssPath };
+}
+
 // src/cli/utils/prompts.ts
 var import_prompts = __toESM(require("prompts"));
 var import_picocolors = __toESM(require("picocolors"));
@@ -669,8 +703,8 @@ export default async function WriterPage({
 `;
 
 // src/cli/import.ts
-var fs5 = __toESM(require("fs"));
-var path4 = __toESM(require("path"));
+var fs6 = __toESM(require("fs"));
+var path5 = __toESM(require("path"));
 var import_child_process = require("child_process");
 var import_picocolors2 = __toESM(require("picocolors"));
 function parseFrontmatter(content) {
@@ -734,14 +768,14 @@ function slugify(text) {
 }
 function parseMarkdownFile(filePath) {
   try {
-    const content = fs5.readFileSync(filePath, "utf-8");
+    const content = fs6.readFileSync(filePath, "utf-8");
     const { frontmatter, body } = parseFrontmatter(content);
     let title = frontmatter.title;
     if (!title) {
       const headingMatch = body.match(/^#\s+(.+)$/m);
-      title = headingMatch ? headingMatch[1] : path4.basename(filePath, path4.extname(filePath));
+      title = headingMatch ? headingMatch[1] : path5.basename(filePath, path5.extname(filePath));
     }
-    const slug = frontmatter.slug || slugify(path4.basename(filePath, path4.extname(filePath))) || slugify(title);
+    const slug = frontmatter.slug || slugify(path5.basename(filePath, path5.extname(filePath))) || slugify(title);
     let publishedAt;
     if (frontmatter.date) {
       const parsed = new Date(frontmatter.date);
@@ -772,9 +806,9 @@ function parseMarkdownFile(filePath) {
 function findMarkdownFiles(dir) {
   const files = [];
   function walk(currentDir) {
-    const entries = fs5.readdirSync(currentDir, { withFileTypes: true });
+    const entries = fs6.readdirSync(currentDir, { withFileTypes: true });
     for (const entry of entries) {
-      const fullPath = path4.join(currentDir, entry.name);
+      const fullPath = path5.join(currentDir, entry.name);
       if (entry.isDirectory()) {
         if (!entry.name.startsWith(".") && entry.name !== "node_modules") {
           walk(fullPath);
@@ -789,8 +823,8 @@ function findMarkdownFiles(dir) {
 }
 async function importContent(dirPath, options = {}) {
   const cwd = process.cwd();
-  const absolutePath = path4.isAbsolute(dirPath) ? dirPath : path4.join(cwd, dirPath);
-  if (!fs5.existsSync(absolutePath)) {
+  const absolutePath = path5.isAbsolute(dirPath) ? dirPath : path5.join(cwd, dirPath);
+  if (!fs6.existsSync(absolutePath)) {
     throw new Error(`Directory not found: ${dirPath}`);
   }
   const files = findMarkdownFiles(absolutePath);
@@ -816,8 +850,8 @@ async function importContent(dirPath, options = {}) {
   }
   const status = options.status || "draft";
   const importScript = generateImportScript(posts, status, options.tag);
-  const scriptPath = path4.join(cwd, ".autoblogger-import.mjs");
-  fs5.writeFileSync(scriptPath, importScript);
+  const scriptPath = path5.join(cwd, ".autoblogger-import.mjs");
+  fs6.writeFileSync(scriptPath, importScript);
   try {
     (0, import_child_process.execSync)(`node ${scriptPath}`, {
       cwd,
@@ -825,8 +859,8 @@ async function importContent(dirPath, options = {}) {
     });
     log("check", `Imported ${posts.length} posts as ${status}`);
   } finally {
-    if (fs5.existsSync(scriptPath)) {
-      fs5.unlinkSync(scriptPath);
+    if (fs6.existsSync(scriptPath)) {
+      fs6.unlinkSync(scriptPath);
     }
   }
 }
@@ -923,7 +957,7 @@ async function init(options = {}) {
     log("check", `Found ${project.prismaSchemaPath}`);
   }
   if (project.hasTailwind) {
-    log("check", `Found ${path5.basename(project.tailwindConfigPath)}`);
+    log("check", `Found ${path6.basename(project.tailwindConfigPath)}`);
   }
   if (!project.appRouterPath) {
     console.log(import_picocolors3.default.red("Error: Could not find App Router (app/ or src/app/ directory)"));
@@ -932,7 +966,7 @@ async function init(options = {}) {
   }
   const contentCounts = {};
   for (const contentPath of project.contentPaths) {
-    contentCounts[contentPath] = countMarkdownFiles(path5.join(cwd, contentPath));
+    contentCounts[contentPath] = countMarkdownFiles(path6.join(cwd, contentPath));
   }
   let answers = {
     dbProvider: "postgresql",
@@ -950,7 +984,7 @@ async function init(options = {}) {
     answers.importContent = true;
     answers.importPath = project.contentPaths[0];
   }
-  const prismaPath = project.prismaSchemaPath || path5.join(cwd, "prisma", "schema.prisma");
+  const prismaPath = project.prismaSchemaPath || path6.join(cwd, "prisma", "schema.prisma");
   const conflicts = checkConflicts(prismaPath);
   if (conflicts.length > 0) {
     console.log(import_picocolors3.default.red(`
@@ -976,7 +1010,7 @@ Error: Found conflicting model names in your Prisma schema:`));
       console.log("  - npx prisma generate");
     }
     if (answers.importContent && answers.importPath) {
-      const count = contentCounts[answers.importPath] || countMarkdownFiles(path5.join(cwd, answers.importPath));
+      const count = contentCounts[answers.importPath] || countMarkdownFiles(path6.join(cwd, answers.importPath));
       console.log(`
 Would import ${count} posts from ${answers.importPath}`);
     }
@@ -985,11 +1019,11 @@ Would import ${count} posts from ${answers.importPath}`);
   }
   const filesToBackup = [];
   if (project.hasPrisma) filesToBackup.push("prisma/schema.prisma");
-  if (project.tailwindConfigPath) filesToBackup.push(path5.relative(cwd, project.tailwindConfigPath));
-  if (fs6.existsSync(path5.join(cwd, "lib", "cms.ts"))) filesToBackup.push("lib/cms.ts");
+  if (project.tailwindConfigPath) filesToBackup.push(path6.relative(cwd, project.tailwindConfigPath));
+  if (fs7.existsSync(path6.join(cwd, "lib", "cms.ts"))) filesToBackup.push("lib/cms.ts");
   if (filesToBackup.length > 0) {
     const backupPath = createBackup(filesToBackup, cwd);
-    log("backup", `Created backup at ${path5.relative(cwd, backupPath)}`);
+    log("backup", `Created backup at ${path6.relative(cwd, backupPath)}`);
   }
   const mergeResult = mergeSchema(prismaPath, answers.dbProvider);
   if (!mergeResult.success) {
@@ -997,38 +1031,38 @@ Would import ${count} posts from ${answers.importPath}`);
     return;
   }
   writeSchema(prismaPath, mergeResult.content);
-  log("write", `Updated ${path5.relative(cwd, prismaPath)} (added 11 models)`);
-  const libDir = path5.join(cwd, "lib");
-  const cmsConfigPath = path5.join(libDir, "cms.ts");
-  if (fs6.existsSync(cmsConfigPath)) {
+  log("write", `Updated ${path6.relative(cwd, prismaPath)} (added 11 models)`);
+  const libDir = path6.join(cwd, "lib");
+  const cmsConfigPath = path6.join(libDir, "cms.ts");
+  if (fs7.existsSync(cmsConfigPath)) {
     log("skip", "lib/cms.ts already exists");
   } else {
-    if (!fs6.existsSync(libDir)) {
-      fs6.mkdirSync(libDir, { recursive: true });
+    if (!fs7.existsSync(libDir)) {
+      fs7.mkdirSync(libDir, { recursive: true });
     }
-    fs6.writeFileSync(cmsConfigPath, CMS_CONFIG_TEMPLATE);
+    fs7.writeFileSync(cmsConfigPath, CMS_CONFIG_TEMPLATE);
     log("write", "Created lib/cms.ts");
   }
-  const apiRoutePath = path5.join(cwd, project.appRouterPath, "api", "cms", "[...path]", "route.ts");
-  if (fs6.existsSync(apiRoutePath)) {
+  const apiRoutePath = path6.join(cwd, project.appRouterPath, "api", "cms", "[...path]", "route.ts");
+  if (fs7.existsSync(apiRoutePath)) {
     log("skip", `${project.appRouterPath}/api/cms/[...path]/route.ts already exists`);
   } else {
-    const apiRouteDir = path5.dirname(apiRoutePath);
-    if (!fs6.existsSync(apiRouteDir)) {
-      fs6.mkdirSync(apiRouteDir, { recursive: true });
+    const apiRouteDir = path6.dirname(apiRoutePath);
+    if (!fs7.existsSync(apiRouteDir)) {
+      fs7.mkdirSync(apiRouteDir, { recursive: true });
     }
-    fs6.writeFileSync(apiRoutePath, API_ROUTE_TEMPLATE);
+    fs7.writeFileSync(apiRoutePath, API_ROUTE_TEMPLATE);
     log("write", `Created ${project.appRouterPath}/api/cms/[...path]/route.ts`);
   }
-  const dashboardPath = path5.join(cwd, project.appRouterPath, "writer", "[[...path]]", "page.tsx");
-  if (fs6.existsSync(dashboardPath)) {
+  const dashboardPath = path6.join(cwd, project.appRouterPath, "writer", "[[...path]]", "page.tsx");
+  if (fs7.existsSync(dashboardPath)) {
     log("skip", `${project.appRouterPath}/writer/[[...path]]/page.tsx already exists`);
   } else {
-    const dashboardDir = path5.dirname(dashboardPath);
-    if (!fs6.existsSync(dashboardDir)) {
-      fs6.mkdirSync(dashboardDir, { recursive: true });
+    const dashboardDir = path6.dirname(dashboardPath);
+    if (!fs7.existsSync(dashboardDir)) {
+      fs7.mkdirSync(dashboardDir, { recursive: true });
     }
-    fs6.writeFileSync(dashboardPath, DASHBOARD_PAGE_TEMPLATE);
+    fs7.writeFileSync(dashboardPath, DASHBOARD_PAGE_TEMPLATE);
     log("write", `Created ${project.appRouterPath}/writer/[[...path]]/page.tsx`);
   }
   if (project.tailwindConfigPath) {
@@ -1037,7 +1071,7 @@ Would import ${count} posts from ${answers.importPath}`);
       log("skip", "Tailwind config already includes autoblogger");
     } else if (patchResult.success && patchResult.content) {
       writeTailwindConfig(project.tailwindConfigPath, patchResult.content);
-      log("write", `Updated ${path5.basename(project.tailwindConfigPath)}`);
+      log("write", `Updated ${path6.basename(project.tailwindConfigPath)}`);
     } else {
       log("warn", "Could not auto-patch Tailwind config. Please add manually:");
       console.log(import_picocolors3.default.gray("  content: ['./node_modules/autoblogger/dist/**/*.{js,mjs}']"));
@@ -1048,12 +1082,24 @@ Would import ${count} posts from ${answers.importPath}`);
       log("skip", "Tailwind CSS config already includes autoblogger");
     } else if (patchResult.success && patchResult.content) {
       writeTailwindConfig(project.tailwindCssPath, patchResult.content);
-      log("write", `Updated ${path5.basename(project.tailwindCssPath)} (Tailwind v4)`);
+      log("write", `Updated ${path6.basename(project.tailwindCssPath)} (Tailwind v4)`);
     } else {
       log("warn", "Could not auto-patch Tailwind v4 CSS config. Please add manually:");
       console.log(import_picocolors3.default.gray('  @source "./node_modules/autoblogger/dist/**/*.{js,mjs}";'));
     }
   }
+  const globalsCssPath = findGlobalsCss(cwd);
+  if (globalsCssPath) {
+    const cssResult = patchGlobalsCss(globalsCssPath);
+    if (cssResult.alreadyPatched) {
+      log("skip", "globals.css already imports autoblogger styles");
+    } else if (cssResult.success) {
+      log("write", `Updated ${path6.relative(cwd, globalsCssPath)} (added autoblogger CSS import)`);
+    }
+  } else {
+    log("warn", "Could not find globals.css. Please add manually:");
+    console.log(import_picocolors3.default.gray("  @import 'autoblogger/styles/autoblogger.css';"));
+  }
   if (answers.runMigration) {
     console.log("");
     log("run", "prisma migrate dev --name add-autoblogger");
@@ -1075,10 +1121,10 @@ Would import ${count} posts from ${answers.importPath}`);
   }
   if (answers.importContent && answers.importPath) {
     console.log("");
-    const count = contentCounts[answers.importPath] || countMarkdownFiles(path5.join(cwd, answers.importPath));
+    const count = contentCounts[answers.importPath] || countMarkdownFiles(path6.join(cwd, answers.importPath));
     log("info", `Found ${count} markdown files in ${answers.importPath}`);
     try {
-      await importContent(path5.join(cwd, answers.importPath), { status: "draft" });
+      await importContent(path6.join(cwd, answers.importPath), { status: "draft" });
     } catch (error) {
       log("warn", `Content import failed: ${error instanceof Error ? error.message : error}`);
       console.log(import_picocolors3.default.gray("  You can import later with: npx autoblogger import <path>"));
@@ -1154,13 +1200,13 @@ async function main() {
         dryRun: flags.dryRun
       });
     } else if (command === "import") {
-      const path6 = args[1];
-      if (!path6) {
+      const path7 = args[1];
+      if (!path7) {
         console.error(import_picocolors4.default.red("Error: Please specify a path to import from"));
         console.log("\nUsage: npx autoblogger import <path>");
         process.exit(1);
       }
-      await importContent(path6, {
+      await importContent(path7, {
         status: flags.status || "draft",
         tag: flags.tag,
         dryRun: flags.dryRun

package/dist/styles/article.d.mts

@@ -3,11 +3,11 @@ declare const ARTICLE_LAYOUT: {
     readonly padding: 24;
 };
 declare const ARTICLE_CLASSES: {
-    readonly container: "max-w-ab-content mx-auto px-ab-content-padding";
-    readonly title: "text-ab-title font-bold";
-    readonly subtitle: "text-ab-h2 text-muted-foreground";
+    readonly container: "max-w-[680px] mx-auto px-6";
+    readonly title: "text-title font-bold";
+    readonly subtitle: "text-h2 text-muted-foreground";
     readonly byline: "text-sm text-muted-foreground";
-    readonly body: "text-ab-body prose dark:prose-invert";
+    readonly body: "text-body prose dark:prose-invert";
     readonly prose: "prose dark:prose-invert max-w-none";
 };
 type ArticleClasses = typeof ARTICLE_CLASSES;

package/dist/styles/article.d.ts

@@ -3,11 +3,11 @@ declare const ARTICLE_LAYOUT: {
     readonly padding: 24;
 };
 declare const ARTICLE_CLASSES: {
-    readonly container: "max-w-ab-content mx-auto px-ab-content-padding";
-    readonly title: "text-ab-title font-bold";
-    readonly subtitle: "text-ab-h2 text-muted-foreground";
+    readonly container: "max-w-[680px] mx-auto px-6";
+    readonly title: "text-title font-bold";
+    readonly subtitle: "text-h2 text-muted-foreground";
     readonly byline: "text-sm text-muted-foreground";
-    readonly body: "text-ab-body prose dark:prose-invert";
+    readonly body: "text-body prose dark:prose-invert";
     readonly prose: "prose dark:prose-invert max-w-none";
 };
 type ArticleClasses = typeof ARTICLE_CLASSES;

package/dist/styles/article.js

@@ -29,11 +29,11 @@ var ARTICLE_LAYOUT = {
   padding: 24
 };
 var ARTICLE_CLASSES = {
-  container: "max-w-ab-content mx-auto px-ab-content-padding",
-  title: "text-ab-title font-bold",
-  subtitle: "text-ab-h2 text-muted-foreground",
+  container: "max-w-[680px] mx-auto px-6",
+  title: "text-title font-bold",
+  subtitle: "text-h2 text-muted-foreground",
   byline: "text-sm text-muted-foreground",
-  body: "text-ab-body prose dark:prose-invert",
+  body: "text-body prose dark:prose-invert",
   prose: "prose dark:prose-invert max-w-none"
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/styles/article.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/article.ts"],"sourcesContent":["export const ARTICLE_LAYOUT = {\n  maxWidth: 680,\n  padding: 24,\n} as const\n\nexport const ARTICLE_CLASSES = {\n  container: 'max-w-ab-content mx-auto px-ab-content-padding',\n  title: 'text-ab-title font-bold',\n  subtitle: 'text-ab-h2 text-muted-foreground',\n  byline: 'text-sm text-muted-foreground',\n  body: 'text-ab-body prose dark:prose-invert',\n  prose: 'prose dark:prose-invert max-w-none',\n} as const\n\nexport type ArticleClasses = typeof ARTICLE_CLASSES\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,SAAS;AACX;AAEO,IAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/styles/article.ts"],"sourcesContent":["export const ARTICLE_LAYOUT = {\n  maxWidth: 680,\n  padding: 24,\n} as const\n\nexport const ARTICLE_CLASSES = {\n  container: 'max-w-[680px] mx-auto px-6',\n  title: 'text-title font-bold',\n  subtitle: 'text-h2 text-muted-foreground',\n  byline: 'text-sm text-muted-foreground',\n  body: 'text-body prose dark:prose-invert',\n  prose: 'prose dark:prose-invert max-w-none',\n} as const\n\nexport type ArticleClasses = typeof ARTICLE_CLASSES\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,SAAS;AACX;AAEO,IAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT;","names":[]}

package/dist/styles/article.mjs

@@ -4,11 +4,11 @@ var ARTICLE_LAYOUT = {
   padding: 24
 };
 var ARTICLE_CLASSES = {
-  container: "max-w-ab-content mx-auto px-ab-content-padding",
-  title: "text-ab-title font-bold",
-  subtitle: "text-ab-h2 text-muted-foreground",
+  container: "max-w-[680px] mx-auto px-6",
+  title: "text-title font-bold",
+  subtitle: "text-h2 text-muted-foreground",
   byline: "text-sm text-muted-foreground",
-  body: "text-ab-body prose dark:prose-invert",
+  body: "text-body prose dark:prose-invert",
   prose: "prose dark:prose-invert max-w-none"
 };
 export {

package/dist/styles/article.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/article.ts"],"sourcesContent":["export const ARTICLE_LAYOUT = {\n  maxWidth: 680,\n  padding: 24,\n} as const\n\nexport const ARTICLE_CLASSES = {\n  container: 'max-w-ab-content mx-auto px-ab-content-padding',\n  title: 'text-ab-title font-bold',\n  subtitle: 'text-ab-h2 text-muted-foreground',\n  byline: 'text-sm text-muted-foreground',\n  body: 'text-ab-body prose dark:prose-invert',\n  prose: 'prose dark:prose-invert max-w-none',\n} as const\n\nexport type ArticleClasses = typeof ARTICLE_CLASSES\n"],"mappings":";AAAO,IAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,SAAS;AACX;AAEO,IAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/styles/article.ts"],"sourcesContent":["export const ARTICLE_LAYOUT = {\n  maxWidth: 680,\n  padding: 24,\n} as const\n\nexport const ARTICLE_CLASSES = {\n  container: 'max-w-[680px] mx-auto px-6',\n  title: 'text-title font-bold',\n  subtitle: 'text-h2 text-muted-foreground',\n  byline: 'text-sm text-muted-foreground',\n  body: 'text-body prose dark:prose-invert',\n  prose: 'prose dark:prose-invert max-w-none',\n} as const\n\nexport type ArticleClasses = typeof ARTICLE_CLASSES\n"],"mappings":";AAAO,IAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,SAAS;AACX;AAEO,IAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT;","names":[]}

package/dist/styles/autoblogger.css

@@ -0,0 +1,165 @@
+/**
+ * Autoblogger Theme CSS (Isolated)
+ * 
+ * All styles are scoped under .autoblogger container
+ * Variables are prefixed with --ab- to avoid conflicts
+ */
+
+/* ============================================
+   CSS VARIABLES (namespaced with --ab-)
+   ============================================ */
+
+:root {
+  --ab-background: 0 0% 100%;
+  --ab-foreground: 240 10% 3.9%;
+  --ab-card: 0 0% 100%;
+  --ab-card-foreground: 240 10% 3.9%;
+  --ab-popover: 0 0% 100%;
+  --ab-popover-foreground: 240 10% 3.9%;
+  --ab-primary: 240 5.9% 10%;
+  --ab-primary-foreground: 0 0% 98%;
+  --ab-secondary: 240 4.8% 95.9%;
+  --ab-secondary-foreground: 240 5.9% 10%;
+  --ab-muted: 240 4.8% 95.9%;
+  --ab-muted-foreground: 240 3.8% 46.1%;
+  --ab-accent: 240 4.8% 95.9%;
+  --ab-accent-foreground: 240 5.9% 10%;
+  --ab-destructive: 0 84.2% 60.2%;
+  --ab-destructive-foreground: 0 0% 98%;
+  --ab-border: 240 5.9% 90%;
+  --ab-input: 240 5.9% 90%;
+  --ab-ring: 240 10% 3.9%;
+  --ab-radius: 0.5rem;
+}
+
+.dark {
+  --ab-background: 240 10% 3.9%;
+  --ab-foreground: 0 0% 98%;
+  --ab-card: 240 10% 3.9%;
+  --ab-card-foreground: 0 0% 98%;
+  --ab-popover: 240 10% 3.9%;
+  --ab-popover-foreground: 0 0% 98%;
+  --ab-primary: 0 0% 98%;
+  --ab-primary-foreground: 240 5.9% 10%;
+  --ab-secondary: 240 3.7% 15.9%;
+  --ab-secondary-foreground: 0 0% 98%;
+  --ab-muted: 240 3.7% 15.9%;
+  --ab-muted-foreground: 240 5% 64.9%;
+  --ab-accent: 240 3.7% 15.9%;
+  --ab-accent-foreground: 0 0% 98%;
+  --ab-destructive: 0 62.8% 30.6%;
+  --ab-destructive-foreground: 0 0% 98%;
+  --ab-border: 240 3.7% 15.9%;
+  --ab-input: 240 3.7% 15.9%;
+  --ab-ring: 240 4.9% 83.9%;
+}
+
+/* Alias --ab-* to standard names for Tailwind compatibility */
+.autoblogger {
+  --background: var(--ab-background);
+  --foreground: var(--ab-foreground);
+  --card: var(--ab-card);
+  --card-foreground: var(--ab-card-foreground);
+  --popover: var(--ab-popover);
+  --popover-foreground: var(--ab-popover-foreground);
+  --primary: var(--ab-primary);
+  --primary-foreground: var(--ab-primary-foreground);
+  --secondary: var(--ab-secondary);
+  --secondary-foreground: var(--ab-secondary-foreground);
+  --muted: var(--ab-muted);
+  --muted-foreground: var(--ab-muted-foreground);
+  --accent: var(--ab-accent);
+  --accent-foreground: var(--ab-accent-foreground);
+  --destructive: var(--ab-destructive);
+  --destructive-foreground: var(--ab-destructive-foreground);
+  --border: var(--ab-border);
+  --input: var(--ab-input);
+  --ring: var(--ab-ring);
+  --radius: var(--ab-radius);
+}
+
+/* ============================================
+   SCOPED BASE STYLES (only inside .autoblogger)
+   ============================================ */
+
+.autoblogger {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.autoblogger *, .autoblogger *::before, .autoblogger *::after {
+  border-color: hsl(var(--border));
+}
+
+.autoblogger * {
+  transition-property: background-color, border-color;
+  transition-duration: 150ms;
+  transition-timing-function: ease-out;
+}
+
+.autoblogger a, .autoblogger button {
+  touch-action: manipulation;
+}
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+
+@keyframes ab-fadeInUp {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.autoblogger .animate-fade-in-up {
+  opacity: 0;
+  animation: ab-fadeInUp 0.5s ease-out forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .autoblogger .animate-fade-in-up {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+/* ============================================
+   PROSE STYLES (scoped)
+   ============================================ */
+
+.autoblogger .prose { max-width: none; }
+.autoblogger .prose h1 { font-size: 22px; line-height: 1.3; font-weight: 700; margin-bottom: 1.5rem; }
+.autoblogger .prose h2 { font-size: 18px; line-height: 1.4; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; }
+.autoblogger .prose h3 { font-size: 16px; line-height: 1.4; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; }
+.autoblogger .prose p { margin-bottom: 1rem; line-height: 1.625; }
+.autoblogger .prose ul, .autoblogger .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
+.autoblogger .prose li { margin-bottom: 0.5rem; }
+.autoblogger .prose ul li { list-style-type: disc; }
+.autoblogger .prose ol li { list-style-type: decimal; }
+.autoblogger .prose a { color: #2563eb; text-decoration: underline; }
+.dark .autoblogger .prose a { color: #60a5fa; }
+.autoblogger .prose code { background-color: hsl(var(--muted)); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; }
+.autoblogger .prose pre { background-color: hsl(var(--muted)); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1rem; }
+.autoblogger .prose pre code { background-color: transparent; padding: 0; }
+.autoblogger .prose blockquote { border-left: 4px solid hsl(var(--border)); padding-left: 1rem; font-style: italic; margin: 1rem 0; }
+.autoblogger .prose img { border-radius: 0.5rem; margin: 1rem 0; }
+.autoblogger .prose hr { margin: 2rem 0; border-color: hsl(var(--border)); }
+
+/* ============================================
+   TIPTAP EDITOR STYLES (scoped)
+   ============================================ */
+
+.autoblogger .ProseMirror:focus { outline: none; }
+.autoblogger .ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: #d1d5db;
+  pointer-events: none;
+  float: left;
+  height: 0;
+}
+.dark .autoblogger .ProseMirror p.is-editor-empty:first-child::before { color: #374151; }
+.autoblogger .ProseMirror h1 { font-size: 22px; line-height: 1.3; }
+.autoblogger .ProseMirror h2 { font-size: 18px; line-height: 1.4; }
+.autoblogger .ProseMirror h3 { font-size: 16px; line-height: 1.4; }