@autumnsgrove/groveengine 0.3.3 → 0.4.1

package/dist/components/admin/composables/useWritingSession.svelte.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Writing Session Composable
+ * Manages campfire sessions and writing goals
+ */
+/**
+ * Creates a writing session manager with Svelte 5 runes
+ * @param {object} options - Configuration options
+ * @param {Function} options.getWordCount - Function to get current word count
+ * @returns {object} Session state and controls
+ */
+export function useWritingSession(options?: {
+    getWordCount: Function;
+}): object;

package/dist/components/admin/composables/useWritingSession.svelte.js

@@ -0,0 +1,100 @@
+/**
+ * Writing Session Composable
+ * Manages campfire sessions and writing goals
+ */
+
+/**
+ * Creates a writing session manager with Svelte 5 runes
+ * @param {object} options - Configuration options
+ * @param {Function} options.getWordCount - Function to get current word count
+ * @returns {object} Session state and controls
+ */
+export function useWritingSession(options = {}) {
+  const { getWordCount } = options;
+
+  // Campfire session state
+  let campfire = $state({
+    active: false,
+    startTime: null,
+    targetMinutes: 25,
+    startWordCount: 0,
+  });
+
+  // Writing goals state
+  let goal = $state({
+    enabled: false,
+    targetWords: 500,
+    sessionWords: 0,
+  });
+
+  // Campfire elapsed time (needs to be computed with current time)
+  function getCampfireElapsed() {
+    if (!campfire.active || !campfire.startTime) return "0:00";
+    const now = Date.now();
+    const elapsed = Math.floor((now - campfire.startTime) / 1000);
+    const mins = Math.floor(elapsed / 60);
+    const secs = elapsed % 60;
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  }
+
+  // Writing goal progress
+  function getGoalProgress(currentWordCount) {
+    if (!goal.enabled) return 0;
+    const wordsWritten = currentWordCount - goal.sessionWords;
+    return Math.min(100, Math.round((wordsWritten / goal.targetWords) * 100));
+  }
+
+  // Words written in campfire session
+  function getCampfireWords(currentWordCount) {
+    return currentWordCount - campfire.startWordCount;
+  }
+
+  function startCampfire() {
+    const currentWords = getWordCount ? getWordCount() : 0;
+    campfire.active = true;
+    campfire.startTime = Date.now();
+    campfire.startWordCount = currentWords;
+  }
+
+  function endCampfire() {
+    // Could show a summary modal here in the future
+    campfire.active = false;
+    campfire.startTime = null;
+  }
+
+  function promptWritingGoal() {
+    const target = prompt("Set your word goal for this session:", "500");
+    if (target && !isNaN(parseInt(target))) {
+      const currentWords = getWordCount ? getWordCount() : 0;
+      goal.enabled = true;
+      goal.targetWords = parseInt(target);
+      goal.sessionWords = currentWords;
+    }
+  }
+
+  function disableGoal() {
+    goal.enabled = false;
+  }
+
+  return {
+    get campfire() {
+      return campfire;
+    },
+    get goal() {
+      return goal;
+    },
+    get isCampfireActive() {
+      return campfire.active;
+    },
+    get isGoalEnabled() {
+      return goal.enabled;
+    },
+    getCampfireElapsed,
+    getGoalProgress,
+    getCampfireWords,
+    startCampfire,
+    endCampfire,
+    promptWritingGoal,
+    disableGoal,
+  };
+}

package/dist/components/custom/ContentWithGutter.svelte

@@ -76,13 +76,16 @@
 
 	/**
 	 * Calculate positions based on anchor locations, with collision detection
+	 * Uses getBoundingClientRect() for accurate positioning regardless of offset parent chains
 	 */
 	async function updatePositions() {
 		if (!gutterElement || !contentBodyElement) return;
 
 		await tick(); // Wait for DOM to update
 
-		const gutterTop = gutterElement.offsetTop;
+		// Use getBoundingClientRect for accurate relative positioning
+		// This works regardless of offset parent chains and CSS transforms
+		const gutterRect = gutterElement.getBoundingClientRect();
 
 		let lastBottom = 0; // Track the bottom edge of the last positioned item
 		const newOverflowingAnchors = [];
@@ -94,20 +97,24 @@
 			if (!el && import.meta.env.DEV) {
 				console.warn(`Anchor element not found for: ${anchor}`);
 			}
+			// Use getBoundingClientRect for consistent positioning
+			const elRect = el ? el.getBoundingClientRect() : null;
 			return {
 				anchor,
 				key: getKey(anchor),
 				element: el,
-				top: el ? el.offsetTop : Infinity
+				elementRect: elRect,
+				top: elRect ? elRect.top : Infinity
 			};
 		}).sort((a, b) => a.top - b.top);
 
-		anchorPositions.forEach(({ anchor, key, element }) => {
+		anchorPositions.forEach(({ anchor, key, element, elementRect }) => {
 			const groupEl = anchorGroupElements[key];
 
-			if (element && groupEl) {
-				// Desired position (aligned with anchor element)
-				let desiredTop = element.offsetTop - gutterTop;
+			if (element && elementRect && groupEl) {
+				// Calculate position relative to the gutter element's top
+				// This accounts for any content above the content-body (headers, etc.)
+				let desiredTop = elementRect.top - gutterRect.top;
 
 				// Get the height of this gutter group
 				const groupHeight = groupEl.offsetHeight;
@@ -397,7 +404,7 @@
 	// Load DOMPurify only in browser
 	onMount(async () => {
 		if (browser) {
-			const module = await import('dompurify');
+			const module = await import('isomorphic-dompurify');
 			DOMPurify = module.default;
 		}
 	});

package/dist/components/custom/GutterItem.svelte

@@ -1,6 +1,6 @@
 <script>
-	import Lightbox from '../gallery/Lightbox.svelte';
-	import ImageGallery from '../gallery/ImageGallery.svelte';
+	import Lightbox from '../../ui/components/gallery/Lightbox.svelte';
+	import ImageGallery from '../../ui/components/gallery/ImageGallery.svelte';
 	import { sanitizeHTML } from '../../utils/sanitize.js';
 
 	let { item = {} } = $props();

package/dist/config/ai-models.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Calculate estimated cost for AI analysis
+ * @param {string} content - The content to analyze
+ * @param {string} model - The model to use ('haiku' or 'sonnet')
+ * @returns {{ inputTokens: number, outputTokens: number, cost: number }}
+ */
+export function calculateCost(content: string, model?: string): {
+    inputTokens: number;
+    outputTokens: number;
+    cost: number;
+};
+/**
+ * Get available AI models
+ * @returns {Array<{ id: string, name: string, description: string }>}
+ */
+export function getAvailableModels(): Array<{
+    id: string;
+    name: string;
+    description: string;
+}>;
+/**
+ * AI Model Configuration
+ * Constants and utilities for AI-powered features like writing assistance
+ */
+export const MAX_CONTENT_LENGTH: 100000;

package/dist/config/ai-models.js

@@ -0,0 +1,50 @@
+/**
+ * AI Model Configuration
+ * Constants and utilities for AI-powered features like writing assistance
+ */
+
+// Maximum content length for AI analysis (in characters)
+// Based on typical API token limits (~100k tokens ≈ 400k chars, with safety margin)
+export const MAX_CONTENT_LENGTH = 100000;
+
+// Model pricing (per 1M tokens) - for cost estimation
+const MODEL_PRICING = {
+  haiku: { input: 0.25, output: 1.25 },
+  sonnet: { input: 3.0, output: 15.0 }
+};
+
+// Average characters per token (rough estimate)
+const CHARS_PER_TOKEN = 4;
+
+/**
+ * Calculate estimated cost for AI analysis
+ * @param {string} content - The content to analyze
+ * @param {string} model - The model to use ('haiku' or 'sonnet')
+ * @returns {{ inputTokens: number, outputTokens: number, cost: number }}
+ */
+export function calculateCost(content, model = 'haiku') {
+  const pricing = MODEL_PRICING[model] || MODEL_PRICING.haiku;
+  const inputTokens = Math.ceil(content.length / CHARS_PER_TOKEN);
+  // Estimate output tokens as ~10% of input for analysis tasks
+  const outputTokens = Math.ceil(inputTokens * 0.1);
+
+  const inputCost = (inputTokens / 1_000_000) * pricing.input;
+  const outputCost = (outputTokens / 1_000_000) * pricing.output;
+
+  return {
+    inputTokens,
+    outputTokens,
+    cost: inputCost + outputCost
+  };
+}
+
+/**
+ * Get available AI models
+ * @returns {Array<{ id: string, name: string, description: string }>}
+ */
+export function getAvailableModels() {
+  return [
+    { id: 'haiku', name: 'Haiku', description: 'Fast and cost-effective' },
+    { id: 'sonnet', name: 'Sonnet', description: 'More thorough analysis' }
+  ];
+}

package/dist/config/index.d.ts

@@ -0,0 +1 @@
+export * from "./ai-models.js";

package/dist/config/index.js

@@ -0,0 +1,4 @@
+// Config barrel export
+// Re-exports all configuration constants and utilities
+
+export * from './ai-models.js';

package/dist/index.d.ts

@@ -6,9 +6,9 @@ export { default as MobileTOC } from './components/custom/MobileTOC.svelte';
 export { default as CollapsibleSection } from './components/custom/CollapsibleSection.svelte';
 export { default as MarkdownEditor } from './components/admin/MarkdownEditor.svelte';
 export { default as GutterManager } from './components/admin/GutterManager.svelte';
-export { default as ImageGallery } from './components/gallery/ImageGallery.svelte';
-export { default as Lightbox } from './components/gallery/Lightbox.svelte';
-export { default as LightboxCaption } from './components/gallery/LightboxCaption.svelte';
-export { default as ZoomableImage } from './components/gallery/ZoomableImage.svelte';
-export * from './components/ui/index';
+export { default as ImageGallery } from './ui/components/gallery/ImageGallery.svelte';
+export { default as Lightbox } from './ui/components/gallery/Lightbox.svelte';
+export { default as LightboxCaption } from './ui/components/gallery/LightboxCaption.svelte';
+export { default as ZoomableImage } from './ui/components/gallery/ZoomableImage.svelte';
+export * from './ui/index';
 export { cn } from './utils/cn';

package/dist/index.js

@@ -9,12 +9,12 @@ export { default as CollapsibleSection } from './components/custom/CollapsibleSe
 // Admin components
 export { default as MarkdownEditor } from './components/admin/MarkdownEditor.svelte';
 export { default as GutterManager } from './components/admin/GutterManager.svelte';
-// Gallery components
-export { default as ImageGallery } from './components/gallery/ImageGallery.svelte';
-export { default as Lightbox } from './components/gallery/Lightbox.svelte';
-export { default as LightboxCaption } from './components/gallery/LightboxCaption.svelte';
-export { default as ZoomableImage } from './components/gallery/ZoomableImage.svelte';
+// Gallery components (from UI module)
+export { default as ImageGallery } from './ui/components/gallery/ImageGallery.svelte';
+export { default as Lightbox } from './ui/components/gallery/Lightbox.svelte';
+export { default as LightboxCaption } from './ui/components/gallery/LightboxCaption.svelte';
+export { default as ZoomableImage } from './ui/components/gallery/ZoomableImage.svelte';
 // UI components - re-export all from the UI index
-export * from './components/ui/index';
+export * from './ui/index';
 // Utilities
 export { cn } from './utils/cn';

package/dist/server/index.d.ts

@@ -0,0 +1 @@
+export * from "./logger.js";

package/dist/server/index.js

@@ -0,0 +1,4 @@
+// Server barrel export
+// Re-exports all server-side utilities
+
+export * from './logger.js';

package/dist/ui/components/charts/ActivityOverview.svelte

@@ -0,0 +1,293 @@
+<script>
+  /**
+   * ActivityOverview - Weekly activity visualization
+   * Shows a GitHub-style contribution chart for recent days
+   *
+   * Data format: { activity_date: string, commit_count: number }[]
+   * (matches GitHub contributions API format)
+   */
+  import Sparkline from './Sparkline.svelte';
+
+  /**
+   * @type {{ activity_date: string, commit_count: number }[]}
+   */
+  let {
+    data = [],
+    locData = { additions: 0, deletions: 0 },  // LOC from separate DB fetch
+    days = 14
+  } = $props();
+
+  // Format date as YYYY-MM-DD in local timezone (not UTC!)
+  // This matches how GitHub attributes contributions to user's timezone
+  function formatDateKey(date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
+
+  // Ensure we have the right number of days, using local timezone
+  const filledData = $derived(() => {
+    const result = [];
+    const today = new Date();
+
+    // Build activity map for quick lookup
+    const activityMap = {};
+    for (const item of data) {
+      activityMap[item.activity_date] = item.commit_count;
+    }
+
+    for (let i = days - 1; i >= 0; i--) {
+      const date = new Date(today);
+      date.setDate(date.getDate() - i);
+      const dateStr = formatDateKey(date);  // Local timezone!
+
+      const commits = activityMap[dateStr] || 0;
+      result.push({
+        date: dateStr,
+        commits,
+        dayOfWeek: date.toLocaleDateString('en-US', { weekday: 'short' }),
+        isToday: i === 0
+      });
+    }
+
+    return result;
+  });
+
+  const commitDataArr = $derived(filledData().map(d => d.commits));
+
+  const totalCommits = $derived(filledData().reduce((sum, d) => sum + d.commits, 0));
+  const activeDays = $derived(filledData().filter(d => d.commits > 0).length);
+  const peakCommits = $derived(Math.max(...filledData().map(d => d.commits), 0));
+
+  // Get intensity level for heatmap (0-4)
+  function getIntensity(commits) {
+    if (commits === 0) return 0;
+    if (commits <= 2) return 1;
+    if (commits <= 5) return 2;
+    if (commits <= 10) return 3;
+    return 4;
+  }
+</script>
+
+<div class="activity-overview">
+  <div class="overview-header">
+    <h3>Recent Activity</h3>
+    <div class="overview-stats">
+      <span class="stat">
+        <strong>{totalCommits}</strong> commits
+      </span>
+      <span class="stat active-days">
+        <strong>{activeDays}</strong> of {days} days active
+      </span>
+    </div>
+  </div>
+
+  <div class="overview-content">
+    <!-- Heatmap -->
+    <div class="heatmap">
+      {#each filledData() as day}
+        <div
+          class="heatmap-cell level-{getIntensity(day.commits)}"
+          class:today={day.isToday}
+          title="{day.date}: {day.commits} commits"
+        >
+          <span class="cell-day">{day.dayOfWeek.charAt(0)}</span>
+        </div>
+      {/each}
+    </div>
+
+    <!-- Sparklines -->
+    <div class="sparklines">
+      <div class="sparkline-row">
+        <span class="sparkline-label">Commits</span>
+        <Sparkline
+          data={commitDataArr}
+          width={140}
+          height={20}
+          strokeColor="#5cb85f"
+          fillColor="rgba(92, 184, 95, 0.15)"
+        />
+        <span class="sparkline-peak" title="Peak commits in a day">↑{peakCommits}</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="overview-footer">
+    <div class="loc-summary">
+      <span class="add">+{locData.additions.toLocaleString()}</span>
+      <span class="del">-{locData.deletions.toLocaleString()}</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .activity-overview {
+    background: white;
+    border-radius: 12px;
+    padding: 1rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    margin-bottom: 1.5rem;
+  }
+  :global(.dark) .activity-overview {
+    background: var(--light-bg-tertiary);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+  .overview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+  }
+  .overview-header h3 {
+    margin: 0;
+    font-size: 0.9rem;
+    color: #2c5f2d;
+    font-weight: 600;
+  }
+  :global(.dark) .overview-header h3 {
+    color: var(--accent-success);
+  }
+  .overview-stats {
+    display: flex;
+    gap: 0.75rem;
+    font-size: 0.8rem;
+    color: #666;
+  }
+  :global(.dark) .overview-stats {
+    color: var(--light-text-muted);
+  }
+  .overview-stats strong {
+    color: var(--light-border-secondary);
+  }
+  :global(.dark) .overview-stats strong {
+    color: var(--light-text-very-light);
+  }
+  .overview-content {
+    display: flex;
+    gap: 1.5rem;
+    align-items: flex-start;
+  }
+  @media (max-width: 500px) {
+    .overview-content {
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+  }
+  /* Heatmap */
+  .heatmap {
+    display: flex;
+    gap: 3px;
+    flex-wrap: wrap;
+    max-width: 200px;
+  }
+  .heatmap-cell {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0;
+    transition: transform 0.15s ease;
+  }
+  .heatmap-cell:hover {
+    transform: scale(1.2);
+  }
+  .heatmap-cell.today {
+    outline: 1px solid var(--accent-success);
+    outline-offset: 1px;
+  }
+  .heatmap-cell.level-0 {
+    background: #ebedf0;
+  }
+  .heatmap-cell.level-1 {
+    background: #9be9a8;
+  }
+  .heatmap-cell.level-2 {
+    background: #40c463;
+  }
+  .heatmap-cell.level-3 {
+    background: #30a14e;
+  }
+  .heatmap-cell.level-4 {
+    background: #216e39;
+  }
+  :global(.dark) .heatmap-cell.level-0 {
+    background: #161b22;
+  }
+  :global(.dark) .heatmap-cell.level-1 {
+    background: #0e4429;
+  }
+  :global(.dark) .heatmap-cell.level-2 {
+    background: #006d32;
+  }
+  :global(.dark) .heatmap-cell.level-3 {
+    background: #26a641;
+  }
+  :global(.dark) .heatmap-cell.level-4 {
+    background: #39d353;
+  }
+  .cell-day {
+    display: none;
+  }
+  /* Sparklines */
+  .sparklines {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .sparkline-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .sparkline-label {
+    font-size: 0.7rem;
+    color: var(--light-text-light);
+    width: 45px;
+    text-align: right;
+  }
+  :global(.dark) .sparkline-label {
+    color: #777;
+  }
+  .sparkline-peak {
+    font-size: 0.65rem;
+    color: var(--light-text-muted);
+    margin-left: 0.35rem;
+    font-variant-numeric: tabular-nums;
+  }
+  :global(.dark) .sparkline-peak {
+    color: #666;
+  }
+  /* Footer */
+  .overview-footer {
+    margin-top: 0.75rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--light-text-very-light);
+    display: flex;
+    justify-content: flex-end;
+  }
+  :global(.dark) .overview-footer {
+    border-top-color: var(--light-border-secondary);
+  }
+  .loc-summary {
+    display: flex;
+    gap: 0.75rem;
+    font-size: 0.8rem;
+    font-weight: 500;
+  }
+  .loc-summary .add {
+    color: var(--accent-success);
+  }
+  .loc-summary .del {
+    color: var(--accent-danger);
+  }
+  :global(.dark) .loc-summary .add {
+    color: var(--accent-success);
+  }
+  :global(.dark) .loc-summary .del {
+    color: #e57373;
+  }
+</style>

package/dist/ui/components/charts/ActivityOverview.svelte.d.ts

@@ -0,0 +1,12 @@
+export default ActivityOverview;
+type ActivityOverview = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: ({
+        activity_date: string;
+        commit_count: number;
+    } | undefined)[]): void;
+};
+declare const ActivityOverview: import("svelte").Component<{
+    activity_date: string;
+    commit_count: number;
+}[], {}, "">;