@dayflow/svelte 3.0.0

package/dist/index.js

@@ -0,0 +1,218 @@
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+import { onMount, tick, onDestroy } from 'svelte';
+import { CalendarApp } from '@dayflow/core';
+export * from '@dayflow/core';
+export { CalendarApp, CalendarRegistry, ViewType, createDayView, createDragPlugin, createEventsPlugin, createMonthView, createWeekView, createYearView } from '@dayflow/core';
+import { writable } from 'svelte/store';
+
+var root_4 = $.from_html(`<div><!></div>`);
+var root_1 = $.from_html(`<div class="df-calendar-wrapper"></div> <!>`, 1);
+var root_5 = $.from_html(`<div class="df-calendar-wrapper df-calendar-ssr-placeholder"></div>`);
+
+function DayFlowCalendar($$anchor, $$props) {
+	$.push($$props, true);
+
+	let eventContent = $.prop($$props, 'eventContent', 3, null),
+		eventDetailContent = $.prop($$props, 'eventDetailContent', 3, null),
+		eventDetailDialog = $.prop($$props, 'eventDetailDialog', 3, null),
+		headerContent = $.prop($$props, 'headerContent', 3, null),
+		createCalendarDialog = $.prop($$props, 'createCalendarDialog', 3, null),
+		titleBarSlot = $.prop($$props, 'titleBarSlot', 3, null),
+		colorPicker = $.prop($$props, 'colorPicker', 3, null),
+		colorPickerWrapper = $.prop($$props, 'colorPickerWrapper', 3, null);
+
+	let container = $.state(void 0);
+	let renderer;
+	let customRenderings = $.state($.proxy([]));
+	let unsubscribe;
+	let mounted = $.state(false);
+
+	// Guard for browser environment
+	const isBrowser = typeof window !== 'undefined';
+
+	const app = $.derived(() => $$props.calendar.app || $$props.calendar);
+
+	const renderProps = $.derived(() => ({
+		eventContent: eventContent(),
+		eventDetailContent: eventDetailContent(),
+		eventDetailDialog: eventDetailDialog(),
+		headerContent: headerContent(),
+		createCalendarDialog: createCalendarDialog(),
+		titleBarSlot: titleBarSlot(),
+		colorPicker: colorPicker(),
+		colorPickerWrapper: colorPickerWrapper()
+	}));
+
+	onMount(async () => {
+		if (!$.get(container)) return;
+
+		await tick();
+
+		const { CalendarRenderer } = await import('@dayflow/core');
+
+		renderer = new CalendarRenderer($.get(app));
+		renderer.mount($.get(container));
+
+		unsubscribe = renderer.getCustomRenderingStore().subscribe((renderings) => {
+			$.set(customRenderings, Array.from(renderings.values()), true);
+		});
+
+		const activeOverrides = Object.keys($.get(renderProps)).filter((key) => $.get(renderProps)[key] !== null);
+
+		renderer.getCustomRenderingStore().setOverrides(activeOverrides);
+		$.set(mounted, true);
+	});
+
+	onDestroy(() => {
+		if (unsubscribe) unsubscribe();
+		if (renderer) renderer.unmount();
+	});
+
+	function portal(node, target) {
+		if (!target || !node || !isBrowser) return;
+
+		target.appendChild(node);
+
+		return {
+			destroy() {
+				if (node.parentNode === target) {
+					target.removeChild(node);
+				}
+			}
+		};
+	}
+
+	var fragment = $.comment();
+	var node_1 = $.first_child(fragment);
+
+	{
+		var consequent_2 = ($$anchor) => {
+			var fragment_1 = root_1();
+			var div = $.first_child(fragment_1);
+
+			$.bind_this(div, ($$value) => $.set(container, $$value), () => $.get(container));
+
+			var node_2 = $.sibling(div, 2);
+
+			{
+				var consequent_1 = ($$anchor) => {
+					var fragment_2 = $.comment();
+					var node_3 = $.first_child(fragment_2);
+
+					$.each(node_3, 17, () => $.get(customRenderings), (rendering) => rendering.id, ($$anchor, rendering) => {
+						const Component = $.derived(() => $.get(renderProps)[$.get(rendering).generatorName]);
+						var fragment_3 = $.comment();
+						var node_4 = $.first_child(fragment_3);
+
+						{
+							var consequent = ($$anchor) => {
+								var div_1 = root_4();
+								var node_5 = $.child(div_1);
+
+								$.component(node_5, () => $.get(Component), ($$anchor, Component_1) => {
+									Component_1($$anchor, $.spread_props(() => $.get(rendering).generatorArgs));
+								});
+
+								$.reset(div_1);
+								$.action(div_1, ($$node, $$action_arg) => portal?.($$node, $$action_arg), () => $.get(rendering).containerEl);
+								$.append($$anchor, div_1);
+							};
+
+							$.if(node_4, ($$render) => {
+								if ($.get(Component) && $.get(rendering).containerEl) $$render(consequent);
+							});
+						}
+
+						$.append($$anchor, fragment_3);
+					});
+
+					$.append($$anchor, fragment_2);
+				};
+
+				$.if(node_2, ($$render) => {
+					if ($.get(mounted)) $$render(consequent_1);
+				});
+			}
+
+			$.append($$anchor, fragment_1);
+		};
+
+		var alternate = ($$anchor) => {
+			var div_2 = root_5();
+
+			$.append($$anchor, div_2);
+		};
+
+		$.if(node_1, ($$render) => {
+			if (isBrowser) $$render(consequent_2); else $$render(alternate, false);
+		});
+	}
+
+	$.append($$anchor, fragment);
+	$.pop();
+}
+
+function useCalendarApp(config) {
+  const app = new CalendarApp(config);
+  const stateStore = writable({
+    currentView: app.state.currentView,
+    currentDate: app.state.currentDate,
+    events: app.getEvents()
+  });
+  app.subscribe((updatedApp) => {
+    stateStore.set({
+      currentView: updatedApp.state.currentView,
+      currentDate: updatedApp.state.currentDate,
+      events: updatedApp.getEvents()
+    });
+  });
+  const result = {
+    app,
+    get currentView() {
+      let val;
+      stateStore.subscribe((s) => val = s.currentView)();
+      return val;
+    },
+    get currentDate() {
+      let val;
+      stateStore.subscribe((s) => val = s.currentDate)();
+      return val;
+    },
+    get events() {
+      let val;
+      stateStore.subscribe((s) => val = s.events)();
+      return val;
+    },
+    applyEventsChanges: app.applyEventsChanges.bind(app),
+    changeView: app.changeView.bind(app),
+    setCurrentDate: app.setCurrentDate.bind(app),
+    addEvent: app.addEvent.bind(app),
+    updateEvent: app.updateEvent.bind(app),
+    deleteEvent: app.deleteEvent.bind(app),
+    undo: app.undo.bind(app),
+    goToToday: app.goToToday.bind(app),
+    goToPrevious: app.goToPrevious.bind(app),
+    goToNext: app.goToNext.bind(app),
+    selectDate: app.selectDate.bind(app),
+    getCalendars: app.getCalendars.bind(app),
+    createCalendar: app.createCalendar.bind(app),
+    mergeCalendars: app.mergeCalendars.bind(app),
+    setCalendarVisibility: app.setCalendarVisibility.bind(app),
+    setAllCalendarsVisibility: app.setAllCalendarsVisibility.bind(app),
+    getAllEvents: app.getAllEvents.bind(app),
+    highlightEvent: app.highlightEvent.bind(app),
+    setVisibleMonth: app.setVisibleMonth.bind(app),
+    getVisibleMonth: app.getVisibleMonth.bind(app),
+    get sidebarConfig() {
+      return app.getSidebarConfig();
+    },
+    get readOnlyConfig() {
+      return app.getReadOnlyConfig();
+    }
+  };
+  return result;
+}
+
+export { DayFlowCalendar, DayFlowCalendar as default, useCalendarApp };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/DayFlowCalendar.svelte","../src/useCalendarApp.ts"],"sourcesContent":["<script lang=\"ts\">\n  import { onMount, onDestroy, tick } from 'svelte';\n  import {\n    CalendarRenderer,\n    type ICalendarApp,\n    type UseCalendarAppReturn,\n    type CustomRendering,\n  } from '@dayflow/core';\n\n  let {\n    calendar,\n    eventContent = null,\n    eventDetailContent = null,\n    eventDetailDialog = null,\n    headerContent = null,\n    createCalendarDialog = null,\n    titleBarSlot = null,\n    colorPicker = null,\n    colorPickerWrapper = null,\n  } = $props<{\n    calendar: ICalendarApp | UseCalendarAppReturn;\n    eventContent?: any;\n    eventDetailContent?: any;\n    eventDetailDialog?: any;\n    headerContent?: any;\n    createCalendarDialog?: any;\n    titleBarSlot?: any;\n    colorPicker?: any;\n    colorPickerWrapper?: any;\n  }>();\n\n  let container: HTMLElement | undefined = $state();\n  let renderer: CalendarRenderer | undefined;\n  let customRenderings: CustomRendering[] = $state([]);\n  let unsubscribe: (() => void) | undefined;\n  let mounted = $state(false);\n\n  // Guard for browser environment\n  const isBrowser = typeof window !== 'undefined';\n\n  const app = $derived((calendar as any).app || calendar);\n\n  const renderProps = $derived({\n    eventContent,\n    eventDetailContent,\n    eventDetailDialog,\n    headerContent,\n    createCalendarDialog,\n    titleBarSlot,\n    colorPicker,\n    colorPickerWrapper,\n  } as Record<string, any>);\n\n  onMount(async () => {\n    if (!container) return;\n\n    await tick();\n\n    const { CalendarRenderer } = await import('@dayflow/core');\n\n    renderer = new CalendarRenderer(app);\n    renderer.mount(container);\n\n    unsubscribe = renderer.getCustomRenderingStore().subscribe(renderings => {\n      customRenderings = Array.from(renderings.values());\n    });\n\n    const activeOverrides = Object.keys(renderProps).filter(\n      key => renderProps[key] !== null\n    );\n    renderer.getCustomRenderingStore().setOverrides(activeOverrides);\n\n    mounted = true;\n  });\n\n  onDestroy(() => {\n    if (unsubscribe) unsubscribe();\n    if (renderer) renderer.unmount();\n  });\n\n  function portal(node: HTMLElement, target: HTMLElement) {\n    if (!target || !node || !isBrowser) return;\n    target.appendChild(node);\n    return {\n      destroy() {\n        if (node.parentNode === target) {\n          target.removeChild(node);\n        }\n      },\n    };\n  }\n</script>\n\n{#if isBrowser}\n  <div bind:this={container} class=\"df-calendar-wrapper\"></div>\n\n  {#if mounted}\n    {#each customRenderings as rendering (rendering.id)}\n      {@const Component = renderProps[rendering.generatorName]}\n      {#if Component && rendering.containerEl}\n        <div use:portal={rendering.containerEl}>\n          <Component {...rendering.generatorArgs} />\n        </div>\n      {/if}\n    {/each}\n  {/if}\n{:else}\n  <!-- SSR Placeholder -->\n  <div class=\"df-calendar-wrapper df-calendar-ssr-placeholder\"></div>\n{/if}\n","import { writable } from 'svelte/store';\nimport type { Writable } from 'svelte/store';\nimport { CalendarApp } from '@dayflow/core';\nimport type {\n  CalendarAppConfig,\n  UseCalendarAppReturn,\n  ICalendarApp,\n} from '@dayflow/core';\n\nexport function useCalendarApp(\n  config: CalendarAppConfig\n): UseCalendarAppReturn {\n  const app = new CalendarApp(config);\n\n  // Create a store for the parts of state we want to be reactive in Svelte\n  const stateStore = writable({\n    currentView: app.state.currentView,\n    currentDate: app.state.currentDate,\n    events: app.getEvents(),\n  });\n\n  const unsubscribe = app.subscribe(updatedApp => {\n    stateStore.set({\n      currentView: updatedApp.state.currentView,\n      currentDate: updatedApp.state.currentDate,\n      events: updatedApp.getEvents(),\n    });\n  });\n\n  // Proxy the state properties\n  const result = {\n    app,\n    get currentView() {\n      let val;\n      stateStore.subscribe(s => (val = s.currentView))();\n      return val;\n    },\n    get currentDate() {\n      let val;\n      stateStore.subscribe(s => (val = s.currentDate))();\n      return val;\n    },\n    get events() {\n      let val;\n      stateStore.subscribe(s => (val = s.events))();\n      return val;\n    },\n\n    applyEventsChanges: app.applyEventsChanges.bind(app),\n    changeView: app.changeView.bind(app),\n    setCurrentDate: app.setCurrentDate.bind(app),\n    addEvent: app.addEvent.bind(app),\n    updateEvent: app.updateEvent.bind(app),\n    deleteEvent: app.deleteEvent.bind(app),\n    undo: app.undo.bind(app),\n    goToToday: app.goToToday.bind(app),\n    goToPrevious: app.goToPrevious.bind(app),\n    goToNext: app.goToNext.bind(app),\n    selectDate: app.selectDate.bind(app),\n    getCalendars: app.getCalendars.bind(app),\n    createCalendar: app.createCalendar.bind(app),\n    mergeCalendars: app.mergeCalendars.bind(app),\n    setCalendarVisibility: app.setCalendarVisibility.bind(app),\n    setAllCalendarsVisibility: app.setAllCalendarsVisibility.bind(app),\n    getAllEvents: app.getAllEvents.bind(app),\n    highlightEvent: app.highlightEvent.bind(app),\n    setVisibleMonth: app.setVisibleMonth.bind(app),\n    getVisibleMonth: app.getVisibleMonth.bind(app),\n    get sidebarConfig() {\n      return app.getSidebarConfig();\n    },\n    get readOnlyConfig() {\n      return app.getReadOnlyConfig();\n    },\n  } as unknown as UseCalendarAppReturn;\n\n  return result;\n}\n"],"names":[],"mappings":"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"}

package/dist/index.ssr.js

@@ -0,0 +1,114 @@
+import 'svelte/internal/server';
+import { onMount, onDestroy } from 'svelte';
+import { CalendarApp } from '@dayflow/core';
+export * from '@dayflow/core';
+export { CalendarApp, CalendarRegistry, ViewType, createDayView, createDragPlugin, createEventsPlugin, createMonthView, createWeekView, createYearView } from '@dayflow/core';
+import { writable } from 'svelte/store';
+
+function DayFlowCalendar($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let {
+			calendar,
+			eventContent = null,
+			eventDetailContent = null,
+			eventDetailDialog = null,
+			headerContent = null,
+			createCalendarDialog = null,
+			titleBarSlot = null,
+			colorPicker = null,
+			colorPickerWrapper = null
+		} = $$props;
+
+		// Guard for browser environment
+		const isBrowser = typeof window !== 'undefined';
+
+		calendar.app || calendar;
+
+		onMount(async () => {
+			return;
+		});
+
+		onDestroy(() => {
+		});
+
+		if (isBrowser) {
+			$$renderer.push('<!--[-->');
+			$$renderer.push(`<div class="df-calendar-wrapper"></div> `);
+
+			{
+				$$renderer.push('<!--[!-->');
+			}
+
+			$$renderer.push(`<!--]-->`);
+		} else {
+			$$renderer.push('<!--[!-->');
+			$$renderer.push(`<div class="df-calendar-wrapper df-calendar-ssr-placeholder"></div>`);
+		}
+
+		$$renderer.push(`<!--]-->`);
+	});
+}
+
+function useCalendarApp(config) {
+  const app = new CalendarApp(config);
+  const stateStore = writable({
+    currentView: app.state.currentView,
+    currentDate: app.state.currentDate,
+    events: app.getEvents()
+  });
+  app.subscribe((updatedApp) => {
+    stateStore.set({
+      currentView: updatedApp.state.currentView,
+      currentDate: updatedApp.state.currentDate,
+      events: updatedApp.getEvents()
+    });
+  });
+  const result = {
+    app,
+    get currentView() {
+      let val;
+      stateStore.subscribe((s) => val = s.currentView)();
+      return val;
+    },
+    get currentDate() {
+      let val;
+      stateStore.subscribe((s) => val = s.currentDate)();
+      return val;
+    },
+    get events() {
+      let val;
+      stateStore.subscribe((s) => val = s.events)();
+      return val;
+    },
+    applyEventsChanges: app.applyEventsChanges.bind(app),
+    changeView: app.changeView.bind(app),
+    setCurrentDate: app.setCurrentDate.bind(app),
+    addEvent: app.addEvent.bind(app),
+    updateEvent: app.updateEvent.bind(app),
+    deleteEvent: app.deleteEvent.bind(app),
+    undo: app.undo.bind(app),
+    goToToday: app.goToToday.bind(app),
+    goToPrevious: app.goToPrevious.bind(app),
+    goToNext: app.goToNext.bind(app),
+    selectDate: app.selectDate.bind(app),
+    getCalendars: app.getCalendars.bind(app),
+    createCalendar: app.createCalendar.bind(app),
+    mergeCalendars: app.mergeCalendars.bind(app),
+    setCalendarVisibility: app.setCalendarVisibility.bind(app),
+    setAllCalendarsVisibility: app.setAllCalendarsVisibility.bind(app),
+    getAllEvents: app.getAllEvents.bind(app),
+    highlightEvent: app.highlightEvent.bind(app),
+    setVisibleMonth: app.setVisibleMonth.bind(app),
+    getVisibleMonth: app.getVisibleMonth.bind(app),
+    get sidebarConfig() {
+      return app.getSidebarConfig();
+    },
+    get readOnlyConfig() {
+      return app.getReadOnlyConfig();
+    }
+  };
+  return result;
+}
+
+export { DayFlowCalendar, DayFlowCalendar as default, useCalendarApp };
+//# sourceMappingURL=index.ssr.js.map

package/dist/index.ssr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ssr.js","sources":["../src/DayFlowCalendar.svelte","../src/useCalendarApp.ts"],"sourcesContent":["<script lang=\"ts\">\n  import { onMount, onDestroy, tick } from 'svelte';\n  import {\n    CalendarRenderer,\n    type ICalendarApp,\n    type UseCalendarAppReturn,\n    type CustomRendering,\n  } from '@dayflow/core';\n\n  let {\n    calendar,\n    eventContent = null,\n    eventDetailContent = null,\n    eventDetailDialog = null,\n    headerContent = null,\n    createCalendarDialog = null,\n    titleBarSlot = null,\n    colorPicker = null,\n    colorPickerWrapper = null,\n  } = $props<{\n    calendar: ICalendarApp | UseCalendarAppReturn;\n    eventContent?: any;\n    eventDetailContent?: any;\n    eventDetailDialog?: any;\n    headerContent?: any;\n    createCalendarDialog?: any;\n    titleBarSlot?: any;\n    colorPicker?: any;\n    colorPickerWrapper?: any;\n  }>();\n\n  let container: HTMLElement | undefined = $state();\n  let renderer: CalendarRenderer | undefined;\n  let customRenderings: CustomRendering[] = $state([]);\n  let unsubscribe: (() => void) | undefined;\n  let mounted = $state(false);\n\n  // Guard for browser environment\n  const isBrowser = typeof window !== 'undefined';\n\n  const app = $derived((calendar as any).app || calendar);\n\n  const renderProps = $derived({\n    eventContent,\n    eventDetailContent,\n    eventDetailDialog,\n    headerContent,\n    createCalendarDialog,\n    titleBarSlot,\n    colorPicker,\n    colorPickerWrapper,\n  } as Record<string, any>);\n\n  onMount(async () => {\n    if (!container) return;\n\n    await tick();\n\n    const { CalendarRenderer } = await import('@dayflow/core');\n\n    renderer = new CalendarRenderer(app);\n    renderer.mount(container);\n\n    unsubscribe = renderer.getCustomRenderingStore().subscribe(renderings => {\n      customRenderings = Array.from(renderings.values());\n    });\n\n    const activeOverrides = Object.keys(renderProps).filter(\n      key => renderProps[key] !== null\n    );\n    renderer.getCustomRenderingStore().setOverrides(activeOverrides);\n\n    mounted = true;\n  });\n\n  onDestroy(() => {\n    if (unsubscribe) unsubscribe();\n    if (renderer) renderer.unmount();\n  });\n\n  function portal(node: HTMLElement, target: HTMLElement) {\n    if (!target || !node || !isBrowser) return;\n    target.appendChild(node);\n    return {\n      destroy() {\n        if (node.parentNode === target) {\n          target.removeChild(node);\n        }\n      },\n    };\n  }\n</script>\n\n{#if isBrowser}\n  <div bind:this={container} class=\"df-calendar-wrapper\"></div>\n\n  {#if mounted}\n    {#each customRenderings as rendering (rendering.id)}\n      {@const Component = renderProps[rendering.generatorName]}\n      {#if Component && rendering.containerEl}\n        <div use:portal={rendering.containerEl}>\n          <Component {...rendering.generatorArgs} />\n        </div>\n      {/if}\n    {/each}\n  {/if}\n{:else}\n  <!-- SSR Placeholder -->\n  <div class=\"df-calendar-wrapper df-calendar-ssr-placeholder\"></div>\n{/if}\n","import { writable } from 'svelte/store';\nimport type { Writable } from 'svelte/store';\nimport { CalendarApp } from '@dayflow/core';\nimport type {\n  CalendarAppConfig,\n  UseCalendarAppReturn,\n  ICalendarApp,\n} from '@dayflow/core';\n\nexport function useCalendarApp(\n  config: CalendarAppConfig\n): UseCalendarAppReturn {\n  const app = new CalendarApp(config);\n\n  // Create a store for the parts of state we want to be reactive in Svelte\n  const stateStore = writable({\n    currentView: app.state.currentView,\n    currentDate: app.state.currentDate,\n    events: app.getEvents(),\n  });\n\n  const unsubscribe = app.subscribe(updatedApp => {\n    stateStore.set({\n      currentView: updatedApp.state.currentView,\n      currentDate: updatedApp.state.currentDate,\n      events: updatedApp.getEvents(),\n    });\n  });\n\n  // Proxy the state properties\n  const result = {\n    app,\n    get currentView() {\n      let val;\n      stateStore.subscribe(s => (val = s.currentView))();\n      return val;\n    },\n    get currentDate() {\n      let val;\n      stateStore.subscribe(s => (val = s.currentDate))();\n      return val;\n    },\n    get events() {\n      let val;\n      stateStore.subscribe(s => (val = s.events))();\n      return val;\n    },\n\n    applyEventsChanges: app.applyEventsChanges.bind(app),\n    changeView: app.changeView.bind(app),\n    setCurrentDate: app.setCurrentDate.bind(app),\n    addEvent: app.addEvent.bind(app),\n    updateEvent: app.updateEvent.bind(app),\n    deleteEvent: app.deleteEvent.bind(app),\n    undo: app.undo.bind(app),\n    goToToday: app.goToToday.bind(app),\n    goToPrevious: app.goToPrevious.bind(app),\n    goToNext: app.goToNext.bind(app),\n    selectDate: app.selectDate.bind(app),\n    getCalendars: app.getCalendars.bind(app),\n    createCalendar: app.createCalendar.bind(app),\n    mergeCalendars: app.mergeCalendars.bind(app),\n    setCalendarVisibility: app.setCalendarVisibility.bind(app),\n    setAllCalendarsVisibility: app.setAllCalendarsVisibility.bind(app),\n    getAllEvents: app.getAllEvents.bind(app),\n    highlightEvent: app.highlightEvent.bind(app),\n    setVisibleMonth: app.setVisibleMonth.bind(app),\n    getVisibleMonth: app.getVisibleMonth.bind(app),\n    get sidebarConfig() {\n      return app.getSidebarConfig();\n    },\n    get readOnlyConfig() {\n      return app.getReadOnlyConfig();\n    },\n  } as unknown as UseCalendarAppReturn;\n\n  return result;\n}\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,40 @@
+declare module "@dayflow/svelte" {
+    import { SvelteComponent } from "svelte";
+    import { 
+        CalendarApp, 
+        CalendarAppConfig, 
+        UseCalendarAppReturn,
+        CalendarRegistry,
+        createDragPlugin,
+        createEventsPlugin,
+        createDayView,
+        createWeekView,
+        createMonthView,
+        createYearView,
+        ViewType
+    } from "@dayflow/core";
+
+    /**
+     * Svelte store based hook for DayFlow
+     */
+    export function useCalendarApp(config: CalendarAppConfig): UseCalendarAppReturn;
+
+    /**
+     * DayFlow Calendar Svelte Component
+     */
+    export class DayFlowCalendar extends SvelteComponent<any, any, any> {}
+
+    export {
+        CalendarApp,
+        CalendarRegistry,
+        createDragPlugin,
+        createEventsPlugin,
+        createDayView,
+        createWeekView,
+        createMonthView,
+        createYearView,
+        ViewType
+    };
+
+    export default DayFlowCalendar;
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@dayflow/svelte",
+  "version": "3.0.0",
+  "type": "module",
+  "description": "Svelte adapter for DayFlow calendar",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "svelte": "src/index.ts",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "svelte": "./src/index.ts",
+      "browser": "./dist/index.js",
+      "ssr": "./dist/index.ssr.js",
+      "import": {
+        "browser": "./dist/index.js",
+        "default": "./dist/index.ssr.js"
+      },
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "index.d.ts",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "typecheck": "svelte-check"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0 || ^5.0.0",
+    "@dayflow/core": "workspace:*"
+  },
+  "devDependencies": {
+    "svelte": "^5.0.0",
+    "@dayflow/core": "workspace:*",
+    "typescript": "^5.7.2",
+    "rollup": "^4.29.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "rollup-plugin-svelte": "^7.2.2",
+    "svelte-preprocess": "^6.0.3",
+    "svelte-check": "^4.1.1",
+    "@tsconfig/svelte": "^5.0.4",
+    "rollup-plugin-esbuild": "^6.2.1",
+    "esbuild": "^0.27.3"
+  }
+}

package/src/DayFlowCalendar.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { onMount, onDestroy, tick } from 'svelte';
+  import {
+    CalendarRenderer,
+    type ICalendarApp,
+    type UseCalendarAppReturn,
+    type CustomRendering,
+  } from '@dayflow/core';
+
+  let {
+    calendar,
+    eventContent = null,
+    eventDetailContent = null,
+    eventDetailDialog = null,
+    headerContent = null,
+    createCalendarDialog = null,
+    titleBarSlot = null,
+    colorPicker = null,
+    colorPickerWrapper = null,
+  } = $props<{
+    calendar: ICalendarApp | UseCalendarAppReturn;
+    eventContent?: any;
+    eventDetailContent?: any;
+    eventDetailDialog?: any;
+    headerContent?: any;
+    createCalendarDialog?: any;
+    titleBarSlot?: any;
+    colorPicker?: any;
+    colorPickerWrapper?: any;
+  }>();
+
+  let container: HTMLElement | undefined = $state();
+  let renderer: CalendarRenderer | undefined;
+  let customRenderings: CustomRendering[] = $state([]);
+  let unsubscribe: (() => void) | undefined;
+  let mounted = $state(false);
+
+  // Guard for browser environment
+  const isBrowser = typeof window !== 'undefined';
+
+  const app = $derived((calendar as any).app || calendar);
+
+  const renderProps = $derived({
+    eventContent,
+    eventDetailContent,
+    eventDetailDialog,
+    headerContent,
+    createCalendarDialog,
+    titleBarSlot,
+    colorPicker,
+    colorPickerWrapper,
+  } as Record<string, any>);
+
+  onMount(async () => {
+    if (!container) return;
+
+    await tick();
+
+    const { CalendarRenderer } = await import('@dayflow/core');
+
+    renderer = new CalendarRenderer(app);
+    renderer.mount(container);
+
+    unsubscribe = renderer.getCustomRenderingStore().subscribe(renderings => {
+      customRenderings = Array.from(renderings.values());
+    });
+
+    const activeOverrides = Object.keys(renderProps).filter(
+      key => renderProps[key] !== null
+    );
+    renderer.getCustomRenderingStore().setOverrides(activeOverrides);
+
+    mounted = true;
+  });
+
+  onDestroy(() => {
+    if (unsubscribe) unsubscribe();
+    if (renderer) renderer.unmount();
+  });
+
+  function portal(node: HTMLElement, target: HTMLElement) {
+    if (!target || !node || !isBrowser) return;
+    target.appendChild(node);
+    return {
+      destroy() {
+        if (node.parentNode === target) {
+          target.removeChild(node);
+        }
+      },
+    };
+  }
+</script>
+
+{#if isBrowser}
+  <div bind:this={container} class="df-calendar-wrapper"></div>
+
+  {#if mounted}
+    {#each customRenderings as rendering (rendering.id)}
+      {@const Component = renderProps[rendering.generatorName]}
+      {#if Component && rendering.containerEl}
+        <div use:portal={rendering.containerEl}>
+          <Component {...rendering.generatorArgs} />
+        </div>
+      {/if}
+    {/each}
+  {/if}
+{:else}
+  <!-- SSR Placeholder -->
+  <div class="df-calendar-wrapper df-calendar-ssr-placeholder"></div>
+{/if}

package/src/index.ts

@@ -0,0 +1,18 @@
+import DayFlowCalendar from './DayFlowCalendar.svelte';
+export { DayFlowCalendar };
+export { useCalendarApp } from './useCalendarApp';
+export default DayFlowCalendar;
+
+export {
+  CalendarApp,
+  CalendarRegistry,
+  createDragPlugin,
+  createEventsPlugin,
+  createDayView,
+  createWeekView,
+  createMonthView,
+  createYearView,
+  ViewType,
+} from '@dayflow/core';
+
+export * from '@dayflow/core';

package/src/svelte-shims.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svelte" {
+    import type { Component } from "svelte";
+    const component: Component<any>;
+    export default component;
+}

package/src/useCalendarApp.ts

@@ -0,0 +1,78 @@
+import { writable } from 'svelte/store';
+import type { Writable } from 'svelte/store';
+import { CalendarApp } from '@dayflow/core';
+import type {
+  CalendarAppConfig,
+  UseCalendarAppReturn,
+  ICalendarApp,
+} from '@dayflow/core';
+
+export function useCalendarApp(
+  config: CalendarAppConfig
+): UseCalendarAppReturn {
+  const app = new CalendarApp(config);
+
+  // Create a store for the parts of state we want to be reactive in Svelte
+  const stateStore = writable({
+    currentView: app.state.currentView,
+    currentDate: app.state.currentDate,
+    events: app.getEvents(),
+  });
+
+  const unsubscribe = app.subscribe(updatedApp => {
+    stateStore.set({
+      currentView: updatedApp.state.currentView,
+      currentDate: updatedApp.state.currentDate,
+      events: updatedApp.getEvents(),
+    });
+  });
+
+  // Proxy the state properties
+  const result = {
+    app,
+    get currentView() {
+      let val;
+      stateStore.subscribe(s => (val = s.currentView))();
+      return val;
+    },
+    get currentDate() {
+      let val;
+      stateStore.subscribe(s => (val = s.currentDate))();
+      return val;
+    },
+    get events() {
+      let val;
+      stateStore.subscribe(s => (val = s.events))();
+      return val;
+    },
+
+    applyEventsChanges: app.applyEventsChanges.bind(app),
+    changeView: app.changeView.bind(app),
+    setCurrentDate: app.setCurrentDate.bind(app),
+    addEvent: app.addEvent.bind(app),
+    updateEvent: app.updateEvent.bind(app),
+    deleteEvent: app.deleteEvent.bind(app),
+    undo: app.undo.bind(app),
+    goToToday: app.goToToday.bind(app),
+    goToPrevious: app.goToPrevious.bind(app),
+    goToNext: app.goToNext.bind(app),
+    selectDate: app.selectDate.bind(app),
+    getCalendars: app.getCalendars.bind(app),
+    createCalendar: app.createCalendar.bind(app),
+    mergeCalendars: app.mergeCalendars.bind(app),
+    setCalendarVisibility: app.setCalendarVisibility.bind(app),
+    setAllCalendarsVisibility: app.setAllCalendarsVisibility.bind(app),
+    getAllEvents: app.getAllEvents.bind(app),
+    highlightEvent: app.highlightEvent.bind(app),
+    setVisibleMonth: app.setVisibleMonth.bind(app),
+    getVisibleMonth: app.getVisibleMonth.bind(app),
+    get sidebarConfig() {
+      return app.getSidebarConfig();
+    },
+    get readOnlyConfig() {
+      return app.getReadOnlyConfig();
+    },
+  } as unknown as UseCalendarAppReturn;
+
+  return result;
+}