@nomideusz/svelte-calendar 0.1.0 → 0.1.1

package/README.md

@@ -1,6 +1,6 @@
-# @svelte-calendar/core
+# @nomideusz/svelte-calendar
 
-A themeable, pluggable **Svelte 5** calendar component library with **Day** and **Week** views  ready for yoga studios, tour bookings, concerts, language schools, and more.
+A themeable, pluggable **Svelte 5** calendar component library with **Day** and **Week** views — ready for yoga studios, tour bookings, concerts, language schools, and more.
 
 ## Views — Concept-Paired
 
@@ -9,14 +9,15 @@ Switching between Day and Week preserves the active concept.
 
 | Concept | Day View | Week View | Description |
 |---------|----------|-----------|-------------|
-| **Grid** | DayTimeline (horizontal) | WeekGrid (vertical) | The primary planner — time blocks on a scrollable grid. |
-| **Agenda** | DayAgenda | WeekAgenda | List / feed — Done, Now, Next (day) or grouped-by-day scroll (week). |
+| **Grid** | DayGrid | WeekGrid | The primary planner — time blocks on a scrollable grid. |
+| **Timeline** | DayTimeline | — | Horizontal day timeline. Day-only. |
+| **Agenda** | Agenda `mode="day"` | Agenda `mode="week"` | List / feed — Done, Now, Next (day) or grouped-by-day scroll (week). |
 | **Heatmap** | — | WeekHeatmap | Density view — 24 cells per day showing busy/free intensity. Week-only. |
 
 ## Installation
 
 ```bash
-npm install @svelte-calendar/core
+pnpm add @nomideusz/svelte-calendar
 ```
 
 > **Peer dependency:** Svelte 5 (`^5.0.0`)
@@ -27,15 +28,15 @@ npm install @svelte-calendar/core
 <script lang="ts">
   import {
     Calendar,
+    DayGrid,
     DayTimeline,
-    DayAgenda,
+    Agenda,
     WeekGrid,
-    WeekAgenda,
     WeekHeatmap,
     createMemoryAdapter,
     midnight,
-  } from '@svelte-calendar/core';
-  import type { CalendarView, TimelineEvent } from '@svelte-calendar/core';
+  } from '@nomideusz/svelte-calendar';
+  import type { CalendarView, TimelineEvent } from '@nomideusz/svelte-calendar';
 
   const events: TimelineEvent[] = [
     { id: '1', title: 'Yoga Flow', start: new Date('2025-03-01T09:00'), end: new Date('2025-03-01T10:00'), color: '#818cf8' },
@@ -47,10 +48,10 @@ npm install @svelte-calendar/core
 
   // Concepts are paired by label — switching Day↔Week preserves the concept
   const views: CalendarView[] = [
-    { id: 'day-grid',     label: 'Grid',    granularity: 'day',  component: DayTimeline },
+    { id: 'day-grid',     label: 'Grid',    granularity: 'day',  component: DayGrid },
     { id: 'week-grid',    label: 'Grid',    granularity: 'week', component: WeekGrid },
-    { id: 'day-agenda',   label: 'Agenda',  granularity: 'day',  component: DayAgenda },
-    { id: 'week-agenda',  label: 'Agenda',  granularity: 'week', component: WeekAgenda },
+    { id: 'day-agenda',   label: 'Agenda',  granularity: 'day',  component: Agenda, props: { mode: 'day' } },
+    { id: 'week-agenda',  label: 'Agenda',  granularity: 'week', component: Agenda, props: { mode: 'week' } },
     { id: 'week-heatmap', label: 'Heatmap', granularity: 'week', component: WeekHeatmap },
   ];
 </script>
@@ -66,6 +67,27 @@ npm install @svelte-calendar/core
 />
 ```
 
+## Settings Panel
+
+The `Settings` component provides a theme picker and dynamic fields for controlling view parameters:
+
+```svelte
+<script lang="ts">
+  import { Settings } from '@nomideusz/svelte-calendar';
+  import type { SettingsField, PresetName } from '@nomideusz/svelte-calendar';
+
+  let theme: PresetName = $state('midnight');
+  let values = $state({ hourHeight: 60, elastic: true });
+
+  const fields: SettingsField[] = [
+    { key: 'hourHeight', label: 'Hour Height', type: 'range', min: 40, max: 120, step: 5 },
+    { key: 'elastic', label: 'Elastic Compression', type: 'toggle' },
+  ];
+</script>
+
+<Settings {fields} bind:values bind:theme />
+```
+
 ## Themes
 
 Three built-in presets  each view reads from the same `--dt-*` CSS custom property contract:
@@ -78,7 +100,7 @@ Three built-in presets  each view reads from the same `--dt-*` CSS custom proper
 
 ```svelte
 <script>
-  import { midnight, parchment, indigo, presets } from '@svelte-calendar/core';
+  import { midnight, parchment, indigo, presets } from '@nomideusz/svelte-calendar';
 </script>
 
 <!-- Apply directly -->
@@ -107,13 +129,13 @@ const custom = `
 
 ```
 src/lib/
-+-- core/          # Clock, time utils, locale, types
-+-- engine/        # Reactive state: event-store, view-state, selection, drag
-+-- adapters/      # Data layer: memory adapter, REST adapter
-+-- primitives/    # Low-level UI atoms: NowIndicator, EventBlock, TimeGutter...
-+-- calendar/      # Calendar shell, Toolbar
-+-- views/         # The 6 view components (day/ + week/)
-+-- theme/         # Preset themes and token definitions
+├── core/          # Clock, time utils, locale, types
+├── engine/        # Reactive state: event-store, view-state, selection, drag
+├── adapters/      # Data layer: memory adapter, REST adapter
+├── primitives/    # Low-level UI atoms: NowIndicator, EventBlock, TimeGutter...
+├── calendar/      # Calendar shell, Toolbar
+├── views/         # View components (day/, week/, agenda/, settings/)
+└── theme/         # Preset themes and token definitions
 ```
 
 ## Engine
@@ -124,19 +146,19 @@ import {
   createViewState,
   createSelection,
   createDragState,
-} from '@svelte-calendar/core';
+} from '@nomideusz/svelte-calendar';
 ```
 
-- **`createEventStore(adapter)`**  reactive event list with fetch/add/update/remove
-- **`createViewState(options)`**  current view, date range, navigation (prev/next/today)
-- **`createSelection()`**  selected event tracking
-- **`createDragState()`**  drag-to-create and drag-to-move state machine
+- **`createEventStore(adapter)`** — reactive event list with fetch/add/update/remove
+- **`createViewState(options)`** — current view, date range, navigation (prev/next/today)
+- **`createSelection()`** — selected event tracking
+- **`createDragState()`** — drag-to-create and drag-to-move state machine
 
 ## Adapters
 
 | Adapter | Use |
 |---------|-----|
-| `createMemoryAdapter(events)` | In-memory  great for demos and prototyping |
+| `createMemoryAdapter(events)` | In-memory — great for demos and prototyping |
 | `createRestAdapter(options)` | Fetch from a REST API with configurable endpoints |
 
 ## Standalone Views
@@ -150,6 +172,9 @@ Each view works independently without the Calendar shell:
 <!-- Vertical day grid with elastic night compression -->
 <DayGrid style={midnight} events={events} height={600} elastic />
 
+<!-- Agenda in day mode -->
+<Agenda mode="day" events={events} height={520} />
+
 <!-- Week density heatmap -->
 <WeekHeatmap style={parchment} events={events} height={320} />
 ```
@@ -157,10 +182,10 @@ Each view works independently without the Calendar shell:
 ## Development
 
 ```bash
-npm install
-npm run dev          # SvelteKit dev server (demo app)
-npm run check        # Type check
-npm run package      # Build the library into dist/
+pnpm install
+pnpm dev             # SvelteKit dev server (demo app)
+pnpm check           # Type check
+pnpm run package     # Build the library into dist/
 ```
 
 ## License

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
   "type": "module",
   "license": "MIT",