@autumnsgrove/groveengine 0.3.2 → 0.4.0

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

@@ -0,0 +1,129 @@
+<script>
+  /**
+   * LOCBar - Lines of Code visualization
+   * Shows additions and deletions as a horizontal stacked bar
+   */
+
+  let {
+    additions = 0,
+    deletions = 0,
+    maxWidth = 100,
+    height = 8,
+    showLabels = false,
+    compact = false
+  } = $props();
+
+  const total = $derived(additions + deletions || 1);
+  const addPercent = $derived((additions / total) * 100);
+  const delPercent = $derived((deletions / total) * 100);
+
+  // Scale based on a reasonable max (e.g., 1000 lines)
+  const maxLines = 2000;
+  const scaledTotal = $derived(Math.min(total / maxLines, 1) * 100);
+</script>
+
+{#if compact}
+  <div class="loc-bar-compact" style="width: {maxWidth}px;">
+    <div class="bar-track">
+      <div
+        class="bar-add"
+        style="width: {(additions / maxLines) * 100}%;"
+        title="+{additions.toLocaleString()} additions"
+      ></div>
+      <div
+        class="bar-del"
+        style="width: {(deletions / maxLines) * 100}%;"
+        title="-{deletions.toLocaleString()} deletions"
+      ></div>
+    </div>
+  </div>
+{:else}
+  <div class="loc-bar" style="width: {maxWidth}px;">
+    {#if showLabels}
+      <div class="loc-labels">
+        <span class="label-add">+{additions.toLocaleString()}</span>
+        <span class="label-del">-{deletions.toLocaleString()}</span>
+      </div>
+    {/if}
+    <div class="bar-container" style="height: {height}px;">
+      <div
+        class="bar-segment bar-add"
+        style="width: {addPercent}%;"
+        title="+{additions.toLocaleString()} additions"
+      ></div>
+      <div
+        class="bar-segment bar-del"
+        style="width: {delPercent}%;"
+        title="-{deletions.toLocaleString()} deletions"
+      ></div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .loc-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .loc-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.7rem;
+    font-weight: 500;
+  }
+  .label-add {
+    color: var(--accent-success);
+  }
+  .label-del {
+    color: var(--accent-danger);
+  }
+  :global(.dark) .label-add {
+    color: var(--accent-success);
+  }
+  :global(.dark) .label-del {
+    color: #e57373;
+  }
+  .bar-container {
+    display: flex;
+    background: #e9ecef;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  :global(.dark) .bar-container {
+    background: var(--light-border-secondary);
+  }
+  .bar-segment {
+    height: 100%;
+    transition: width 0.3s ease;
+  }
+  .bar-add {
+    background: linear-gradient(90deg, var(--accent-success) 0%, #34d058 100%);
+  }
+  .bar-del {
+    background: linear-gradient(90deg, var(--accent-danger) 0%, #e57373 100%);
+  }
+  /* Compact style */
+  .loc-bar-compact {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .loc-bar-compact .bar-track {
+    flex: 1;
+    height: 4px;
+    background: #e9ecef;
+    border-radius: 2px;
+    display: flex;
+    overflow: hidden;
+  }
+  :global(.dark) .loc-bar-compact .bar-track {
+    background: var(--light-border-secondary);
+  }
+  .loc-bar-compact .bar-add,
+  .loc-bar-compact .bar-del {
+    height: 100%;
+    max-width: 50%;
+    transition: width 0.3s ease;
+  }
+</style>

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

@@ -0,0 +1,21 @@
+export default LOCBar;
+type LOCBar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const LOCBar: import("svelte").Component<{
+    additions?: number;
+    deletions?: number;
+    maxWidth?: number;
+    height?: number;
+    showLabels?: boolean;
+    compact?: boolean;
+}, {}, "">;
+type $$ComponentProps = {
+    additions?: number;
+    deletions?: number;
+    maxWidth?: number;
+    height?: number;
+    showLabels?: boolean;
+    compact?: boolean;
+};

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

@@ -0,0 +1,136 @@
+<script>
+  /**
+   * RepoBreakdown - Shows which repositories had activity
+   * A simple horizontal stacked bar or pill visualization
+   */
+
+  /**
+   * @type {{ name: string, commits?: number, additions?: number, deletions?: number }[]}
+   */
+  let {
+    repos = [],
+    mode = 'commits', // 'commits' or 'loc'
+    maxWidth = 150,
+    showLegend = true
+  } = $props();
+
+  // Color palette for repos
+  const colors = [
+    '#5cb85f', // green
+    '#5bc0de', // cyan
+    '#f0ad4e', // orange
+    '#d9534f', // red
+    '#9b59b6', // purple
+    '#3498db', // blue
+    '#1abc9c', // teal
+    '#e67e22', // dark orange
+  ];
+
+  function getTotal() {
+    if (mode === 'commits') {
+      return repos.reduce((sum, r) => sum + (r.commits || 1), 0) || 1;
+    }
+    return repos.reduce((sum, r) => sum + (r.additions || 0) + (r.deletions || 0), 0) || 1;
+  }
+
+  function getValue(repo) {
+    if (mode === 'commits') {
+      return repo.commits || 1;
+    }
+    return (repo.additions || 0) + (repo.deletions || 0);
+  }
+
+  const total = $derived(getTotal());
+  const segments = $derived(
+    repos.map((repo, i) => ({
+      name: repo.name,
+      value: getValue(repo),
+      percent: (getValue(repo) / total) * 100,
+      color: colors[i % colors.length]
+    }))
+  );
+</script>
+
+{#if repos.length > 0}
+  <div class="repo-breakdown" style="max-width: {maxWidth}px;">
+    <div class="breakdown-bar">
+      {#each segments as segment, i}
+        <div
+          class="breakdown-segment"
+          style="width: {segment.percent}%; background-color: {segment.color};"
+          title="{segment.name}: {segment.value} {mode === 'commits' ? 'commits' : 'lines'}"
+        ></div>
+      {/each}
+    </div>
+
+    {#if showLegend && repos.length <= 4}
+      <div class="breakdown-legend">
+        {#each segments as segment}
+          <div class="legend-item">
+            <span class="legend-dot" style="background-color: {segment.color};"></span>
+            <span class="legend-name">{segment.name}</span>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .repo-breakdown {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+  .breakdown-bar {
+    display: flex;
+    height: 6px;
+    background: #e9ecef;
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  :global(.dark) .breakdown-bar {
+    background: var(--light-border-secondary);
+  }
+  .breakdown-segment {
+    height: 100%;
+    min-width: 2px;
+    transition: width 0.3s ease;
+  }
+  .breakdown-segment:first-child {
+    border-radius: 3px 0 0 3px;
+  }
+  .breakdown-segment:last-child {
+    border-radius: 0 3px 3px 0;
+  }
+  .breakdown-segment:only-child {
+    border-radius: 3px;
+  }
+  .breakdown-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.65rem;
+    color: #666;
+  }
+  :global(.dark) .legend-item {
+    color: var(--light-text-muted);
+  }
+  .legend-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .legend-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 60px;
+  }
+</style>

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

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

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

@@ -0,0 +1,139 @@
+<script>
+  /**
+   * Sparkline - A simple SVG sparkline chart
+   * Shows activity trend over time (commits, LOC, etc.)
+   */
+
+  /** @type {number[]} */
+  let {
+    data = [],
+    width = 120,
+    height = 24,
+    strokeColor = '#5cb85f',
+    fillColor = 'rgba(92, 184, 95, 0.1)',
+    strokeWidth = 1.5,
+    showDots = false,
+    showArea = true
+  } = $props();
+
+  // Calculate the path for the sparkline
+  function getPath() {
+    if (!data || data.length < 2) return '';
+
+    const max = Math.max(...data, 1); // Ensure at least 1 to avoid division by zero
+    const min = Math.min(...data, 0);
+    const range = max - min || 1;
+
+    const points = data.map((value, i) => {
+      const x = (i / (data.length - 1)) * width;
+      const y = height - ((value - min) / range) * (height - 4) - 2; // 2px padding
+      return { x, y };
+    });
+
+    // Create line path
+    const linePath = points.map((p, i) =>
+      `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`
+    ).join(' ');
+
+    return linePath;
+  }
+
+  function getAreaPath() {
+    if (!data || data.length < 2) return '';
+
+    const max = Math.max(...data, 1);
+    const min = Math.min(...data, 0);
+    const range = max - min || 1;
+
+    const points = data.map((value, i) => {
+      const x = (i / (data.length - 1)) * width;
+      const y = height - ((value - min) / range) * (height - 4) - 2;
+      return { x, y };
+    });
+
+    // Create closed area path
+    const linePath = points.map((p, i) =>
+      `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`
+    ).join(' ');
+
+    return `${linePath} L ${width} ${height} L 0 ${height} Z`;
+  }
+
+  function getDots() {
+    if (!data || data.length < 2) return [];
+
+    const max = Math.max(...data, 1);
+    const min = Math.min(...data, 0);
+    const range = max - min || 1;
+
+    return data.map((value, i) => ({
+      x: (i / (data.length - 1)) * width,
+      y: height - ((value - min) / range) * (height - 4) - 2,
+      value
+    }));
+  }
+
+  const linePath = $derived(getPath());
+  const areaPath = $derived(getAreaPath());
+  const dots = $derived(getDots());
+</script>
+
+<svg
+  class="sparkline"
+  viewBox="0 0 {width} {height}"
+  width={width}
+  height={height}
+  role="img"
+  aria-label="Sparkline chart"
+>
+  {#if showArea && areaPath}
+    <path
+      d={areaPath}
+      fill={fillColor}
+      class="sparkline-area"
+    />
+  {/if}
+
+  {#if linePath}
+    <path
+      d={linePath}
+      fill="none"
+      stroke={strokeColor}
+      stroke-width={strokeWidth}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="sparkline-line"
+    />
+  {/if}
+
+  {#if showDots && dots.length > 0}
+    {#each dots as dot}
+      <circle
+        cx={dot.x}
+        cy={dot.y}
+        r={2}
+        fill={strokeColor}
+        class="sparkline-dot"
+      />
+    {/each}
+  {/if}
+</svg>
+
+<style>
+  .sparkline {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .sparkline-line {
+    transition: stroke 0.2s ease;
+  }
+
+  .sparkline-area {
+    transition: fill 0.2s ease;
+  }
+
+  .sparkline-dot {
+    transition: fill 0.2s ease;
+  }
+</style>

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

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

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

@@ -0,0 +1,5 @@
+export { default as ActivityOverview } from './ActivityOverview.svelte';
+export { default as LOCBar } from './LOCBar.svelte';
+export { default as RepoBreakdown } from './RepoBreakdown.svelte';
+export { default as Sparkline } from './Sparkline.svelte';
+export declare const CHARTS_VERSION = "0.2.0";

package/dist/ui/components/charts/index.js

@@ -0,0 +1,11 @@
+// GroveUI - Chart Components
+//
+// This module exports data visualization and chart components
+//
+// Usage:
+//   import { ActivityOverview, LOCBar, RepoBreakdown, Sparkline } from '@groveengine/ui/charts';
+export { default as ActivityOverview } from './ActivityOverview.svelte';
+export { default as LOCBar } from './LOCBar.svelte';
+export { default as RepoBreakdown } from './RepoBreakdown.svelte';
+export { default as Sparkline } from './Sparkline.svelte';
+export const CHARTS_VERSION = '0.2.0';

package/dist/ui/components/content/PlanCard.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import Icons from '../icons/Icons.svelte';
+
+	interface Props {
+		name: string;
+		price: number;
+		searches: number;
+		features: string[];
+		popular?: boolean;
+		current?: boolean;
+		priceId?: string;
+		onselect?: (priceId: string) => void;
+	}
+
+	let {
+		name,
+		price,
+		searches,
+		features,
+		popular = false,
+		current = false,
+		priceId = '',
+		onselect
+	}: Props = $props();
+
+	const pricePerSearch = $derived((price / searches).toFixed(2));
+
+	function handleSelect() {
+		if (onselect && priceId) {
+			onselect(priceId);
+		}
+	}
+</script>
+
+<div
+	class="scout-card relative flex flex-col h-full {popular ? 'ring-2 ring-grove-500 shadow-grove-lg' : ''}"
+>
+	<!-- Popular badge -->
+	{#if popular}
+		<div class="absolute -top-3 left-1/2 -translate-x-1/2">
+			<span class="bg-grove-500 text-white text-xs font-bold px-3 py-1 rounded-full">
+				MOST POPULAR
+			</span>
+		</div>
+	{/if}
+
+	<div class="p-6 flex-1 flex flex-col">
+		<!-- Header -->
+		<div class="text-center mb-6">
+			<h3 class="text-xl font-bold text-bark dark:text-cream mb-2">{name}</h3>
+			<div class="flex items-baseline justify-center gap-1">
+				<span class="text-4xl font-bold text-bark dark:text-cream">${price}</span>
+				<span class="text-bark-400 dark:text-cream-500">/month</span>
+			</div>
+			<p class="text-sm text-bark-400 dark:text-cream-500 mt-2">
+				{searches} searches • ${pricePerSearch}/search
+			</p>
+		</div>
+
+		<!-- Features -->
+		<ul class="space-y-3 mb-6 flex-1">
+			{#each features as feature}
+				<li class="flex items-start gap-2 text-sm text-bark-600 dark:text-cream-400">
+					<Icons name="check" size="sm" class="text-grove-500 mt-0.5 flex-shrink-0" />
+					<span>{feature}</span>
+				</li>
+			{/each}
+		</ul>
+
+		<!-- CTA -->
+		{#if current}
+			<button
+				disabled
+				class="scout-btn-secondary w-full opacity-75 cursor-not-allowed"
+			>
+				Current Plan
+			</button>
+		{:else}
+			<button
+				onclick={handleSelect}
+				class="{popular ? 'scout-btn-primary' : 'scout-btn-secondary'} w-full"
+			>
+				{#if popular}
+					Get Started
+				{:else}
+					Choose {name}
+				{/if}
+			</button>
+		{/if}
+	</div>
+</div>

package/dist/ui/components/content/PlanCard.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    name: string;
+    price: number;
+    searches: number;
+    features: string[];
+    popular?: boolean;
+    current?: boolean;
+    priceId?: string;
+    onselect?: (priceId: string) => void;
+}
+declare const PlanCard: import("svelte").Component<Props, {}, "">;
+type PlanCard = ReturnType<typeof PlanCard>;
+export default PlanCard;

package/dist/ui/components/content/ProductCard.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import Icons from '../icons/Icons.svelte';
+	import ScoreBar from '../indicators/ScoreBar.svelte';
+
+	interface Props {
+		name: string;
+		price: number;
+		originalPrice?: number;
+		retailer: string;
+		url: string;
+		imageUrl?: string;
+		matchScore?: number;
+		matchReason?: string;
+		index?: number;
+	}
+
+	let {
+		name,
+		price,
+		originalPrice,
+		retailer,
+		url,
+		imageUrl,
+		matchScore = 0,
+		matchReason,
+		index = 0
+	}: Props = $props();
+
+	const discount = $derived(
+		originalPrice && originalPrice > price
+			? Math.round(((originalPrice - price) / originalPrice) * 100)
+			: 0
+	);
+
+	const formatPrice = (cents: number) => {
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(cents / 100);
+	};
+
+	// Stagger animation delay based on index
+	const animationDelay = $derived(`${index * 100}ms`);
+</script>
+
+<article
+	class="scout-product-card animate-deal-pop"
+	style="animation-delay: {animationDelay}"
+>
+	<!-- Image Section -->
+	<div class="scout-product-image relative">
+		{#if imageUrl}
+			<img src={imageUrl} alt={name} class="w-full h-full object-cover" loading="lazy" />
+		{:else}
+			<div class="flex flex-col items-center justify-center text-bark-300 dark:text-bark-600">
+				<Icons name="shopping-bag" size="xl" />
+				<span class="text-xs mt-2">No image</span>
+			</div>
+		{/if}
+
+		<!-- Discount Badge -->
+		{#if discount > 0}
+			<div class="absolute top-3 left-3 scout-badge-deal text-sm font-bold px-2.5 py-1">
+				{discount}% OFF
+			</div>
+		{/if}
+
+		<!-- Retailer Badge -->
+		<div class="absolute bottom-3 right-3 bg-white/90 dark:bg-bark-800/90 backdrop-blur-sm px-2 py-1 rounded text-xs font-medium text-bark dark:text-cream">
+			{retailer}
+		</div>
+	</div>
+
+	<!-- Content Section -->
+	<div class="scout-product-body">
+		<h3 class="font-medium text-bark dark:text-cream mb-2 line-clamp-2 leading-snug">
+			{name}
+		</h3>
+
+		<!-- Price -->
+		<div class="flex items-baseline gap-2 mb-3">
+			<span class="scout-price">{formatPrice(price)}</span>
+			{#if originalPrice && originalPrice > price}
+				<span class="scout-price-original">{formatPrice(originalPrice)}</span>
+			{/if}
+		</div>
+
+		<!-- Match Score -->
+		{#if matchScore > 0}
+			<div class="mb-3">
+				<ScoreBar score={matchScore} size="sm" />
+			</div>
+		{/if}
+
+		<!-- Match Reason -->
+		{#if matchReason}
+			<p class="text-sm text-bark-500 dark:text-cream-500 mb-4 line-clamp-2">
+				{matchReason}
+			</p>
+		{/if}
+
+		<!-- Action Button -->
+		<div class="mt-auto">
+			<a
+				href={url}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="scout-btn-primary w-full text-sm"
+			>
+				View Deal
+				<Icons name="external" size="sm" />
+			</a>
+		</div>
+	</div>
+</article>
+
+<style>
+	.line-clamp-2 {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+</style>