### The Declarative JSON Gantt Chart Engine **Where human intuition meets declarative AI planning.** [![License: MIT](https://img.shields.io/badge/License-MIT-38BDF8.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![TypeScript 5.4](https://img.shields.io/badge/TypeScript-5.4-3178C6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![Zero Runtime Dependencies](https://img.shields.io/badge/Dependencies-0%20Runtime-10B981?style=flat-square)](https://www.npmjs.com/package/@jantt/core) [![Tests Passing](https://img.shields.io/badge/Tests-339%2F339%20Passing-brightgreen?style=flat-square)](https://github.com/AhmadHassan-BTed/Jantt/actions) [![Node.js Support](https://img.shields.io/badge/Node.js-%3E%3D18.0.0-68A063?style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org/) [![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-F59E0B.svg?style=flat-square)](https://github.com/AhmadHassan-BTed/Jantt/blob/main/CONTRIBUTING.md)

Turn any declarative JSON document into a high-performance, interactive, draggable Gantt chart. **Zero runtime dependencies.** **100% pure TypeScript.** Runs everywhere: Plain HTML, React, Next.js, Node.js CLI, and autonomous AI toolchains. Designed from the ground up for: * **Autonomous AI Agents & LLMs** — Declarative JSON schema contract eliminates UI hallucinations; models generate timeline data with 10x fewer tokens than fragile JSX code. * **Students, Hobbyists & Creators** — Lightweight, beautiful Swiss Noir dark mode, intuitive drag-and-drop, touch gestures, and instant local storage persistence. * **Engineering Teams & Program Directors** — Operations Research Critical Path solver, EVM (Earned Value Management), DCMA-14 schedule health audits, and multi-user CRDT collaboration with secure role-based permissions.
[Live Playground](https://ahmadhassan-bted.github.io/Jantt/) • [JSON Cheatsheet](./docs/JANTT_JSON_CHEATSHEET.md) • [Architecture](./docs/architecture.md) • [Schema Specification](./docs/schema-spec.md) • [API Docs](./docs/api-reference.md) • [Roadmap](./ROADMAP.md) • [Changelog](./CHANGELOG.md)
Jantt Interactive Workspace in Swiss Dark Mode with 90° Orthogonal Routing and Split JSON Editor

Jantt Interactive Workspace in Swiss Dark Mode with 90° Orthogonal Routing and Split JSON Editor

--- ## Why Jantt? The Declarative Revolution Traditional project management and timeline tools force an impossible choice: 1. **Enterprise Bloat**: Commercial suites (DHTMLX, Bryntum) demand 200KB to 800KB runtime dependencies, complex imperative APIs (`gantt.init()`, `gantt.addTask()`), and expensive recurring per-seat fees. 2. **Brittle AI Generations**: Prompting LLMs (ChatGPT, Claude, Gemini) to generate React JSX or SVG coordinate math produces broken layouts, coordinate hallucinations, and wastes thousands of tokens on boilerplate UI code. 3. **Static Limitations**: DSLs like Mermaid.js are read-only, non-interactive images. They cannot be dragged, edited, recalculated, or synchronized back to living project state. ### The 4 Superpowers of Jantt * **Zero Runtime Dependencies**: The core math and layout engine (`@jantt/core`) is pure, zero-dependency TypeScript weighing under 14 KB gzipped. * **AI-Native & 10x Fewer Tokens**: Declarative JSON schema contract eliminates UI hallucinations; models generate timeline data with 10x fewer tokens than fragile JSX code. * **Swiss Modernism 2.0 Aesthetics**: Deep OLED Swiss Noir (`#080D18`), 90-degree CAD orthogonal routing, glassmorphic HUD cards, and high-contrast typography. * **Defense-Grade Operations Research**: Built-in topological DAG solver, Critical Path Method (CPM), Earned Value Management (EVM - ANSI/EIA-748), DCMA-14 schedule health audits, and multi-user CRDT cloud rooms. --- ## Visual Showcase & Curated Themes Jantt features a fully reactive, CSS variable-driven theming architecture with out-of-the-box support for light modes, sleek dark modes, and high-contrast vibrant styles:

### Swiss Light Mode *Daylight clarity, high contrast typography, and subtle glassmorphic tooltips.* Jantt Swiss Light Theme

Jantt Swiss Light Theme

### Swiss Dark Mode *Sleek obsidian palette with glowing critical path indicators and 90° right-angle routing.* Jantt Swiss Dark Theme

Jantt Swiss Dark Theme

### Color Theme Gallery

Cyber Emerald	Midnight Rose
Sunset Crimson	Master Specification Benchmark

--- ## Comparison Matrix | Capability | Jantt Engine (`@jantt/core`) | DHTMLX Gantt | Frappe Gantt | Mermaid.js | |---|:---:|:---:|:---:|:---:| | **Runtime Dependencies** | **0 (Zero)** | Multiple | Multiple | Multiple | | **State Paradigm** | **100% Declarative JSON** | Imperative JS API | Imperative JS API | Text-based DSL | | **Interactive Drag-to-Link** | **90° Orthogonal Step** | Supported | Not Supported | Static only | | **Timeline Zoom Scales** | **5 (Day to Year)** | Supported | Limited | Not Supported | | **Critical Path Analysis** | **Built-in Solver** | Commercial tier | Not Supported | Not Supported | | **Milestones & Baselines** | **Native in Schema** | Commercial tier | Not Supported | Milestones only | | **Inline Progress Dragging** | **Interactive Handle** | Supported | Read-only | Not Supported | | **Bi-directional CLI Sync** | **Built-in** | Not Supported | Not Supported | Not Supported | | **Bundle Size (gzip)** | **< 14 KB** | ~200 KB | ~35 KB | ~800 KB | --- ## 60-Second Quickstart ### 1. React Integration (`@jantt/react`) ```bash npm install @jantt/react @jantt/core ``` ```tsx import { Jantt } from "@jantt/react"; import "@jantt/react/dist/index.css"; const projectData = { tasks: [ { id: "t1", label: "Architecture RFC", category: "core", start: "2026-09-01", end: "2026-09-14", progress: 1.0 }, { id: "t2", label: "Core Implementation", category: "core", start: "2026-09-15", end: "2026-10-15", dependsOn: "t1" } ], categories: { core: { label: "Core Engineering", color: "#38BDF8" } } }; export default function Timeline() { return ; } ``` ### 2. Plain HTML / Script Tag (`@jantt/standalone`) ```html

``` --- ## AI Agent Workbench & Schema Cheatsheet ### AI-Native Ideology: Stop Asking AI to Write Fragile Timeline Code Having LLMs generate hundreds of lines of React JSX, SVG coordinate math, and canvas listeners produces brittle, hallucination-prone results. With Jantt, the AI outputs **pure declarative JSON**, and Jantt delivers deterministic, interactive execution.

| 10× | 0 | 100% | 2-Way | | :---: | :---: | :---: | :---: | | **Fewer LLM Tokens vs JSX** | **Runtime Dependencies** | **Deterministic DAG Solver** | **Bidirectional State Sync** | *Schema Contract: [`https://raw.githubusercontent.com/AhmadHassan-BTed/Jantt/main/schema/jantt.schema.json`](https://raw.githubusercontent.com/AhmadHassan-BTed/Jantt/main/schema/jantt.schema.json) (v1.4.0)*

```mermaid flowchart LR A["Step 1: Feed Cheatsheet to LLM
Compact schema contract (WBS, dates, DAG, budget)"] --> B["Step 2: AI Outputs Pure JSON
10x fewer tokens, type-safe, 0 hallucinations"] B --> C["Step 3: Instant Interactive Suite
Deterministic DAG solver, Gantt, Kanban & Analytics"] C --> D["Step 4: Bidirectional Loop
Humans adjust visually, syncs clean JSON back to AI"] D --> B ``` * **Step 1: Feed Cheatsheet to LLM** — Give the AI the compact schema contract (WBS, dates, DAG dependencies, milestones, budget). See the full [Jantt JSON Cheatsheet](./docs/JANTT_JSON_CHEATSHEET.md). * **Step 2: AI Outputs Pure JSON** — Uses 10× fewer tokens than JSX. Machine-checkable, type-safe, and zero UI hallucinations. * **Step 3: Instant Interactive Suite** — Jantt resolves topological DAG schedules, routes orthogonal wires, and renders Gantt, Kanban, Notes & Analytics. * **Step 4: Bidirectional Loop** — Humans drag and adjust visually. Jantt syncs clean JSON back to localStorage/disk for the AI agent. --- ### LLM System Prompt Hand this prompt to ChatGPT, Claude, Gemini, Cursor, or your autonomous AI agent pipelines. The model will output 100% valid, constraint-checked Jantt JSON schedules without hallucinating UI code: ```text You are a precision project management schedule generator. Output ONLY raw, valid JSON conforming strictly to the Jantt JSON Schema (https://raw.githubusercontent.com/AhmadHassan-BTed/Jantt/main/schema/jantt.schema.json). # JANTT JSON SCHEMA BENCHMARK & SPECIFICATION CHEATSHEET (v1.4.0) ## 1. Top-Level Root Structure { "$schema": "https://raw.githubusercontent.com/AhmadHassan-BTed/Jantt/main/schema/jantt.schema.json", "meta": { "title": "", "description": "", "person": "", "organization": "", "start": "YYYY-MM-DD", "end": "YYYY-MM-DD", "defaultGapDays": 2, "scale": "day" | "week" | "month" | "quarter" | "year", "linkRouting": "orthogonal" | "curved" | "direct", "showCriticalPath": true, "showBaselines": true, "autoCascade": true, "currency": "USD", "budget": 450000, "version": "1.4.0" }, "categories": { "": { "label": "", "color": "#HEX_COLOR", "soft": "#BG_TINT_HEX", "icon": "" } }, "people": [ { "id": "@alex", "name": "Alex Mercer", "username": "@alex", "role": "Lead Architect", "email": "alex@org.com", "teamId": "core-team", "color": "#3B82F6" }, { "id": "person-contractor", "name": "Sarah Miller", "role": "External Specialist", "teamId": "core-team", "color": "#10B981" } ], "teams": [ { "id": "core-team", "name": "Core Platform Squad", "color": "#3B82F6", "description": "Backend services and architecture" } ], "notes": [ { "id": "note-unique-id", "title": "Architecture RFC & Specs", "content": "Detailed markdown requirements, meeting minutes, and acceptance criteria.", "color": "#3B82F6", "pinned": true, "category": "Architecture", "tags": ["RFC", "Architecture"], "task_ids": ["task-1"], "updatedBy": "@alex", "createdAt": "YYYY-MM-DDTHH:mm:ssZ", "updatedAt": "YYYY-MM-DDTHH:mm:ssZ" } ], "documents": [ { "id": "doc-unique-id", "label": "", "status": "have" | "pending" | "missing", "owner": "", "url": "", "note": "" } ], "tasks": [ { "id": "task-unique-id", "wbs": "1.1", "label": "Task Name / Title", "category": "", "start": "YYYY-MM-DD", "end": "YYYY-MM-DD", "assignee": "@alex", "phase": "Phase 1: Foundation", "priority": "low" | "medium" | "high" | "urgent", "estimatedCost": 28000, "actualCost": 15000, "dependsOn": "prereq-id" | ["prereq-1", "prereq-2"] | null, "gapDays": 2, "locked": false, "progress": 0.75, "milestone": false, "status": "not-started" | "in-progress" | "submitted" | "completed" | "blocked", "urgent": false, "color": "#EC4899", "baseline": { "start": "YYYY-MM-DD", "end": "YYYY-MM-DD" }, "notes": "Detailed task description, acceptance criteria, and technical specs.", "fields": { "jira": "JANTT-101", "storyPoints": 13, "repo": "github.com/org/repo", "deliverable": "schemas/v1.json" } } ] } ## 2. Critical Constraints & Validation Rules: 1. DATES: All dates must be ISO "YYYY-MM-DD" format. "end" must be >= "start". 2. CATEGORIES: Every task "category" must match an existing key in the "categories" dictionary. 3. DEPENDENCIES (DAG): - "dependsOn" can be a single task ID string, an array of strings ["t1", "t2"], or null. - All referenced dependency IDs must exist in the "tasks" list (no dangling references). - Strict Directed Acyclic Graph: NO circular dependency loops (e.g. A -> B -> C -> A). - Timing Sanity: A task's "start" must be on or after prerequisite "end" + gapDays. 4. MILESTONES: For zero-duration milestone gates, set "milestone": true and "start" equal to "end". 5. PROGRESS: Must be a decimal float from 0.0 (0%) to 1.0 (100%). 6. BASELINES: Optional planned timeframe object { "start": "YYYY-MM-DD", "end": "YYYY-MM-DD" } for baseline variance tracking. 7. LOCKED: Set "locked": true on fixed gates or hard-deadline milestones to prevent accidental drag shifts. 8. SINGLE SOURCE OF TRUTH & ZERO DATABASE IDS IN JSON: - Real registered teammates use canonical "@username" for both "id" and "username". - Non-account individuals are defined as offline personas (e.g. "id": "person-contractor", without "username"). - Tasks assigned to real accounts reference the handle in "assignee": "@username". - NO INTERNAL DATABASE IDS OR UIDs IN JSON: Private database keys, Firebase UIDs, auth tokens, and secret keys are strictly stripped from JSON. The ONLY exception is public "@username" mentions. ``` --- ### Minimal JSON Template Provide this minimal benchmark template directly to any code or LLM pipeline: ```json { "$schema": "https://raw.githubusercontent.com/AhmadHassan-BTed/Jantt/main/schema/jantt.schema.json", "meta": { "title": "Master Delivery Plan", "person": "@ahmadhassan", "start": "2026-09-01", "end": "2027-02-28", "scale": "week", "linkRouting": "orthogonal", "showCriticalPath": true, "currency": "USD", "budget": 250000 }, "categories": { "core": { "label": "Core Dev", "color": "#38BDF8" }, "qa": { "label": "QA & Release", "color": "#10B981" } }, "tasks": [ { "id": "t1", "wbs": "1.0", "label": "Engine Architecture", "category": "core", "start": "2026-09-01", "end": "2026-09-20", "progress": 1.0, "status": "completed", "assignee": "@ahmadhassan" }, { "id": "gate-1", "wbs": "1.1", "label": "Architecture Approved", "category": "core", "start": "2026-09-21", "end": "2026-09-21", "milestone": true, "dependsOn": "t1" }, { "id": "t2", "wbs": "2.0", "label": "Core Implementation", "category": "core", "start": "2026-09-23", "end": "2026-10-30", "dependsOn": "gate-1", "gapDays": 2, "progress": 0.4, "status": "in-progress" } ] } ``` --- ## System Architecture Jantt operates on a strictly decoupled, unidirectional data flow. Raw JSON is validated, topologically solved, mapped into coordinate space, and presented via modular DOM and SVG layers. ```mermaid flowchart TD classDef input fill:#0B111E,stroke:#38BDF8,stroke-width:2px,color:#F1F5F9; classDef core fill:#141D2F,stroke:#24324B,stroke-width:1px,color:#F1F5F9; classDef algo fill:#1E293B,stroke:#10B981,stroke-width:1px,color:#ECFDF5; classDef render fill:#1A263D,stroke:#F59E0B,stroke-width:1px,color:#FFFBEB; classDef target fill:#0F172A,stroke:#EC4899,stroke-width:1px,color:#FFF1F2; JSON["Declarative JSON Document
(Jantt v1 Schema)"]:::input subgraph CoreEngine ["@jantt/core (Zero Runtime Dependencies)"] VAL["1. Schema & Graph Validator
(Cycle & Integrity Diagnostics)"]:::core RES["2. Topological Schedule Resolver
(Constraint Relaxation & Critical Path)"]:::algo LAY["3. Multi-Scale Layout Engine
(90° Orthogonal Line Routing)"]:::algo subgraph Renderers ["Modular Presentation Layer"] REN_TBAR["Toolbar Subsystem"]:::render REN_GRID["Sticky Data Grid & Splitter"]:::render REN_HEAD["Multi-Tier Date Header"]:::render REN_BARS["Task Bars & Milestones"]:::render REN_SVG["SVG 90° Dependency Overlay"]:::render REN_TIP["Glassmorphic Tooltips"]:::render end CTRL["4. Interaction Controller
(Pointer Event State Machine)"]:::core end JSON --> VAL VAL --> RES RES --> LAY LAY --> Renderers Renderers --> CTRL CTRL -- "Immutable Commit" --> JSON subgraph Targets ["Deployment Surfaces"] T_REACT["@jantt/react
( Component)"]:::target T_STAND["@jantt/standalone
(UMD / IIFE Script Tag)"]:::target T_CLI["jantt CLI
(Two-Way Live Sync)"]:::target end Renderers --> Targets ``` --- ## Interaction & Request Lifecycle When dragging task bars, resizing durations, connecting dependency handles, or adjusting progress, the event cycle flows cleanly through the state machine: ```mermaid sequenceDiagram autonumber actor User as User / Contributor participant DOM as DOM / SVG Canvas participant Controller as Interaction Controller participant Resolver as Topological Resolver participant AppState as JSON State participant Callback as onCommit / Disk User->>DOM: PointerDown on Drag Port / Task Bar DOM->>Controller: startDrag(mode: move | resize | progress | link | split) loop Live Interaction (PointerMove) User->>DOM: Drag pointer across timeline Controller->>DOM: Update temporary visual draft (90° preview wire / coordinate shift) end User->>DOM: PointerUp (Release) Controller->>Resolver: resolveSchedule(mutatedTasks, defaultGapDays) Resolver-->>Controller: Return schedule-consistent tasks Controller->>AppState: Generate new immutable JanttData state Controller->>DOM: Re-render layout with updated constraints Controller->>Callback: Emit onCommit(finalData) / Write to file on disk ``` --- ## Feature Matrix & Capabilities Guide Jantt bridges the gap between declarative machine data and human project intuition with high-performance visualization across timelines, agile boards, and documentation. ### Visual & Interactive Experience (Up Front) | Surface | Core Capabilities | Highlights | | :--- | :--- | :--- | | **Interactive Gantt Timeline** | 90° CAD orthogonal dependency wiring, live drag-to-link anchor ports, baseline ghost bars, inline progress drag handle, split-pane resizer. | 60/120fps smooth canvas, 5-tier zoom (Day to Year) + continuous slider, fit-to-height mode. | | **Agile Kanban Board** | 4-state workflow columns (`pending`, `in-progress`, `completed`, `blocked`), priority badges, category color dots, drag & drop status transitions. | Multi-rule sorting (by Priority, Start Date, Assignee, WBS), live progress indicators. | | **Todo Checklist & Cards** | 1-click `[x]` completion checkboxes, strikethrough styling, expandable task cards, category tags. | Quick status switching, assignee avatars, team squad badges. | | **Shared Notes & Docs** | Markdown editor & preview, `@person` tagging, `/task` mentions, attached tasks lists, color palettes, pin to top. | Real-time debounced auto-save into JSON, sectioned attached & mentioned task views. | | **Executive PM & KPIs** | Dual-mode dashboard: Essential (progress velocity, health readiness) vs Advanced (EVM, Critical Path, DCMA-14). | Quick status filters (Ready, Blocked, Bottleneck), schedule buffer diagnostic cards. | | Personalization & AI | Features | Highlights | | :--- | :--- | :--- | | **Curated Theme Engine** | 7 handcrafted themes: Swiss Noir (True OLED Black), Nordic Frost, Cyber Emerald, Midnight Rose, Sunset Crimson, Swiss Light, Beenie. | Clean dark & light mode grouping, high-contrast typography, zero emojis. | | **Resources & Squads** | Automatic assignee discovery from `tasks[].assignee`, squad groupings (Engineering, Design, QA), workload counts. | 1-click "Save to JSON" sync directly into root `people[]` and `teams[]` arrays. | | **Time Blocking & Focus** | Universal 1-click filter bar: Today, This Week, Specific Date, Date Range. | Dim Mode (fades non-matching tasks) vs Filter Mode (hides non-matching tasks). | | **AI Agent Toolchains** | JSON-as-Interface: $10\times$ token reduction vs JSX/HTML, zero graphical hallucinations. | Copy-paste benchmark prompts for Claude 3.5 Sonnet, GPT-4o, and Gemini 1.5 Pro. | --- ### Core Engine & Algorithmic Internals (Under the Hood) | Algorithmic Engine | Mathematics & Standards | Description | | :--- | :--- | :--- | | **Topological Solver** | Graph constraint resolution ($ES(T) = \max(EF(P) + \text{gap})$) | Automatically paces successor chains when predecessors shift; respects `locked: true` milestones. | | **Critical Path & Float** | Dual-pass forward / backward scheduling | Computes early/late start, early/late finish, and total slack/float ($TF = LS - ES$). Zero-float bottleneck glow. | | **PERT Estimation** | $\mu = \frac{O + 4M + P}{6}, \quad \sigma = \frac{P - O}{6}$ | 3-point probabilistic duration calculations using optimistic, most likely, and pessimistic bounds. | | **Earned Value (EVM)** | $CV = EV - AC, \quad SV = EV - PV, \quad CPI = \frac{EV}{AC}, \quad SPI = \frac{EV}{PV}$ | ANSI/EIA-748 standard cost & schedule variance monitoring and forecasting ($EAC = \frac{BAC}{CPI}$). | | **DCMA-14 Schedule Audit** | Defense Contract Management 14-point audit metrics | Flags missing logic, negative float, high float (>44 days), invalid leads, and relationship inconsistencies. | | Enterprise & Developer Tooling | Description | | :--- | :--- | | **Client-Side Exporters** | 1-click RFC-4180 CSV spreadsheet export, high-resolution vector SVG extraction, and raw JSON export. | | **Cloud Remote URL Sync** | Bidirectional synchronization with remote JSON endpoints, ETag caching, background polling, and conflict warnings. | | **Split Monaco Editor** | Built-in VS Code-grade Monaco code editor with real-time JSON schema validation and error diagnostic squiggles. | | **Bidirectional CLI (`jantt`)** | CLI runner (`npx jantt open `) providing live file-watching and bidirectional browser-to-disk synchronization. | | **Zero Runtime Dependencies** | `@jantt/core` is 100% pure TypeScript with zero external packages (<14 KB gzip). | --- ## Monorepo Directory Structure ``` Jantt/ ├── packages/ │ ├── core/ # Pure TypeScript engine (ZERO runtime dependencies) │ │ ├── src/ │ │ │ ├── date-math.ts # Pure UTC date math & calendar functions │ │ │ ├── validator.ts # Schema, cycle, and integrity validator │ │ │ ├── resolver.ts # Topological solver & Critical Path analysis │ │ │ ├── layout.ts # Multi-scale coordinate engine & 90° line router │ │ │ ├── controller.ts # Pointer event interaction state machine │ │ │ ├── detail-modal.ts# Accessible task detail modal subsystem │ │ │ ├── exporter.ts # Client-side CSV, SVG, and JSON exporters │ │ │ ├── renderers/ # Modular DOM presentation subsystems │ │ │ └── index.ts # Public package exports │ │ └── tests/ # Vitest test suites (339/339 tests passing across 22 suites) │ ├── react/ # Official React component () │ └── standalone/ # UMD & IIFE script-tag bundles for plain HTML ├── cli/ # Standalone Node.js CLI runner (npx jantt open) ├── apps/ │ └── playground/ # Split-view interactive documentation sandbox ├── assets/ # Official vector logos & curated screenshot gallery ├── schema/ │ └── jantt.schema.json # Formal JSON Schema v1 specification ├── examples/ # Validated JSON planning fixtures └── docs/ # Technical specifications & architectural guides ``` --- ## Quickstarts ### 1. React Application (`@jantt/react`) ```bash npm install @jantt/react @jantt/core ``` ```tsx import React, { useState } from "react"; import { Jantt } from "@jantt/react"; import "@jantt/core/dist/theme.css"; const initialPlan = { "$schema": "https://jantt.dev/schema/v1.json", "meta": { "title": "High-Rise Construction", "scale": "week", "showCriticalPath": true, "showBaselines": true }, "categories": { "civil": { "label": "Civil Engineering", "color": "#10B981" }, "structure": { "label": "Superstructure", "color": "#8B5CF6" } }, "tasks": [ { "id": "T1", "label": "Deep Foundation Excavation", "category": "civil", "start": "2026-09-01", "end": "2026-09-20", "progress": 1.0 }, { "id": "T2", "label": "Structural Steel Erection", "category": "structure", "start": "2026-09-22", "end": "2026-10-30", "dependsOn": "T1", "progress": 0.35 } ] }; export function RoadmapView() { const [plan, setPlan] = useState(initialPlan); return (

console.log("Draft state:", draft)} onCommit={(finalPlan) => { setPlan(finalPlan); }} />

); } ``` --- ### 2. Standalone Plain HTML (`@jantt/standalone`) No bundler, Node.js, or build step required: ```html

``` --- ### 3. Local CLI with Live Two-Way Sync (`jantt`) Open and edit any JSON file with automatic real-time saving back to disk: ```bash # Open interactive browser chart with auto-save to file npx jantt open ./examples/construction-enterprise.json # Validate JSON file against schema from terminal npx jantt validate ./examples/basic.json ``` --- ### 4. Headless Core Engine (`@jantt/core`) Execute topological constraints and schedule calculations headlessly in backend services: ```typescript import { resolveSchedule, calculateCriticalPath, validate, exportToCsv } from "@jantt/core"; // 1. Validate payload const validation = validate(rawJson); if (!validation.valid) { console.error("Schema errors:", validation.errors); } // 2. Cascade topological schedules const resolvedTasks = resolveSchedule(rawJson.tasks, 2); // 3. Compute critical path bottleneck sequence const { criticalTaskIds } = calculateCriticalPath(resolvedTasks); // 4. Export to CSV spreadsheet const csvData = exportToCsv({ ...rawJson, tasks: resolvedTasks }); ``` --- ## JSON Schema Contract Every Jantt document conforms strictly to [`schema/jantt.schema.json`](./schema/jantt.schema.json): ```json { "$schema": "https://jantt.dev/schema/v1.json", "meta": { "title": "Metropolis High-Rise Construction", "start": "2026-09-01", "end": "2027-02-28", "defaultGapDays": 2, "scale": "week", "showCriticalPath": true, "showBaselines": true }, "categories": { "civil": { "label": "Civil & Foundation", "color": "#10B981" }, "milestone": { "label": "Project Milestones", "color": "#E11D48" } }, "tasks": [ { "id": "excavation", "label": "Deep Foundation Excavation", "category": "civil", "start": "2026-09-01", "end": "2026-09-20", "progress": 1.0, "baseline": { "start": "2026-09-01", "end": "2026-09-18" } }, { "id": "foundation-pour", "label": "Foundation Pour Milestone", "category": "milestone", "start": "2026-09-22", "end": "2026-09-22", "milestone": true, "dependsOn": "excavation", "gapDays": 2, "progress": 0.0 } ] } ``` --- ## Real-Time Cloud Collaboration & Architecture Jantt features a dedicated, enterprise-grade multi-user collaboration engine backed by Firebase Realtime Database and Cloudflare Workers: ### 1. GitHub-Only Authentication (Zero Google Auth) - **Strict Single Provider**: Google login and generic password forms are completely removed. Authentication is restricted to **GitHub OAuth 2.0** (`read:user`, `user:follow`, `public_repo`). - **Zero Manual Username Typing**: Jantt automatically claims the user's verified GitHub handle (`@username`) directly into `/usernames/{username}` upon first sign-in. - **Creator Follow & Star Gate**: Collaborators unlock free cloud collaboration rooms by supporting the project — following [@AhmadHassan-BTed](https://github.com/AhmadHassan-BTed) and starring developer repositories. Creator `@AhmadHassan-BTed` is automatically verified across all checks. ### 2. Single Source of Truth & Zero Internal Database IDs in JSON - **No Database Leakage**: Private database UIDs, owner UIDs, internal room secrets, and authentication tokens are strictly stripped and **never exposed in JSON**. - **Canonical Mentions**: The only user identity representation in JSON is canonical user mentions (`@username`). - **Plan Sanitizer Engine (`sanitizePlanForJson`)**: Every plan document is recursively scrubbed before write or export. ### 3. Dual-Mode People & Assignee Management - **Search Real Accounts**: Live search modal queries `/users` by username prefix (`searchUsersByUsername`) with avatar, display name, and `@username`. - **Offline / Dummy Personas**: Add contractors or external stakeholders without an account (`id: "person-xxx"`, without `username`). - **Coherent Task Assignments**: Tasks assigned to real accounts reference `"assignee": "@username"`, keeping tasks, people, and mentions 100% synchronized. ### 4. Realtime Database Security Rules (`database.rules.json`) The complete ruleset governs authorization across all paths: - `/users`: Indexed on `username` (`.indexOn: ["username"]`) for prefix searches; users can only write to their own record. - `/usernames`: Atomic handle registration preventing username collisions. - `/user_rooms`: Fast dashboard listings of owned and shared rooms. - `/rooms`: ACID transactions via `runTransaction` with 3-way CRDT reconciler, ensuring only room owners and editors can mutate plan data. --- ## AI Prompting Specification Use this system prompt with ChatGPT, Claude, Gemini, or local LLMs to generate valid Jantt timelines: ```markdown You are a project timeline generator. Output only raw, valid JSON conforming strictly to the Jantt Schema (https://jantt.dev/schema/v1.json). Rules: 1. Root must contain: "tasks": [{ "id", "label", "category", "start", "end", "dependsOn", "progress", "milestone", "baseline" }] 2. All dates must be ISO "YYYY-MM-DD" 3. All task categories must match keys declared in "categories" 4. Put custom domain metadata inside the "fields" object 5. Output ONLY raw JSON without markdown explanations. ``` --- ## Theming & CSS Variables Reference ```css :root { --jantt-bg: #0B111E; /* Chart background */ --jantt-surface: #141D2F; /* Toolbar & left table surface */ --jantt-surface-hover: #1A263D; /* Row hover state */ --jantt-border: #24324B; /* Border lines */ --jantt-text: #F1F5F9; /* Primary text */ --jantt-text-muted: #94A3B8; /* Secondary text */ --jantt-accent: #38BDF8; /* Active selection & ports */ --jantt-today: #F43F5E; /* Today indicator line */ --jantt-critical: #F59E0B; /* Critical path glowing line */ --jantt-bar-radius: 6px; /* Task bar corner radius */ } ``` --- ## Keyboard Accessibility | Key | Action | |---|---| | Tab / Shift+Tab | Navigate focus across task bars | | ArrowLeft / ArrowRight | Move task start & end by 1 day (or `defaultGapDays` with Alt) | | Shift+ArrowLeft / Right | Resize task duration | | Enter or Space | Open task detail modal | | Escape | Close modal / cancel active drag | --- ## Local Development & Contributing New contributors are welcomed. Please review [`CONTRIBUTING.md`](./CONTRIBUTING.md) and [`CODE_OF_CONDUCT.md`](./CODE_OF_CONDUCT.md). ```bash # Clone the repository git clone https://github.com/AhmadHassan-BTed/Jantt.git cd Jantt # Install dependencies npm install # Run verification test suite (339/339 passing across 22 test suites) npm test # Typecheck all packages npm run typecheck # Launch local interactive development playground npm run dev ``` --- ## Author & Maintainer **Ahmad Hassan (B-Ted)** - Email: [ahmadhassan.bted@gmail.com](mailto:ahmadhassan.bted@gmail.com) - GitHub: [@AhmadHassan-BTed](https://github.com/AhmadHassan-BTed) - Project Repository: [https://github.com/AhmadHassan-BTed/Jantt](https://github.com/AhmadHassan-BTed/Jantt) --- ## License This project is licensed under the **MIT License** — see the [`LICENSE`](./LICENSE) file for details.