@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/interactive/DrawingCanvas.svelte

@@ -0,0 +1,279 @@
+<!--
+  @file widgets/interactive/DrawingCanvas.svelte
+  @description Pure Canvas 2D drawing pad: brush / eraser / color / size /
+    undo / redo / clear / export, with mouse + touch input. Ported from the
+    ocean-flow genesis composite widget into Ripple conventions — the genesis
+    `IconWidget` is replaced with direct `@lucide/svelte` named imports (the
+    established pattern in Button.svelte / Stat.svelte), and Tailwind shadcn
+    semantic tokens are used throughout.
+  @created 2026-05-31 — composite consumer widgets migration. Canvas state is
+    purely local; the widget surfaces an `onsave` callback (a spec's
+    `on_save`) returning a PNG data URL rather than a two-way bind (raster
+    bytes don't belong in spec state).
+-->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import { onMount } from 'svelte';
+  import { cn } from '../../utils.js';
+  import { Pencil, Eraser, Undo, Redo, Trash2, Download } from '@lucide/svelte';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    /** Data URL of an image to pre-load onto the canvas. */
+    initialImage?: string;
+    /** Fires with a PNG data URL when the user exports. */
+    onsave?: (dataUrl: string) => void;
+  }
+
+  let {
+    id,
+    class: className,
+    width = 400,
+    height = 300,
+    backgroundColor = '#ffffff',
+    initialImage,
+    onsave
+  }: Props = $props();
+
+  let canvas: HTMLCanvasElement;
+  let ctx: CanvasRenderingContext2D | null = null;
+  let isDrawing = $state(false);
+  let lastX = 0;
+  let lastY = 0;
+
+  let currentTool = $state<'brush' | 'eraser'>('brush');
+  let brushSize = $state(4);
+  let brushColor = $state('#000000');
+  // `$state` so the undo/redo disabled flags react to history.length changes.
+  let history = $state<ImageData[]>([]);
+  let historyIndex = $state(-1);
+
+  const colors = ['#000000', '#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899'];
+
+  function getCanvasCoords(e: MouseEvent | TouchEvent): { x: number; y: number } {
+    const rect = canvas.getBoundingClientRect();
+    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+    return {
+      x: (clientX - rect.left) * (canvas.width / rect.width),
+      y: (clientY - rect.top) * (canvas.height / rect.height)
+    };
+  }
+
+  function startDrawing(e: MouseEvent | TouchEvent) {
+    isDrawing = true;
+    const coords = getCanvasCoords(e);
+    lastX = coords.x;
+    lastY = coords.y;
+  }
+
+  function draw(e: MouseEvent | TouchEvent) {
+    if (!isDrawing || !ctx) return;
+    e.preventDefault();
+
+    const coords = getCanvasCoords(e);
+
+    ctx.beginPath();
+    ctx.moveTo(lastX, lastY);
+    ctx.lineTo(coords.x, coords.y);
+    ctx.strokeStyle = currentTool === 'eraser' ? backgroundColor : brushColor;
+    ctx.lineWidth = currentTool === 'eraser' ? brushSize * 3 : brushSize;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.stroke();
+
+    lastX = coords.x;
+    lastY = coords.y;
+  }
+
+  function stopDrawing() {
+    if (isDrawing && ctx) {
+      isDrawing = false;
+      saveToHistory();
+    }
+  }
+
+  function saveToHistory() {
+    if (!ctx) return;
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    history = history.slice(0, historyIndex + 1);
+    history.push(imageData);
+    historyIndex = history.length - 1;
+  }
+
+  function undo() {
+    if (historyIndex > 0 && ctx) {
+      historyIndex--;
+      ctx.putImageData(history[historyIndex], 0, 0);
+    }
+  }
+
+  function redo() {
+    if (historyIndex < history.length - 1 && ctx) {
+      historyIndex++;
+      ctx.putImageData(history[historyIndex], 0, 0);
+    }
+  }
+
+  function clear() {
+    if (!ctx) return;
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    saveToHistory();
+  }
+
+  function downloadImage() {
+    const dataUrl = canvas.toDataURL('image/png');
+    onsave?.(dataUrl);
+    const link = document.createElement('a');
+    link.download = 'drawing.png';
+    link.href = dataUrl;
+    link.click();
+  }
+
+  onMount(() => {
+    ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    if (initialImage) {
+      const img = new Image();
+      img.onload = () => {
+        ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
+        saveToHistory();
+      };
+      img.src = initialImage;
+    } else {
+      saveToHistory();
+    }
+  });
+</script>
+
+<div {id} class={cn('drawing-canvas bg-card rounded-2xl border overflow-hidden', className)}>
+  <!-- Toolbar -->
+  <div class="flex items-center gap-2 p-3 border-b bg-muted/30">
+    <!-- Tools -->
+    <div class="flex items-center gap-1 border-r pr-2">
+      <button
+        onclick={() => (currentTool = 'brush')}
+        class={cn(
+          'p-2 rounded-lg transition-colors',
+          currentTool === 'brush' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+        )}
+        title="Brush"
+        aria-label="Brush"
+      >
+        <Pencil size={18} />
+      </button>
+      <button
+        onclick={() => (currentTool = 'eraser')}
+        class={cn(
+          'p-2 rounded-lg transition-colors',
+          currentTool === 'eraser' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+        )}
+        title="Eraser"
+        aria-label="Eraser"
+      >
+        <Eraser size={18} />
+      </button>
+    </div>
+
+    <!-- Colors -->
+    <div class="flex items-center gap-1 border-r pr-2">
+      {#each colors as color}
+        <button
+          onclick={() => {
+            brushColor = color;
+            currentTool = 'brush';
+          }}
+          class={cn(
+            'w-6 h-6 rounded-full border-2 transition-transform hover:scale-110',
+            brushColor === color && currentTool === 'brush'
+              ? 'border-primary ring-2 ring-primary/20'
+              : 'border-transparent'
+          )}
+          style={safeStyle(`background-color: ${color}`)}
+          title={color}
+          aria-label="Color {color}"
+        ></button>
+      {/each}
+    </div>
+
+    <!-- Brush size -->
+    <div class="flex items-center gap-2 border-r pr-2">
+      <input
+        type="range"
+        min="1"
+        max="20"
+        bind:value={brushSize}
+        aria-label="Brush size"
+        class="w-16 h-1 bg-muted rounded-full appearance-none cursor-pointer
+          [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
+          [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary"
+      />
+      <span class="text-xs text-muted-foreground w-4">{brushSize}</span>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex items-center gap-1 ml-auto">
+      <button
+        onclick={undo}
+        disabled={historyIndex <= 0}
+        class="p-2 rounded-lg hover:bg-muted transition-colors disabled:opacity-30"
+        title="Undo"
+        aria-label="Undo"
+      >
+        <Undo size={18} />
+      </button>
+      <button
+        onclick={redo}
+        disabled={historyIndex >= history.length - 1}
+        class="p-2 rounded-lg hover:bg-muted transition-colors disabled:opacity-30"
+        title="Redo"
+        aria-label="Redo"
+      >
+        <Redo size={18} />
+      </button>
+      <button
+        onclick={clear}
+        class="p-2 rounded-lg hover:bg-muted transition-colors"
+        title="Clear"
+        aria-label="Clear"
+      >
+        <Trash2 size={18} />
+      </button>
+      <button
+        onclick={downloadImage}
+        class="p-2 rounded-lg hover:bg-muted transition-colors"
+        title="Download"
+        aria-label="Download"
+      >
+        <Download size={18} />
+      </button>
+    </div>
+  </div>
+
+  <!-- Canvas -->
+  <div class="p-4">
+    <canvas
+      bind:this={canvas}
+      {width}
+      {height}
+      class="w-full rounded-lg border cursor-crosshair touch-none"
+      style={safeStyle(`aspect-ratio: ${width}/${height}; background: ${backgroundColor}`)}
+      onmousedown={startDrawing}
+      onmousemove={draw}
+      onmouseup={stopDrawing}
+      onmouseleave={stopDrawing}
+      ontouchstart={startDrawing}
+      ontouchmove={draw}
+      ontouchend={stopDrawing}
+    ></canvas>
+  </div>
+</div>

package/dist/widgets/interactive/DrawingCanvas.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    id?: string;
+    class?: string;
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    /** Data URL of an image to pre-load onto the canvas. */
+    initialImage?: string;
+    /** Fires with a PNG data URL when the user exports. */
+    onsave?: (dataUrl: string) => void;
+}
+declare const DrawingCanvas: import("svelte").Component<Props, {}, "">;
+type DrawingCanvas = ReturnType<typeof DrawingCanvas>;
+export default DrawingCanvas;

package/dist/widgets/interactive/Flashcard.svelte

@@ -0,0 +1,140 @@
+<!--
+  @file widgets/interactive/Flashcard.svelte
+  @description Study flashcard with a CSS 3D flip between a question (front) and
+    answer (back), plus "Got it" / "Needs review" actions. Ported from the
+    ocean-flow genesis composite widget into Ripple conventions: shadcn `Card`
+    + `Button` and lucide named icons replace the genesis `IconWidget`.
+  @created 2026-05-31 — composite consumer widgets migration. Flip state is
+    local; `onflip` / `oncorrect` / `onincorrect` callbacks let a host drive a
+    deck; they are lowercase because NodeRenderer passes `on_correct` as
+    `oncorrect`. The 3D-flip transform lives in a scoped <style> block (unchanged).
+-->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import { HelpCircle, Lightbulb, Check, X } from '@lucide/svelte';
+  import { Button } from '../../components/ui/button/index.js';
+  import * as Card from '../../components/ui/card/index.js';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    /** Question / front text. */
+    front: string;
+    /** Answer / back text. */
+    back: string;
+    /** Optional category or topic label. */
+    category?: string;
+    /** Position label, e.g. "3 of 10". */
+    index?: string;
+    /** Fires with the new flip state when the card is flipped. */
+    onflip?: (isFlipped: boolean) => void;
+    /** Fires when the user marks the card correct. */
+    oncorrect?: () => void;
+    /** Fires when the user marks the card for review. */
+    onincorrect?: () => void;
+  }
+
+  let {
+    id,
+    class: className,
+    front,
+    back,
+    category,
+    index,
+    onflip,
+    oncorrect,
+    onincorrect
+  }: Props = $props();
+
+  let isFlipped = $state(false);
+
+  function flip() {
+    isFlipped = !isFlipped;
+    onflip?.(isFlipped);
+  }
+
+  function handleCorrect() {
+    oncorrect?.();
+    isFlipped = false;
+  }
+
+  function handleIncorrect() {
+    onincorrect?.();
+    isFlipped = false;
+  }
+</script>
+
+<div {id} class={cn('flashcard-container w-full max-w-md mx-auto', className)}>
+  <!-- Header -->
+  {#if category || index}
+    <div class="flex items-center justify-between mb-3 px-1">
+      {#if category}
+        <span class="text-xs text-muted-foreground font-medium uppercase tracking-wide">{category}</span>
+      {/if}
+      {#if index}
+        <span class="text-xs text-muted-foreground">{index}</span>
+      {/if}
+    </div>
+  {/if}
+
+  <!-- Flipping card -->
+  <button
+    onclick={flip}
+    class={cn('flashcard relative w-full min-h-[220px] cursor-pointer', isFlipped && 'is-flipped')}
+    aria-label={isFlipped
+      ? 'Showing answer, click to see question'
+      : 'Showing question, click to reveal answer'}
+  >
+    <!-- Front (question) -->
+    <Card.Root class="flashcard-face absolute inset-0">
+      <Card.Content class="flex flex-col items-center justify-center h-full p-6 text-center min-h-[200px]">
+        <HelpCircle size={28} class="text-muted-foreground mb-4 opacity-50" />
+        <p class="text-xl font-medium leading-relaxed max-w-[280px]">{front}</p>
+        <p class="text-xs text-muted-foreground mt-6">Tap to reveal answer</p>
+      </Card.Content>
+    </Card.Root>
+
+    <!-- Back (answer) -->
+    <Card.Root class="flashcard-face flashcard-back absolute inset-0 bg-primary/5 border-primary/20">
+      <Card.Content class="flex flex-col items-center justify-center h-full p-6 text-center min-h-[200px]">
+        <Lightbulb size={24} class="text-primary mb-3" />
+        <p class="text-lg font-medium leading-relaxed text-foreground">{back}</p>
+      </Card.Content>
+    </Card.Root>
+  </button>
+
+  <!-- Actions (shown when flipped) -->
+  {#if isFlipped}
+    <div class="flex items-center justify-center gap-4 mt-4">
+      <Button onclick={handleIncorrect} variant="outline" class="text-red-600 border-red-200 hover:bg-red-50">
+        <X size={16} class="mr-2" />
+        Needs Review
+      </Button>
+      <Button onclick={handleCorrect} variant="outline" class="text-green-600 border-green-200 hover:bg-green-50">
+        <Check size={16} class="mr-2" />
+        Got It
+      </Button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .flashcard {
+    transform-style: preserve-3d;
+    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    perspective: 1000px;
+  }
+
+  .flashcard.is-flipped {
+    transform: rotateY(180deg);
+  }
+
+  .flashcard :global(.flashcard-face) {
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+  }
+
+  .flashcard :global(.flashcard-back) {
+    transform: rotateY(180deg);
+  }
+</style>

package/dist/widgets/interactive/Flashcard.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    id?: string;
+    class?: string;
+    /** Question / front text. */
+    front: string;
+    /** Answer / back text. */
+    back: string;
+    /** Optional category or topic label. */
+    category?: string;
+    /** Position label, e.g. "3 of 10". */
+    index?: string;
+    /** Fires with the new flip state when the card is flipped. */
+    onflip?: (isFlipped: boolean) => void;
+    /** Fires when the user marks the card correct. */
+    oncorrect?: () => void;
+    /** Fires when the user marks the card for review. */
+    onincorrect?: () => void;
+}
+declare const Flashcard: import("svelte").Component<Props, {}, "">;
+type Flashcard = ReturnType<typeof Flashcard>;
+export default Flashcard;

package/dist/widgets/interactive/Timer.svelte

@@ -0,0 +1,157 @@
+<!--
+  @file widgets/interactive/Timer.svelte
+  @description Pomodoro-style focus timer with start / pause / reset and
+    duration presets. Ported from the ocean-flow genesis composite widget into
+    Ripple conventions: shadcn `Button` + `Progress`, lucide named icons. The
+    genesis shadcn `ToggleGroup` (absent from this repo's shadcn set) is
+    replaced with inline preset pills styled with Tailwind semantic tokens.
+  @created 2026-05-31 — composite consumer widgets migration. Timer state is
+    local (counts down on an interval); `oncomplete` fires when it reaches zero (the
+    lowercase name NodeRenderer passes for a spec's `on_complete`).
+-->
+<script lang="ts">
+  import { onDestroy, untrack } from 'svelte';
+  import { cn } from '../../utils.js';
+  import { Play, Pause, RotateCcw } from '@lucide/svelte';
+  import { Button } from '../../components/ui/button/index.js';
+  import { Progress } from '../../components/ui/progress/index.js';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    /** Timer duration in minutes. */
+    duration?: number;
+    /** Label shown above the countdown. */
+    label?: string;
+    /** Preset durations in minutes shown as quick-pick pills. */
+    presets?: number[];
+    /** Fires when the countdown reaches zero. */
+    oncomplete?: () => void;
+  }
+
+  let {
+    id,
+    class: className,
+    duration = 25,
+    label = 'Focus Timer',
+    presets = [5, 15, 25, 45],
+    oncomplete
+  }: Props = $props();
+
+  // Local source of truth — seeded once from the `duration` prop, then mutated
+  // by the preset pills without reassigning the prop (which would warn).
+  let activeDuration = $state(untrack(() => duration));
+  let timeRemaining = $state(untrack(() => duration * 60));
+  let isRunning = $state(false);
+  let intervalId: ReturnType<typeof setInterval> | null = null;
+
+  const minutes = $derived(Math.floor(timeRemaining / 60));
+  const seconds = $derived(timeRemaining % 60);
+  const progress = $derived(
+    ((activeDuration * 60 - timeRemaining) / (activeDuration * 60)) * 100
+  );
+  const displayTime = $derived(
+    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+  );
+
+  function start() {
+    if (isRunning) return;
+    isRunning = true;
+    intervalId = setInterval(() => {
+      if (timeRemaining > 0) {
+        timeRemaining--;
+      } else {
+        pause();
+        oncomplete?.();
+      }
+    }, 1000);
+  }
+
+  function pause() {
+    isRunning = false;
+    if (intervalId) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+  }
+
+  function reset() {
+    pause();
+    timeRemaining = activeDuration * 60;
+  }
+
+  function setDuration(mins: number) {
+    pause();
+    activeDuration = mins;
+    timeRemaining = mins * 60;
+  }
+
+  onDestroy(() => {
+    if (intervalId) clearInterval(intervalId);
+  });
+</script>
+
+<div {id} class={cn('timer-widget flex flex-col items-center p-6 bg-card rounded-xl border', className)}>
+  {#if label}
+    <p class="text-sm text-muted-foreground font-medium mb-4">{label}</p>
+  {/if}
+
+  <!-- Time display -->
+  <div class="text-5xl font-bold tabular-nums tracking-tight mb-2">
+    {displayTime}
+  </div>
+
+  <p class="text-xs text-muted-foreground mb-4">
+    {#if isRunning}
+      <span class="inline-block w-2 h-2 rounded-full bg-green-500 animate-pulse mr-1"></span>
+      Running
+    {:else if timeRemaining === 0}
+      <span class="text-green-600 font-medium">Complete</span>
+    {:else}
+      Paused
+    {/if}
+  </p>
+
+  <!-- Progress bar -->
+  <div class="w-full max-w-[200px] mb-6">
+    <Progress value={progress} class="h-2" />
+  </div>
+
+  <!-- Controls -->
+  <div class="flex items-center gap-3 mb-4">
+    {#if isRunning}
+      <Button onclick={pause} variant="outline" size="lg">
+        <Pause size={20} class="mr-2" />
+        Pause
+      </Button>
+    {:else}
+      <Button onclick={start} size="lg">
+        <Play size={20} class="mr-2" />
+        Start
+      </Button>
+    {/if}
+
+    <Button onclick={reset} variant="ghost" size="icon" aria-label="Reset">
+      <RotateCcw size={18} />
+    </Button>
+  </div>
+
+  <!-- Presets -->
+  {#if presets.length > 0}
+    <div class="flex items-center gap-1">
+      {#each presets as mins}
+        <button
+          onclick={() => setDuration(mins)}
+          class={cn(
+            'px-3 py-1.5 text-xs rounded-full transition-colors',
+            activeDuration === mins
+              ? 'bg-primary text-primary-foreground'
+              : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
+          )}
+        >
+          {mins}m
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/widgets/interactive/Timer.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    id?: string;
+    class?: string;
+    /** Timer duration in minutes. */
+    duration?: number;
+    /** Label shown above the countdown. */
+    label?: string;
+    /** Preset durations in minutes shown as quick-pick pills. */
+    presets?: number[];
+    /** Fires when the countdown reaches zero. */
+    oncomplete?: () => void;
+}
+declare const Timer: import("svelte").Component<Props, {}, "">;
+type Timer = ReturnType<typeof Timer>;
+export default Timer;