docker mvp

.dockerignore

@@ -0,0 +1,17 @@
+node_modules
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.gitignore
+README.md
+FIXME.md
+LICENSE
+.vscode
+Makefile
+helm-charts
+.env
+.editorconfig
+.idea
+coverage*
+

.gitignore

@@ -2,8 +2,67 @@
 .devenv*
 devenv.local.nix
 
+# dependencies (bun install)
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
 # direnv
 .direnv
 
+# output
+/out/
+out
+dist
+/build
+*.tgz
+
 # pre-commit
 .pre-commit-config.yaml
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env*
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+/.next/
+
+# IntelliJ based IDEs
+.idea
+
+# Misc
+.DS_Store
+*.pem
+
+# vercel
+.vercel
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+public/sw.js
+public/workbox-*.js

Dockerfile

@@ -0,0 +1,14 @@
+# syntax=docker.io/docker/dockerfile:1
+
+FROM oven/bun:1.2.10 AS base
+
+COPY package.json bun.lock* ./
+RUN bun install --frozen-lockfile
+
+COPY . .
+
+RUN bun run build
+
+EXPOSE 3000
+
+CMD ["bun", "start"]

FIXME.md

@@ -0,0 +1,4 @@
+# FIXME
+
+    - [] minimatch types
+        https://github.com/strapi/strapi/issues/23859

README.md

@@ -0,0 +1,128 @@
+## **Project Plan: PWA iCal Editor with AI Integration**
+
+### Phase 0 — Set Up Your Workspace (1 day)
+**Goal:** Ensure your dev environment and project skeleton are ready.  
+**Tasks:**  
+1. Install bun runtime and Docker locally.  
+2. Create a GitHub repo for your project.  
+3. Set up a kanban board (e.g., GitHub Projects, Trello, or even a whiteboard) with columns: _Backlog → In Progress → Done_.  
+4. Initialize Next.js project with **bun**:
+   ```bash
+   bun create next-app my-ical-pwa
+   ```
+5. Integrate **shadcn/ui** + TailwindCSS.  
+   ```
+   npx shadcn-ui init
+   ```
+6. Install TurboPack config for faster builds.  
+7. Commit and push to GitHub.
+
+✅ **Success criteria:** You can run `bun dev` and see the starter NextJS page with a shadcn component rendering.
+
+---
+
+### Phase 1 — PWA Foundations (2–3 days)
+**Goal:** Make your app installable, offline-capable, and structured.  
+**Tasks:**  
+1. Configure NextJS PWA using the [`next-pwa`](https://github.com/shadowwalker/next-pwa) plugin or manual service worker.  
+2. Add manifest.json (name, icons, start_url).  
+3. Ensure offline caching works for basic pages.  
+4. Build your base layout with shadcn (Navigation bar, App shell).
+
+✅ **Success criteria:**  
+- App can be installed on desktop/mobile.  
+- Basic UI framework in place (navigation, header).  
+- Works offline in basic form.
+
+---
+
+### Phase 2 — Local Calendar CRUD (3–4 days)
+**Goal:** Create, Read, Update, and Delete events in **IndexedDB** (calendar data stored locally).  
+**Tasks:**  
+1. Set up IndexedDB wrapper (recommend [`idb`](https://github.com/jakearchibald/idb) library for simplicity).  
+2. Design minimal event model:
+   ```ts
+   type CalendarEvent = {
+     id: string;
+     title: string;
+     start: Date;
+     end: Date;
+     description?: string;
+   };
+   ```
+3. Build **Add Event** form (shadcn modal or page).  
+4. Render events in list view.  
+5. Enable edit/delete logic.  
+6. Store small user preferences (theme, last viewed date) in localStorage.
+
+✅ **Success criteria:**  
+- You can add, edit, and delete events without reloading.  
+- Changes persist after refresh.
+
+---
+
+### Phase 3 — iCal File Import/Export (3 days)
+**Goal:** Read `.ics` files and export your event list as iCal.  
+**Tasks:**  
+1. Use [`ical.js`](https://github.com/mozilla-comm/ical.js) or [`ical-generator`](https://github.com/sebbo2002/ical-generator) to handle parsing.  
+2. Create import button (upload local iCal file and store events in IndexedDB).  
+3. Create export button that takes current events and downloads `.ics`.  
+
+✅ **Success criteria:**  
+- Importing an `.ics` populates your list.  
+- Export downloads a valid `.ics` file.
+
+---
+
+### Phase 4 — AI Integration (OpenRouter) (3–5 days)
+**Goal:** Add AI-assisted event creation / summarization.  
+**Tasks:**  
+1. Set up API route in Next.js that calls **OpenRouter** API.  
+2. Write prompt format for:
+   - Turning natural language into structured event JSON.
+   - Summarizing events into a bullet list.
+3. Add text input where the user can type: _"Lunch with Sarah next Friday at noon"_ → generates event form populated automatically.
+4. Integrate results directly into CRUD flow.
+
+✅ **Success criteria:**  
+- User can create an event by typing in natural language and AI fills in details.  
+- AI can summarize selected events.
+
+---
+
+### Phase 5 — Polish & Deployment (2–3 days)
+**Goal:** Dockerize and deploy to bare metal.  
+**Tasks:**  
+1. Write `Dockerfile` for **bun + NextJS** app.  
+2. Add `.dockerignore` to optimize build.  
+3. Deploy to your server using `docker-compose` or raw `docker run`.  
+4. Enable HTTPS with Caddy or Nginx reverse proxy.  
+
+✅ **Success criteria:**  
+- App is live, installable, and can read/write iCal files with AI support.  
+- Access from phone and desktop.
+
+---
+
+## ADHD-Friendly Productivity Tips for This Project
+- **Visual progress:** Keep your kanban board visible; drag at least 1 card to "Done" daily.  
+- **Micro-goals:** Define tasks as “Under 1 hour” pieces (e.g., _“Add startDate field to form”_ versus _“Build CRUD forms”_).  
+- **Pomodoros with variety:** Alternate coding with light tasks (docs, UI tweaks).  
+- **Celebrate small wins:** Even “icons rendering right” counts.  
+- **Hyperfocus harness:** Save creative coding (like AI prompt design) for your high-focus times.  
+- **Body doubling:** Work in a co-working video call or stream to keep momentum.
+
+---
+
+## Suggested Timeline
+If you work ~2–3 focused hours/day:  
+- **Week 1:** Phases 0–2 (setup, PWA, local CRUD)  
+- **Week 2:** Phases 3–4 (iCal import/export, AI integration)  
+- **Week 3:** Phase 5 (polish, deployment)
+
+---
+
+## Next Steps for You
+1. Confirm if you want to **start from plain NextJS** or grab a PWA boilerplate to save time.  
+2. Decide which **AI model via OpenRouter** to use (cheap + fast, or high-quality outputs?).  
+3. Pick a **calendar UI approach** — minimal list view or visual calendar grid from the start?  

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

devenv.nix

@@ -10,7 +10,8 @@
     bun.enable = true;
   };
   enterShell = ''
-    git --version
+    echo ""
-    bun --version
+    echo "$(git --version)"
+    echo "bun version $(bun --version)"
   '';
 }

docker-compose.yml

@@ -0,0 +1,30 @@
+services:
+  ical-pwa:
+    build: .
+    container_name: ical-pwa
+    restart: unless-stopped
+    # ports:
+    #   - "3000:3000"
+    # environment:
+    #   NODE_ENV: production
+    #   OPENROUTER_API_KEY: ${OPENROUTER_API_KEY}
+    # volumes:
+    #   - .:/app
+    # - /app/node_modules
+    networks:
+      - traefik
+      - internal
+    labels:
+      'traefik.enable': 'true'
+      'traefik.docker.network': 'traefik'
+      'traefik.http.routers.ical-local.rule': 'Host(`cal.cloud.dmytros.dev`)'
+      'traefik.http.routers.ical-local.entrypoints': 'websecure'
+      'traefik.http.routers.ical-local.tls.certresolver': 'letsencrypt'
+      'traefik.http.routers.ical-local.service': 'ical-local-service'
+      'traefik.http.services.ical-local-service.loadbalancer.server.port': '3000'
+networks:
+  traefik:
+    external: true
+  internal:
+    external: false
+    name: ical-local-network

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,21 @@
+import type { NextConfig } from "next";
+
+const withPWA = require("next-pwa")({
+	dest: "public",
+	register: true,
+	skipWaiting: true,
+	disable: process.env.NODE_ENV === "development",
+});
+
+// const nextConfig: NextConfig = {
+// 	/* config options here */
+// 	reactStrictMode: true,
+// };
+
+const nextConfig: NextConfig = withPWA({
+	/* config options here */
+	reactStrictMode: true,
+	// output: "standalone",
+});
+
+export default nextConfig;

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "ical-pwa",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "ical.js": "^2.2.1",
+    "idb": "^8.0.3",
+    "lucide-react": "^0.539.0",
+    "nanoid": "^5.1.5",
+    "next": "15.4.6",
+    "next-pwa": "^5.6.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.4.6",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.6",
+    "typescript": "^5"
+  },
+  "overrides": {
+    "@types/minimatch": "5.1.2"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "iCal PWA",
+  "short_name": "iCal",
+  "start_url": "/",
+  "background_color": "#ffffff",
+  "theme_color": "#1d4ed8",
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/api/ai-event/route.ts

@@ -0,0 +1,59 @@
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+	const { prompt } = await request.json();
+
+	const systemPrompt = `
+You are an assistant that converts natural language into an ARRAY of calendar events.
+TypeScript type:
+
+{
+  id?: string,
+  title: string,
+  description?: string,
+  location?: string,
+  url?: string,
+  start: string, // ISO datetime
+  end?: string,
+  allDay?: boolean,
+  recurrenceRule?: string // valid iCal RRULE string like FREQ=WEEKLY;BYDAY=MO;INTERVAL=1
+}[]
+
+Rules:
+  - If the user describes multiple events in one prompt, return multiple objects (one per event).
+  - Always return a valid JSON array of objects, even if there's only one event.
+  - Today is ${new Date().toLocaleString()}.
+  - If no time is given, assume allDay event.
+  - If no end time is given (and event is not allDay), default to 1 hour after start.
+  - If multiple events are described, return multiple.
+  - If recurrence is implied (e.g. "every Monday", "daily for 10 days", "monthly on the 15th"), generate a recurrenceRule.
+  - Output ONLY valid JSON (no prose).
+`;
+
+	const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+		method: "POST",
+		headers: {
+			Authorization: `Bearer ${process.env.OPENROUTER_API_KEY}`,
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({
+			model: "openai/gpt-4.1-nano",
+			messages: [
+				{ role: "system", content: systemPrompt },
+				{ role: "user", content: prompt },
+			],
+		}),
+	});
+
+	const data = await res.json();
+	try {
+		const content = data.choices[0].message.content;
+		const parsed = JSON.parse(content);
+		return NextResponse.json(parsed);
+	} catch (e) {
+		return NextResponse.json(
+			{ error: "Failed to parse AI output", raw: data },
+			{ status: 500 },
+		);
+	}
+}

src/app/api/ai-summary/route.ts

@@ -0,0 +1,46 @@
+import { NextResponse } from "next/server";
+import type { CalendarEvent } from "@/lib/types";
+
+export async function POST(request: Request) {
+	try {
+		const { events } = await request.json();
+
+		if (!events || !Array.isArray(events)) {
+			return NextResponse.json(
+				{ error: "Invalid events array" },
+				{ status: 400 },
+			);
+		}
+
+		const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+			method: "POST",
+			headers: {
+				Authorization: `Bearer ${process.env.OPENROUTER_API_KEY}`, // Server-side only
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({
+				model: "@preset/i-cal-editor-summarize", // FREE model
+				messages: [
+					{
+						role: "system",
+						content: `You summarize a list of events in natural language. Include date, time, and title. Be concise.`,
+					},
+					{ role: "user", content: JSON.stringify(events) },
+				],
+				temperature: 0.4,
+				// max_tokens: 300,
+			}),
+		});
+
+		const data = await res.json();
+		const summary =
+			data?.choices?.[0]?.message?.content || "No summary generated.";
+		return NextResponse.json({ summary });
+	} catch (error) {
+		console.error(error);
+		return NextResponse.json(
+			{ error: "Failed to summarize events" },
+			{ status: 500 },
+		);
+	}
+}

src/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ['latin'], variable: "--font-inter" })
+
+export const metadata = {
+  title: 'iCal PWA',
+  description: 'Minimal PWA for calendar events',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${inter.variable} antialiased min-h-screen flex flex-col bg-gray-50 text-gray-900`}
+      >
+        <header className="bg-blue-600 text-white px-4 py-3 font-bold shadow">
+          iCal PWA
+        </header>
+        <main className="flex-1 p-4">{children}</main>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,336 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { nanoid } from 'nanoid'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Card } from '@/components/ui/card'
+import { RecurrencePicker } from '@/components/recurrence-picker'
+
+import { addEvent, deleteEvent, getAllEvents, clearEvents, getDB } from '@/lib/db'
+import { parseICS, generateICS } from '@/lib/ical'
+import type { CalendarEvent } from '@/lib/types'
+
+export default function HomePage() {
+  const [events, setEvents] = useState<CalendarEvent[]>([])
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [isDragOver, setIsDragOver] = useState(false)
+
+  // Form fields
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [location, setLocation] = useState('')
+  const [url, setUrl] = useState('')
+  const [start, setStart] = useState('')
+  const [end, setEnd] = useState('')
+  const [allDay, setAllDay] = useState(false)
+  const [recurrenceRule, setRecurrenceRule] = useState<string | undefined>(undefined)
+
+  // AI
+  const [aiPrompt, setAiPrompt] = useState('')
+  const [aiLoading, setAiLoading] = useState(false)
+  const [summary, setSummary] = useState<string | null>(null)
+  const [summaryUpdated, setSummaryUpdated] = useState<string | null>(null)
+
+  useEffect(() => {
+    (async () => {
+      const stored = await getAllEvents()
+      setEvents(stored)
+    })()
+  }, [])
+
+  const resetForm = () => {
+    setTitle('')
+    setDescription('')
+    setLocation('')
+    setUrl('')
+    setStart('')
+    setEnd('')
+    setAllDay(false)
+    setEditingId(null)
+  }
+
+  const handleSave = async () => {
+    const eventData: CalendarEvent = {
+      id: editingId || nanoid(),
+      title,
+      description,
+      location,
+      url,
+      recurrenceRule,
+      start,
+      end: end || undefined,
+      allDay,
+      createdAt: editingId
+        ? events.find(e => e.id === editingId)?.createdAt
+        : new Date().toISOString(),
+      lastModified: new Date().toISOString(),
+    }
+    if (editingId) {
+      const db = await getDB()
+      if (db) {
+        await db.put('events', eventData)
+        setEvents(prev => prev.map(e => (e.id === editingId ? eventData : e)))
+      }
+    } else {
+      await addEvent(eventData)
+      setEvents(prev => [...prev, eventData])
+    }
+    resetForm()
+    setDialogOpen(false)
+  }
+
+  const handleDelete = async (id: string) => {
+    await deleteEvent(id)
+    setEvents(prev => prev.filter(e => e.id !== id))
+  }
+
+  const handleClearAll = async () => {
+    await clearEvents()
+    setEvents([])
+  }
+
+  const handleImport = async (file: File) => {
+    const text = await file.text()
+    const parsed = parseICS(text)
+    for (const ev of parsed) {
+      await addEvent(ev)
+    }
+    const stored = await getAllEvents()
+    setEvents(stored)
+  }
+
+  const handleExport = () => {
+    const icsData = generateICS(events)
+    const blob = new Blob([icsData], { type: 'text/calendar' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `icallocal-export-${new Date().toLocaleTimeString()}.ics`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  // Drag-and-drop
+  const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragOver(true) }
+  const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); setIsDragOver(false) }
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+    if (e.dataTransfer.files?.length) {
+      const file = e.dataTransfer.files[0]
+      if (file.name.endsWith('.ics')) {
+        handleImport(file)
+      } else {
+        alert('Please drop an .ics file')
+      }
+    }
+  }
+
+  // AI Create Event
+  const handleAiCreate = async () => {
+    if (!aiPrompt.trim()) return
+    setAiLoading(true)
+    try {
+      const res = await fetch('/api/ai-event', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: aiPrompt })
+      })
+      const data = await res.json()
+
+      if (Array.isArray(data) && data.length > 0) {
+        if (data.length === 1) {
+          // Prefill dialog directly (same as before)
+          const ev = data[0]
+          setTitle(ev.title || '')
+          setDescription(ev.description || '')
+          setLocation(ev.location || '')
+          setUrl(ev.url || '')
+          setStart(ev.start || '')
+          setEnd(ev.end || '')
+          setAllDay(ev.allDay || false)
+          setEditingId(null)
+          setDialogOpen(true)
+          setRecurrenceRule(ev.recurrenceRule || undefined)
+        } else {
+          // Save them all directly to DB
+          for (const ev of data) {
+            const newEvent = {
+              id: nanoid(),
+              ...ev,
+              createdAt: new Date().toISOString(),
+              lastModified: new Date().toISOString(),
+            }
+            await addEvent(newEvent)
+          }
+          const stored = await getAllEvents()
+          setEvents(stored)
+          setSummary(`Added ${data.length} AI-generated events.`)
+          setSummaryUpdated(new Date().toLocaleString())
+        }
+      } else {
+        alert('AI did not return event data.')
+      }
+    } catch (err) {
+      console.error(err)
+      alert('Error from AI service.')
+    } finally {
+      setAiLoading(false)
+    }
+  }
+
+  // AI Summarize Events
+  const handleAiSummarize = async () => {
+    if (!events.length) {
+      setSummary("No events to summarize.")
+      setSummaryUpdated(new Date().toLocaleString())
+      return
+    }
+    setAiLoading(true)
+    try {
+      const res = await fetch('/api/ai-summary', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ events })
+      })
+      const data = await res.json()
+      if (data.summary) {
+        setSummary(data.summary)
+        setSummaryUpdated(new Date().toLocaleString())
+      } else {
+        setSummary("No summary generated.")
+        setSummaryUpdated(new Date().toLocaleString())
+      }
+    } catch {
+      setSummary("Error summarizing events")
+      setSummaryUpdated(new Date().toLocaleString())
+    } finally {
+      setAiLoading(false)
+    }
+  }
+
+  return (
+    <div onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop}
+      className={`p-4 min-h-[80vh] rounded border-2 border-dashed transition ${isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
+        }`}
+    >
+      {/* AI Toolbar */}
+      <div className="flex flex-wrap gap-2 mb-4 items-center">
+        <Input
+          className="flex-1"
+          placeholder='Describe event for AI to create'
+          value={aiPrompt}
+          onChange={e => setAiPrompt(e.target.value)}
+        />
+        <Button onClick={handleAiCreate} disabled={aiLoading}>
+          {aiLoading ? 'Thinking...' : 'AI Create'}
+        </Button>
+        <Button variant="secondary" onClick={handleAiSummarize} disabled={aiLoading}>
+          {aiLoading ? 'Summarizing...' : 'AI Summarize'}
+        </Button>
+      </div>
+
+      {/* Summary Panel */}
+      {summary && (
+        <Card className="p-4 mb-4 bg-gray-50 border border-gray-200">
+          <div className="text-sm text-gray-500 mb-1">
+            Summary updated {summaryUpdated}
+          </div>
+          <div>{summary}</div>
+        </Card>
+      )}
+
+      {/* Control Toolbar */}
+      <div className="flex flex-wrap gap-2 mb-4">
+        <Button onClick={() => setDialogOpen(true)}>Add Event</Button>
+        {events.length > 0 && (
+          <>
+            <Button variant="secondary" onClick={handleExport}>Export .ics</Button>
+            <Button variant="destructive" onClick={handleClearAll}>Clear All</Button>
+          </>
+        )}
+        <label className="cursor-pointer">
+          <span className="px-3 py-2 bg-blue-500 text-white rounded">Import .ics</span>
+          <input type="file" accept=".ics" hidden onChange={e => {
+            if (e.target.files?.length) handleImport(e.target.files[0])
+          }} />
+        </label>
+      </div>
+
+      {/* Event List */}
+      {events.length === 0 && <p className="text-gray-500 italic">No events yet</p>}
+      <ul className="space-y-2">
+        {events.map(ev => (
+          <li key={ev.id} className="p-3 border rounded flex justify-between items-start">
+            <div>
+              <div className="font-semibold">{ev.title}</div>
+              {ev.recurrenceRule && (
+                <div className="text-xs text-blue-600 mt-1">
+                  Repeats: {ev.recurrenceRule}
+                </div>
+              )}
+              <div className="text-sm text-gray-500">
+                {ev.allDay ? ev.start.split('T')[0] : new Date(ev.start).toLocaleString()}
+                {ev.location && <span> @ {ev.location}</span>}
+              </div>
+              {ev.description && <div className="text-sm mt-1">{ev.description}</div>}
+            </div>
+            <div className="flex gap-2">
+              <Button size="sm" onClick={() => {
+                setTitle(ev.title)
+                setDescription(ev.description || '')
+                setLocation(ev.location || '')
+                setUrl(ev.url || '')
+                setStart(ev.start)
+                setEnd(ev.end || '')
+                setAllDay(ev.allDay || false)
+                setEditingId(ev.id)
+                setDialogOpen(true)
+              }}>Edit</Button>
+              <Button variant="secondary" size="sm" onClick={() => handleDelete(ev.id)}>Delete</Button>
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      {/* Add/Edit Dialog */}
+      <Dialog open={dialogOpen} onOpenChange={val => { if (!val) resetForm(); setDialogOpen(val) }}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{editingId ? 'Edit Event' : 'Add Event'}</DialogTitle>
+          </DialogHeader>
+          <Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
+          <textarea className="border rounded p-2 w-full" placeholder="Description"
+            value={description} onChange={e => setDescription(e.target.value)} />
+          <Input placeholder="Location" value={location} onChange={e => setLocation(e.target.value)} />
+          <Input placeholder="URL" value={url} onChange={e => setUrl(e.target.value)} />
+          <RecurrencePicker value={recurrenceRule} onChange={setRecurrenceRule} />
+
+          <label className="flex items-center gap-2 mt-2">
+            <input type="checkbox" checked={allDay} onChange={e => setAllDay(e.target.checked)} />
+            All day event
+          </label>
+          {!allDay ? (
+            <>
+              <Input type="datetime-local" value={start} onChange={e => setStart(e.target.value)} />
+              <Input type="datetime-local" value={end} onChange={e => setEnd(e.target.value)} />
+            </>
+          ) : (
+            <>
+              <Input type="date" value={start ? start.split('T')[0] : ''} onChange={e => setStart(e.target.value)} />
+              <Input type="date" value={end ? end.split('T')[0] : ''} onChange={e => setEnd(e.target.value)} />
+            </>
+          )}
+          <DialogFooter>
+            <Button onClick={handleSave}>{editingId ? 'Update' : 'Save'}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

src/components/recurrence-picker.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { useState } from 'react'
+import { Input } from '@/components/ui/input'
+
+type Recurrence = {
+  freq: 'NONE' | 'DAILY' | 'WEEKLY' | 'MONTHLY'
+  interval: number
+  byDay?: string[]
+  count?: number
+  until?: string
+}
+
+interface Props {
+  value?: string
+  onChange: (rrule: string | undefined) => void
+}
+
+export function RecurrencePicker({ value, onChange }: Props) {
+  const [rec, setRec] = useState<Recurrence>(() => {
+    // If existing rrule, parse minimally (for simplicity we only rehydrate FREQ and INTERVAL)
+    if (value) {
+      const parts = Object.fromEntries(
+        value.split(';').map(p => p.split('='))
+      )
+      return {
+        freq: parts.FREQ || 'NONE',
+        interval: parts.INTERVAL ? parseInt(parts.INTERVAL, 10) : 1,
+        byDay: parts.BYDAY ? parts.BYDAY.split(',') : [],
+        count: parts.COUNT ? parseInt(parts.COUNT, 10) : undefined,
+        until: parts.UNTIL
+      }
+    }
+    return { freq: 'NONE', interval: 1 }
+  })
+
+  const update = (updates: Partial<Recurrence>) => {
+    const newRec = { ...rec, ...updates }
+    setRec(newRec)
+
+    if (newRec.freq === 'NONE') {
+      onChange(undefined)
+      return
+    }
+
+    // Build RRULE string
+    let rrule = `FREQ=${newRec.freq};INTERVAL=${newRec.interval}`
+    if (newRec.freq === 'WEEKLY' && newRec.byDay?.length) {
+      rrule += `;BYDAY=${newRec.byDay.join(',')}`
+    }
+    if (newRec.count) rrule += `;COUNT=${newRec.count}`
+    if (newRec.until) rrule += `;UNTIL=${newRec.until.replace(/-/g, '')}T000000Z`
+
+    onChange(rrule)
+  }
+
+  const toggleDay = (day: string) => {
+    const byDay = rec.byDay || []
+    const newByDay = byDay.includes(day)
+      ? byDay.filter(d => d !== day)
+      : [...byDay, day]
+    update({ byDay: newByDay })
+  }
+
+  return (
+    <div className="space-y-2 border rounded p-2 mt-2 bg-gray-50">
+      <label className="block font-semibold text-sm">Repeats</label>
+      <select
+        className="border p-1 rounded w-full"
+        value={rec.freq}
+        onChange={e => update({ freq: e.target.value as "NONE" | "DAILY" | "WEEKLY" | "MONTHLY" | undefined })}
+      >
+        <option value="NONE">Does not repeat</option>
+        <option value="DAILY">Daily</option>
+        <option value="WEEKLY">Weekly</option>
+        <option value="MONTHLY">Monthly</option>
+      </select>
+
+      {rec.freq !== 'NONE' && (
+        <>
+          <label className="block text-sm">
+            Interval (every N {rec.freq === 'DAILY' ? 'days' : rec.freq === 'WEEKLY' ? 'weeks' : 'months'})
+          </label>
+          <Input
+            type="number"
+            min={1}
+            value={rec.interval}
+            onChange={e => update({ interval: parseInt(e.target.value, 10) || 1 })}
+          />
+
+          {rec.freq === 'WEEKLY' && (
+            <div className="flex gap-2 mt-2">
+              {['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'].map(day => (
+                <label key={day} className="flex items-center gap-1">
+                  <input
+                    type="checkbox"
+                    checked={rec.byDay?.includes(day)}
+                    onChange={() => toggleDay(day)}
+                  />
+                  {day}
+                </label>
+              ))}
+            </div>
+          )}
+
+          <div className="flex gap-2 mt-2">
+            <div>
+              <label className="text-sm">End after count</label>
+              <Input
+                type="number"
+                placeholder="e.g. 10"
+                value={rec.count || ''}
+                onChange={e => update({ count: e.target.value ? parseInt(e.target.value, 10) : undefined })}
+              />
+            </div>
+            <div>
+              <label className="text-sm">End by date</label>
+              <Input
+                type="date"
+                value={rec.until || ''}
+                onChange={e => update({ until: e.target.value || undefined })}
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/lib/db.ts

@@ -0,0 +1,55 @@
+import { openDB, DBSchema, IDBPDatabase } from "idb";
+import { type CalendarEvent } from "./types";
+
+interface ICalDB extends DBSchema {
+	events: {
+		key: string;
+		value: CalendarEvent;
+	};
+}
+
+let dbPromise: Promise<IDBPDatabase<ICalDB>> | null = null;
+
+async function initDB() {
+	return openDB<ICalDB>("icalPWA", 1, {
+		upgrade(db) {
+			if (!db.objectStoreNames.contains("events")) {
+				db.createObjectStore("events", { keyPath: "id" });
+			}
+		},
+	});
+}
+
+// Get the database in a browser-safe way
+export async function getDB() {
+	if (typeof window === "undefined") return null;
+	if (!dbPromise) {
+		dbPromise = initDB();
+	}
+	return dbPromise;
+}
+
+// CRUD operations — all SSR-safe
+export async function getAllEvents() {
+	const db = await getDB();
+	if (!db) return [];
+	return db.getAll("events");
+}
+
+export async function addEvent(event: ICalDB["events"]["value"]) {
+	const db = await getDB();
+	if (!db) return;
+	return db.put("events", event);
+}
+
+export async function deleteEvent(id: string) {
+	const db = await getDB();
+	if (!db) return;
+	return db.delete("events", id);
+}
+
+export async function clearEvents() {
+	const db = await getDB();
+	if (!db) return;
+	return db.clear("events");
+}

src/lib/ical-helpers.ts

@@ -0,0 +1,29 @@
+import ICAL from "ical.js";
+
+export function isRecur(val: unknown): val is ICAL.Recur {
+	return typeof val === "object" && val instanceof ICAL.Recur;
+}
+
+export function isTime(val: unknown): val is ICAL.Time {
+	return typeof val === "object" && val instanceof ICAL.Time;
+}
+
+// export function isGeo(val: unknown): val is ICAL.Geo {
+// 	return typeof val === "object" && val instanceof ICAL.Geo;
+// }
+
+export function isUtcOffset(val: unknown): val is ICAL.UtcOffset {
+	return typeof val === "object" && val instanceof ICAL.UtcOffset;
+}
+
+export function isBinary(val: unknown): val is ICAL.Binary {
+	return typeof val === "object" && val instanceof ICAL.Binary;
+}
+
+export function isDuration(val: unknown): val is ICAL.Duration {
+	return typeof val === "object" && val instanceof ICAL.Duration;
+}
+
+export function isPeriod(val: unknown): val is ICAL.Period {
+	return typeof val === "object" && val instanceof ICAL.Period;
+}

src/lib/ical.ts

@@ -0,0 +1,107 @@
+import ICAL from "ical.js";
+import type { CalendarEvent } from "@/lib/types";
+import {
+	isRecur,
+	isTime,
+	isUtcOffset,
+	isBinary,
+	isDuration,
+	isPeriod,
+} from "./ical-helpers";
+
+function safeValueToString(
+	val: ReturnType<ICAL.Component["getFirstPropertyValue"]>,
+): string | undefined {
+	if (val === undefined) return undefined;
+	if (typeof val === "string") return val;
+	if (isTime(val)) return val.toJSDate().toISOString();
+	if (isRecur(val)) return val.toString();
+	if (isUtcOffset(val)) return val.toString(); // already "±HHMM"
+	if (isBinary(val) || isDuration(val) || isPeriod(val)) return val.toString();
+	return undefined;
+}
+
+export function parseICS(icsString: string): CalendarEvent[] {
+	const jcalData = ICAL.parse(icsString);
+	const comp = new ICAL.Component(jcalData);
+	const vevents = comp.getAllSubcomponents("vevent");
+
+	return vevents.map((v) => {
+		const ev = new ICAL.Event(v);
+
+		return {
+			id: ev.uid || crypto.randomUUID(),
+			title: ev.summary || "Untitled Event",
+			description: ev.description || "",
+			location: ev.location || "",
+			url: safeValueToString(v.getFirstPropertyValue("url")),
+			start: ev.startDate.toJSDate().toISOString(),
+			end: ev.endDate ? ev.endDate.toJSDate().toISOString() : undefined,
+			allDay: ev.startDate.isDate,
+			createdAt: safeValueToString(v.getFirstPropertyValue("dtstamp")),
+			lastModified: safeValueToString(v.getFirstPropertyValue("last-modified")),
+			recurrenceRule: safeValueToString(v.getFirstPropertyValue("rrule")),
+		};
+	});
+}
+
+export function generateICS(events: CalendarEvent[]): string {
+	const comp = new ICAL.Component(["vcalendar", [], []]);
+	comp.addPropertyWithValue("version", "2.0");
+	comp.addPropertyWithValue("prodid", "-//iCalPWA//EN");
+
+	events.forEach((ev) => {
+		const vevent = new ICAL.Component("vevent");
+		vevent.addPropertyWithValue("uid", ev.id);
+		vevent.addPropertyWithValue("summary", ev.title);
+		if (ev.description)
+			vevent.addPropertyWithValue("description", ev.description);
+		if (ev.location) vevent.addPropertyWithValue("location", ev.location);
+		if (ev.url) vevent.addPropertyWithValue("url", ev.url);
+
+		if (ev.allDay) {
+			vevent.addPropertyWithValue(
+				"dtstart",
+				ICAL.Time.fromDateString(ev.start.split("T")[0]),
+			);
+			if (ev.end)
+				vevent.addPropertyWithValue(
+					"dtend",
+					ICAL.Time.fromDateString(ev.end.split("T")[0]),
+				);
+		} else {
+			vevent.addPropertyWithValue(
+				"dtstart",
+				ICAL.Time.fromJSDate(new Date(ev.start)),
+			);
+			if (ev.end) {
+				vevent.addPropertyWithValue(
+					"dtend",
+					ICAL.Time.fromJSDate(new Date(ev.end)),
+				);
+			}
+		}
+
+		vevent.addPropertyWithValue(
+			"dtstamp",
+			ICAL.Time.fromJSDate(ev.createdAt ? new Date(ev.createdAt) : new Date()),
+		);
+		if (ev.lastModified) {
+			vevent.addPropertyWithValue(
+				"last-modified",
+				ICAL.Time.fromJSDate(new Date(ev.lastModified)),
+			);
+		}
+
+		if (ev.recurrenceRule) {
+			vevent.addPropertyWithValue(
+				"rrule",
+				ICAL.Recur.fromString(ev.recurrenceRule),
+			);
+		}
+
+		comp.addSubcomponent(vevent);
+	});
+
+	return comp.toString();
+}

src/lib/types.ts

@@ -0,0 +1,14 @@
+export type CalendarEvent = {
+	id: string;
+	title: string;
+	description?: string;
+	location?: string;
+	url?: string;
+	start: string;
+	end?: string;
+	allDay?: boolean;
+	createdAt?: string;
+	lastModified?: string;
+
+	recurrenceRule?: string;
+};

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}