@autumnsgrove/groveengine 0.1.1 → 0.3.1

package/dist/components/admin/GutterManager.svelte

@@ -1,8 +1,7 @@
 <script>
   import { marked } from "marked";
+  import { Input, Button } from '@groveengine/ui';
   import Dialog from "../ui/Dialog.svelte";
-  import Input from "../ui/Input.svelte";
-  import Button from "../ui/Button.svelte";
   import Select from "../ui/Select.svelte";
   import { toast } from "../ui/toast";
 

package/dist/components/admin/MarkdownEditor.svelte

@@ -1,41 +1,10 @@
 <script>
   import { marked } from "marked";
-  import mermaid from "mermaid";
   import { onMount, tick } from "svelte";
   import { sanitizeMarkdown } from "../../utils/sanitize.js";
   import "../../styles/content.css";
+  import { Button, Input } from '@groveengine/ui';
   import Dialog from "../ui/Dialog.svelte";
-  import Button from "../ui/Button.svelte";
-  import Input from "../ui/Input.svelte";
-
-  // Initialize mermaid with grove-themed dark config
-  mermaid.initialize({
-    startOnLoad: false,
-    theme: "dark",
-    themeVariables: {
-      primaryColor: "#2d5a2d",
-      primaryTextColor: "#d4d4d4",
-      primaryBorderColor: "#4a7c4a",
-      lineColor: "#8bc48b",
-      secondaryColor: "#1e3a1e",
-      tertiaryColor: "#2a2a2a",
-      background: "#1e1e1e",
-      mainBkg: "#252526",
-      secondBkg: "#1e1e1e",
-      nodeBorder: "#4a7c4a",
-      clusterBkg: "#1a2a1a",
-      titleColor: "#8bc48b",
-      edgeLabelBackground: "#252526",
-    },
-    flowchart: {
-      curve: "basis",
-      padding: 15,
-    },
-    sequence: {
-      actorMargin: 50,
-      boxMargin: 10,
-    },
-  });
 
   // Props
   let {
@@ -304,43 +273,9 @@
   );
   let charCount = $derived(content.length);
   let lineCount = $derived(content.split("\n").length);
-  // Custom marked renderer for mermaid blocks
-  const renderer = new marked.Renderer();
-  const originalCodeRenderer = renderer.code.bind(renderer);
-
-  renderer.code = function ({ text, lang }) {
-    if (lang === "mermaid") {
-      // Wrap mermaid code in a special container for rendering
-      const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
-      return `<div class="mermaid-container"><pre class="mermaid" id="${id}">${text}</pre></div>`;
-    }
-    return originalCodeRenderer({ text, lang });
-  };
-
-  marked.use({ renderer });
 
   let previewHtml = $derived(content ? sanitizeMarkdown(marked.parse(content)) : "");
 
-  // Render mermaid diagrams after preview updates
-  async function renderMermaidDiagrams() {
-    await tick();
-    const mermaidElements = document.querySelectorAll(".preview-content .mermaid, .full-preview-scroll .mermaid");
-    if (mermaidElements.length > 0) {
-      try {
-        await mermaid.run({ nodes: mermaidElements });
-      } catch (e) {
-        console.warn("Mermaid rendering error:", e);
-      }
-    }
-  }
-
-  // Trigger mermaid rendering when preview HTML changes
-  $effect(() => {
-    if (previewHtml && (showPreview || showFullPreview)) {
-      renderMermaidDiagrams();
-    }
-  });
-
   // Reading time estimate (average 200 words per minute)
   let readingTime = $derived(() => {
     const minutes = Math.ceil(wordCount / 200);
@@ -534,7 +469,6 @@
     { id: "heading2", label: "Heading 2", insert: "## " },
     { id: "heading3", label: "Heading 3", insert: "### " },
     { id: "code", label: "Code Block", insert: "```\n\n```", cursorOffset: 4 },
-    { id: "mermaid", label: "Mermaid Diagram", insert: "```mermaid\nflowchart TD\n    A[Start] --> B[End]\n```", cursorOffset: 32 },
     { id: "quote", label: "Quote", insert: "> " },
     { id: "list", label: "Bullet List", insert: "- " },
     { id: "numbered", label: "Numbered List", insert: "1. " },
@@ -2620,30 +2554,6 @@
     color: #6a6a6a;
     font-family: "JetBrains Mono", monospace;
   }
-  /* Mermaid Diagram Styles */
-  :global(.mermaid-container) {
-    margin: 1.5rem 0;
-    padding: 1rem;
-    background: var(--light-bg-primary);
-    border: 1px solid var(--light-border-primary);
-    border-radius: 8px;
-    overflow-x: auto;
-  }
-  :global(.mermaid) {
-    display: flex;
-    justify-content: center;
-  }
-  :global(.mermaid svg) {
-    max-width: 100%;
-    height: auto;
-  }
-  /* Mermaid error styling */
-  :global(.mermaid-container .error) {
-    color: #e07030;
-    padding: 0.5rem;
-    font-family: monospace;
-    font-size: 0.85rem;
-  }
   /* Mode Transitions */
   .editor-container {
     transition: border-color 0.3s ease, box-shadow 0.3s ease;

package/dist/components/custom/ContentWithGutter.svelte

@@ -406,16 +406,42 @@
 		DOMPurify
 			? DOMPurify.sanitize(processedContent, {
 					ALLOWED_TAGS: [
+						// Headings
 						'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-						'p', 'a', 'ul', 'ol', 'li', 'blockquote',
-						'code', 'pre', 'strong', 'em', 'img',
-						'table', 'thead', 'tbody', 'tr', 'th', 'td',
-						'br', 'hr', 'div', 'span', 'sup', 'sub',
-						'del', 'ins'
+						// Block elements
+						'p', 'blockquote', 'pre', 'hr', 'br', 'div',
+						// Lists
+						'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+						// Inline elements
+						'a', 'span', 'code', 'strong', 'em', 'b', 'i', 'u',
+						'sup', 'sub', 'del', 'ins', 'mark', 'small', 'abbr',
+						'kbd', 'samp', 'var', 'q', 's',
+						// Tables
+						'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'caption',
+						// Media
+						'img', 'figure', 'figcaption', 'picture', 'source',
+						// Forms (for task lists)
+						'input', 'label',
+						// Code block copy buttons
+						'button', 'svg', 'path', 'rect', 'g', 'line', 'circle', 'polyline'
 					],
 					ALLOWED_ATTR: [
-						'href', 'src', 'alt', 'title', 'class', 'id',
-						'data-anchor', 'data-language', 'data-line-numbers'
+						// Links and media
+						'href', 'src', 'alt', 'title', 'target', 'rel',
+						// Styling and identification
+						'class', 'id', 'style',
+						// Data attributes for custom functionality
+						'data-anchor', 'data-language', 'data-line-numbers', 'data-code',
+						// Accessibility
+						'aria-label', 'aria-hidden', 'role',
+						// Form elements (for task lists)
+						'type', 'checked', 'disabled',
+						// SVG attributes
+						'viewBox', 'fill', 'stroke', 'stroke-width', 'stroke-linecap',
+						'stroke-linejoin', 'd', 'width', 'height', 'x', 'y', 'x1', 'y1',
+						'x2', 'y2', 'r', 'cx', 'cy', 'points', 'xmlns',
+						// Tables
+						'colspan', 'rowspan', 'scope'
 					],
 					ALLOW_DATA_ATTR: true
 			  })

package/dist/components/custom/InternalsPostViewer.svelte

@@ -0,0 +1,95 @@
+<script>
+	/**
+	 * Simple component to display a featured blog post
+	 * @prop {{ title: string; description?: string; slug: string; date?: string }} post - Post data
+	 * @prop {string} [caption] - Optional caption text
+	 */
+	let { post, caption = "" } = $props();
+
+	const formattedDate = $derived(post.date ? new Date(post.date).toLocaleDateString('en-US', {
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric'
+	}) : null);
+</script>
+
+<article class="post-viewer">
+	{#if caption}
+		<span class="caption">{caption}</span>
+	{/if}
+	<a href="/blog/{post.slug}" class="post-link">
+		<h3 class="title">{post.title}</h3>
+		{#if post.description}
+			<p class="description">{post.description}</p>
+		{/if}
+		{#if formattedDate}
+			<time class="date">{formattedDate}</time>
+		{/if}
+	</a>
+</article>
+
+<style>
+	.post-viewer {
+		background: var(--color-bg-secondary);
+		border: 1px solid var(--color-border);
+		border-radius: var(--border-radius-standard);
+		padding: 1.5rem;
+		transition: all 0.3s ease;
+	}
+
+	.caption {
+		display: block;
+		font-size: 0.75rem;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--color-primary);
+		margin-bottom: 0.5rem;
+	}
+
+	.post-link {
+		text-decoration: none;
+		color: inherit;
+		display: block;
+	}
+
+	.post-link:hover .title {
+		color: var(--color-primary);
+	}
+
+	.title {
+		font-size: 1.25rem;
+		margin: 0 0 0.5rem 0;
+		color: var(--color-text);
+		transition: color 0.2s ease;
+	}
+
+	.description {
+		margin: 0 0 0.75rem 0;
+		color: var(--color-text-muted);
+		font-size: 0.95rem;
+		line-height: 1.6;
+	}
+
+	.date {
+		display: block;
+		font-size: 0.875rem;
+		color: var(--color-text-subtle);
+	}
+
+	:global(.dark) .post-viewer {
+		background: var(--color-bg-tertiary-dark);
+		border-color: var(--color-border-dark);
+	}
+
+	:global(.dark) .title {
+		color: var(--color-text-dark);
+	}
+
+	:global(.dark) .description {
+		color: var(--color-text-subtle-dark);
+	}
+
+	:global(.dark) .date {
+		color: var(--color-text-subtle-dark);
+	}
+</style>

package/dist/components/custom/InternalsPostViewer.svelte.d.ts

@@ -0,0 +1,13 @@
+export default InternalsPostViewer;
+type InternalsPostViewer = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const InternalsPostViewer: import("svelte").Component<{
+    post: any;
+    caption?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    post: any;
+    caption?: string;
+};

package/dist/components/ui/index.d.ts

@@ -1,26 +1,14 @@
-export { default as Button } from "./Button.svelte";
-export { default as Card } from "./Card.svelte";
-export { default as Badge } from "./Badge.svelte";
 export { default as Dialog } from "./Dialog.svelte";
-export { default as Input } from "./Input.svelte";
-export { default as Textarea } from "./Textarea.svelte";
 export { default as Select } from "./Select.svelte";
 export { default as Tabs } from "./Tabs.svelte";
 export { default as Accordion } from "./Accordion.svelte";
 export { default as Sheet } from "./Sheet.svelte";
 export { default as Toast } from "./Toast.svelte";
-export { default as Skeleton } from "./Skeleton.svelte";
 export { default as Table } from "./Table.svelte";
 export { toast } from "./toast";
 export { Root as DialogRoot, Trigger as DialogTrigger, Close as DialogClose, Portal as DialogPortal } from "./dialog";
 export { Root as SheetRoot, Trigger as SheetTrigger, Close as SheetClose, Portal as SheetPortal, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription } from "./sheet";
 export { Root as TableRoot, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow } from "./table";
-export { Root as SkeletonRoot, Skeleton as SkeletonComponent } from "./skeleton";
 export { Root as AccordionRoot } from "./accordion";
-export { Root as BadgeRoot } from "./badge";
-export { Root as ButtonRoot } from "./button";
-export { Root as CardRoot, Header as CardHeader, Title as CardTitle, Description as CardDescription, Content as CardContent, Footer as CardFooter } from "./card";
-export { Root as InputRoot } from "./input";
-export { Root as TextareaRoot } from "./textarea";
 export { Root as SelectRoot, Trigger as SelectTrigger, Content as SelectContent, Item as SelectItem, Group as SelectGroup, GroupHeading as SelectLabel, Separator as SelectSeparator, ScrollUpButton as SelectScrollUpButton, ScrollDownButton as SelectScrollDownButton } from "./select";
 export { Root as TabsRoot, List as TabsList, Trigger as TabsTrigger, Content as TabsContent } from "./tabs";

package/dist/components/ui/index.js

@@ -1,16 +1,11 @@
-// Wrappers
-export { default as Button } from "./Button.svelte";
-export { default as Card } from "./Card.svelte";
-export { default as Badge } from "./Badge.svelte";
+// Admin-specific UI component wrappers
+// Generic UI components (Button, Card, Badge, Input, Textarea, Skeleton) are now in @groveengine/ui
 export { default as Dialog } from "./Dialog.svelte";
-export { default as Input } from "./Input.svelte";
-export { default as Textarea } from "./Textarea.svelte";
 export { default as Select } from "./Select.svelte";
 export { default as Tabs } from "./Tabs.svelte";
 export { default as Accordion } from "./Accordion.svelte";
 export { default as Sheet } from "./Sheet.svelte";
 export { default as Toast } from "./Toast.svelte";
-export { default as Skeleton } from "./Skeleton.svelte";
 export { default as Table } from "./Table.svelte";
 // Toast utilities
 export { toast } from "./toast";
@@ -18,12 +13,6 @@ export { toast } from "./toast";
 export { Root as DialogRoot, Trigger as DialogTrigger, Close as DialogClose, Portal as DialogPortal } from "./dialog";
 export { Root as SheetRoot, Trigger as SheetTrigger, Close as SheetClose, Portal as SheetPortal, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription } from "./sheet";
 export { Root as TableRoot, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow } from "./table";
-export { Root as SkeletonRoot, Skeleton as SkeletonComponent } from "./skeleton";
 export { Root as AccordionRoot } from "./accordion";
-export { Root as BadgeRoot } from "./badge";
-export { Root as ButtonRoot } from "./button";
-export { Root as CardRoot, Header as CardHeader, Title as CardTitle, Description as CardDescription, Content as CardContent, Footer as CardFooter } from "./card";
-export { Root as InputRoot } from "./input";
-export { Root as TextareaRoot } from "./textarea";
 export { Root as SelectRoot, Trigger as SelectTrigger, Content as SelectContent, Item as SelectItem, Group as SelectGroup, GroupHeading as SelectLabel, Separator as SelectSeparator, ScrollUpButton as SelectScrollUpButton, ScrollDownButton as SelectScrollDownButton } from "./select";
 export { Root as TabsRoot, List as TabsList, Trigger as TabsTrigger, Content as TabsContent } from "./tabs";

package/dist/components/ui/select/select-separator.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { Separator as SeparatorPrimitive } from "bits-ui";
-	import { Separator } from "../separator/index.js";
+	import { Separator as SeparatorPrimitive } from "bits-ui";
 	import { cn } from "../../../utils";
 
 	let {
@@ -10,4 +9,4 @@
 	}: SeparatorPrimitive.RootProps = $props();
 </script>
 
-<Separator bind:ref class={cn("bg-muted -mx-1 my-1 h-px", className)} {...restProps} />
+<SeparatorPrimitive.Root bind:ref class={cn("bg-muted -mx-1 my-1 h-px", className)} {...restProps} />

package/dist/components/ui/select/select-separator.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Separator as SeparatorPrimitive } from "bits-ui";
+import { Separator as SeparatorPrimitive } from "bits-ui";
 declare const SelectSeparator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
 type SelectSeparator = ReturnType<typeof SelectSeparator>;
 export default SelectSeparator;

package/dist/utils/markdown.d.ts

@@ -11,17 +11,6 @@ export function extractHeaders(markdown: string): any[];
  * @returns {string} HTML with anchor markers converted to spans
  */
 export function processAnchorTags(html: string): string;
-/**
- * Process Mermaid diagrams in markdown content
- * @param {string} markdown - The markdown content
- * @returns {string} Processed markdown with Mermaid diagrams
- */
-export function processMermaidDiagrams(markdown: string): string;
-/**
- * Render Mermaid diagrams in the DOM
- * This should be called after the content is mounted
- */
-export function renderMermaidDiagrams(): Promise<void>;
 /**
  * Parse markdown content and convert to HTML
  * @param {string} markdownContent - The raw markdown content (may include frontmatter)
@@ -121,3 +110,45 @@ export function createContentLoader(config: {
     homeGutter: Object;
     contactGutter: Object;
 }): Object;
+/**
+ * Register a content loader for the site
+ * This should be called by the consuming site to provide access to content
+ * @param {Object} loader - Object with getAllPosts, getSiteConfig, getLatestPost functions
+ */
+export function registerContentLoader(loader: Object): void;
+/**
+ * Get all blog posts
+ * @returns {Array} Array of post objects
+ */
+export function getAllPosts(): any[];
+/**
+ * Get site configuration
+ * @returns {Object} Site config object
+ */
+export function getSiteConfig(): Object;
+/**
+ * Get the latest post
+ * @returns {Object|null} Latest post or null
+ */
+export function getLatestPost(): Object | null;
+/**
+ * Get home page content
+ * @returns {Object|null} Home page data or null
+ */
+export function getHomePage(): Object | null;
+/**
+ * Get a post by its slug
+ * @param {string} slug - The post slug
+ * @returns {Object|null} Post object or null
+ */
+export function getPostBySlug(slug: string): Object | null;
+/**
+ * Get about page content
+ * @returns {Object|null} About page data or null
+ */
+export function getAboutPage(): Object | null;
+/**
+ * Get contact page content
+ * @returns {Object|null} Contact page data or null
+ */
+export function getContactPage(): Object | null;

package/dist/utils/markdown.js

@@ -1,14 +1,6 @@
 import { marked } from "marked";
 import matter from "gray-matter";
-import mermaid from "mermaid";
-import { sanitizeSVG, sanitizeMarkdown } from './sanitize.js';
-
-// Configure Mermaid
-mermaid.initialize({
-  startOnLoad: false,
-  theme: "default",
-  securityLevel: "strict",
-});
+import { sanitizeMarkdown } from './sanitize.js';
 
 // Configure marked renderer for GitHub-style code blocks
 const renderer = new marked.Renderer();
@@ -142,42 +134,6 @@ export function processAnchorTags(html) {
   );
 }
 
-/**
- * Process Mermaid diagrams in markdown content
- * @param {string} markdown - The markdown content
- * @returns {string} Processed markdown with Mermaid diagrams
- */
-export function processMermaidDiagrams(markdown) {
-  // Replace Mermaid code blocks with special divs that will be processed later
-  return markdown.replace(
-    /```mermaid\n([\s\S]*?)```/g,
-    (match, diagramCode) => {
-      const diagramId = "mermaid-" + Math.random().toString(36).substr(2, 9);
-      return `<div class="mermaid-container" id="${diagramId}" data-diagram="${encodeURIComponent(diagramCode.trim())}"></div>`;
-    },
-  );
-}
-
-/**
- * Render Mermaid diagrams in the DOM
- * This should be called after the content is mounted
- */
-export async function renderMermaidDiagrams() {
-  const containers = document.querySelectorAll(".mermaid-container");
-
-  for (const container of containers) {
-    try {
-      const diagramCode = decodeURIComponent(container.dataset.diagram);
-      const { svg } = await mermaid.render(container.id, diagramCode);
-      // Sanitize SVG output before injecting into DOM to prevent XSS
-      container.innerHTML = sanitizeSVG(svg);
-    } catch (error) {
-      console.error("Error rendering Mermaid diagram:", error);
-      container.innerHTML = '<p class="error">Error rendering diagram</p>';
-    }
-  }
-}
-
 /**
  * Parse markdown content and convert to HTML
  * @param {string} markdownContent - The raw markdown content (may include frontmatter)
@@ -186,9 +142,7 @@ export async function renderMermaidDiagrams() {
 export function parseMarkdownContent(markdownContent) {
   const { data, content: markdown } = matter(markdownContent);
 
-  // Process Mermaid diagrams in the content
-  const processedContent = processMermaidDiagrams(markdown);
-  let htmlContent = marked.parse(processedContent);
+  let htmlContent = marked.parse(markdown);
 
   // Process anchor tags in the HTML content
   htmlContent = processAnchorTags(htmlContent);
@@ -755,3 +709,107 @@ export function createContentLoader(config) {
     },
   };
 }
+
+/**
+ * Registry for site-specific content loaders
+ * Sites must register their content loaders using registerContentLoader()
+ */
+let contentLoader = null;
+
+/**
+ * Register a content loader for the site
+ * This should be called by the consuming site to provide access to content
+ * @param {Object} loader - Object with getAllPosts, getSiteConfig, getLatestPost functions
+ */
+export function registerContentLoader(loader) {
+  contentLoader = loader;
+}
+
+/**
+ * Get all blog posts
+ * @returns {Array} Array of post objects
+ */
+export function getAllPosts() {
+  if (!contentLoader || !contentLoader.getAllPosts) {
+    console.warn('getAllPosts: No content loader registered. Call registerContentLoader() in your site.');
+    return [];
+  }
+  return contentLoader.getAllPosts();
+}
+
+/**
+ * Get site configuration
+ * @returns {Object} Site config object
+ */
+export function getSiteConfig() {
+  if (!contentLoader || !contentLoader.getSiteConfig) {
+    console.warn('getSiteConfig: No content loader registered. Call registerContentLoader() in your site.');
+    return {
+      owner: { name: "Admin", email: "" },
+      site: { title: "GroveEngine Site", description: "", copyright: "" },
+      social: {},
+    };
+  }
+  return contentLoader.getSiteConfig();
+}
+
+/**
+ * Get the latest post
+ * @returns {Object|null} Latest post or null
+ */
+export function getLatestPost() {
+  if (!contentLoader || !contentLoader.getLatestPost) {
+    console.warn('getLatestPost: No content loader registered. Call registerContentLoader() in your site.');
+    return null;
+  }
+  return contentLoader.getLatestPost();
+}
+
+/**
+ * Get home page content
+ * @returns {Object|null} Home page data or null
+ */
+export function getHomePage() {
+  if (!contentLoader || !contentLoader.getHomePage) {
+    console.warn('getHomePage: No content loader registered. Call registerContentLoader() in your site.');
+    return null;
+  }
+  return contentLoader.getHomePage();
+}
+
+/**
+ * Get a post by its slug
+ * @param {string} slug - The post slug
+ * @returns {Object|null} Post object or null
+ */
+export function getPostBySlug(slug) {
+  if (!contentLoader || !contentLoader.getPostBySlug) {
+    console.warn('getPostBySlug: No content loader registered. Call registerContentLoader() in your site.');
+    return null;
+  }
+  return contentLoader.getPostBySlug(slug);
+}
+
+/**
+ * Get about page content
+ * @returns {Object|null} About page data or null
+ */
+export function getAboutPage() {
+  if (!contentLoader || !contentLoader.getAboutPage) {
+    console.warn('getAboutPage: No content loader registered. Call registerContentLoader() in your site.');
+    return null;
+  }
+  return contentLoader.getAboutPage();
+}
+
+/**
+ * Get contact page content
+ * @returns {Object|null} Contact page data or null
+ */
+export function getContactPage() {
+  if (!contentLoader || !contentLoader.getContactPage) {
+    console.warn('getContactPage: No content loader registered. Call registerContentLoader() in your site.');
+    return null;
+  }
+  return contentLoader.getContactPage();
+}

package/dist/utils/sanitize.js

@@ -1,9 +1,10 @@
 /**
  * Centralized sanitization utilities for XSS prevention
- * Uses isomorphic-dompurify for both server-side and client-side sanitization
+ * Uses dompurify for client-side sanitization
+ * Note: For Cloudflare Workers, DOM APIs are available so we use client-side dompurify
  */
 
-import DOMPurify from 'isomorphic-dompurify';
+import DOMPurify from 'dompurify';
 
 /**
  * Sanitize HTML content to prevent XSS attacks

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autumnsgrove/groveengine",
-  "version": "0.1.1",
+  "version": "0.3.1",
   "description": "Multi-tenant blog engine for Grove Platform. Features gutter annotations, markdown editing, magic code auth, and Cloudflare Workers deployment.",
   "author": "AutumnsGrove",
   "license": "MIT",
@@ -114,15 +114,14 @@
     "vitest": "^4.0.14"
   },
   "dependencies": {
+    "@groveengine/ui": "^0.3.0",
     "@types/dompurify": "^3.0.5",
     "chart.js": "^4.5.1",
     "clsx": "^2.1.1",
     "dompurify": "^3.3.0",
     "gray-matter": "^4.0.3",
-    "isomorphic-dompurify": "^2.33.0",
     "lucide-svelte": "^0.554.0",
     "marked": "^17.0.1",
-    "mermaid": "^11.12.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0"
   }