open-index/open-npm huggingface dataset:
npm package: @stevenk03/flow-board
Description: A gamified SRL task board component for flow state management
Author: Steven Kelly
Latest version: 1.0.9

# @StevenKelly03/flow-board
A reusable Svelte task board component designed for Self-Regulated Learning (SRL) workflows using Flow-based feedback.
## Installation
Install using the full Git URL including the subdirectory path:
npm i git+https://github.com/StevenKelly03/RWM_2025_P2_Steven_Kelly.git#SRL_Project/Task_Board_App/packages/flow-board
## Usage
<script lang="ts">
  import TaskBoard from '@stevenk03/flow-board';
  import type { Task } from '@stevenk03/flow-board';
  let boardTasks: Task[] = [];
  function saveUserTasks(tasksToSave: Task[]) {
    console.log("Saving tasks to authenticated backend:", tasksToSave);
  }
  function handleBoardChange(event: CustomEvent<Task[]>) {
    boardTasks = event.detail;
    saveUserTasks(boardTasks);
  }
</script>
<TaskBoard tasks={boardTasks} on:change={handleBoardChange} />
## Props
| Prop | Type | Description |
|------|------|-------------|
| tasks | Task[] | Array of tasks displayed on the board. |
## Events
| Event | Payload | Description |
|--------|---------|-------------|
| change | Task[] | Fired after any task or subtask modification. |
## Types
export type SubTask = {
  id: number;
  text: string;
  status: 'Done' | 'To-Do';
};
export type Task = {
  id: number;
  title: string;
  startDate: string;
  dueDate: string;
  subtasks: SubTask[];
  color: string;
  showTestTasks: boolean;
  isComplete: boolean;
  notes: string;
};
## Features
- Flow Score based on task load, deadlines, and subtask progress.
- Storm Mode visual feedback when Flow Score drops below 50%.
- Suitable for authenticated SvelteKit routes with per-user API-based persistence.