From 0848b05088d15eec4e4ca6fcba74147ba1ec6b70 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 14 May 2025 15:16:02 -0400
Subject: [PATCH 1/3] Cleanup

---
 packages/svelte-state/src/lib/index.ts             |  1 +
 .../svelte-state/src/lib/selectionState.svelte.ts  | 14 ++++++--------
 .../docs/svelte-state/selectionState/+page.md      |  2 --
 .../docs/svelte-state/selectionState/+page.ts      |  2 +-
 .../routes/docs/svelte-state/uniqueState/+page.ts  |  2 +-
 .../routes/docs/svelte-stores/timerStore/+page.md  |  4 +++-
 6 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/svelte-state/src/lib/index.ts b/packages/svelte-state/src/lib/index.ts
index 44a397c..0a641cf 100644
--- a/packages/svelte-state/src/lib/index.ts
+++ b/packages/svelte-state/src/lib/index.ts
@@ -1,2 +1,3 @@
 export { SelectionState } from './selectionState.svelte.js';
+export { TimerState } from './timerState.svelte.js';
 export { UniqueState } from './uniqueState.svelte.js';
diff --git a/packages/svelte-state/src/lib/selectionState.svelte.ts b/packages/svelte-state/src/lib/selectionState.svelte.ts
index 06763e0..96e0c78 100644
--- a/packages/svelte-state/src/lib/selectionState.svelte.ts
+++ b/packages/svelte-state/src/lib/selectionState.svelte.ts
@@ -1,6 +1,6 @@
 import { UniqueState } from './uniqueState.svelte.js';
 
-export type SelectionProps<T> = {
+export type SelectionOptions<T> = {
   /** Initial values */
   initial?: T[];
 
@@ -14,8 +14,6 @@ export type SelectionProps<T> = {
   max?: number;
 };
 
-// export type SelectionState<T> = ReturnType<typeof selectionState<T>>;
-
 export class SelectionState<T> {
   #initial: T[];
   #selected: UniqueState<T>;
@@ -24,13 +22,13 @@ export class SelectionState<T> {
   single: boolean;
   max: number | undefined;
 
-  constructor(props: SelectionProps<T> = {}) {
-    this.#initial = props.initial ?? [];
+  constructor(options: SelectionOptions<T> = {}) {
+    this.#initial = options.initial ?? [];
     this.#selected = new UniqueState(this.#initial);
 
-    this.all = props.all ?? [];
-    this.single = props.single ?? false;
-    this.max = props.max;
+    this.all = options.all ?? [];
+    this.single = options.single ?? false;
+    this.max = options.max;
   }
 
   get current() {
diff --git a/sites/docs/src/routes/docs/svelte-state/selectionState/+page.md b/sites/docs/src/routes/docs/svelte-state/selectionState/+page.md
index 77a396f..b2f962a 100644
--- a/sites/docs/src/routes/docs/svelte-state/selectionState/+page.md
+++ b/sites/docs/src/routes/docs/svelte-state/selectionState/+page.md
@@ -14,8 +14,6 @@
   const selection3 = new SelectionState({ all: data.map(d => d.id)});
   const selection4 = new SelectionState({ single: true });
   const selection5 = new SelectionState({ max: 3 });
-
-  console.log({ selection })
 </script>
 
 <h1>Usage</h1>
diff --git a/sites/docs/src/routes/docs/svelte-state/selectionState/+page.ts b/sites/docs/src/routes/docs/svelte-state/selectionState/+page.ts
index b6f1695..8a06543 100644
--- a/sites/docs/src/routes/docs/svelte-state/selectionState/+page.ts
+++ b/sites/docs/src/routes/docs/svelte-state/selectionState/+page.ts
@@ -8,7 +8,7 @@ export async function load() {
       pageSource,
       description:
         'Manage item selection state including toggling values, selecting all, and clear or reset selection',
-      // related: ['components/MultiSelect', 'components/Selection'],
+      related: ['svelte-state/UniqueState', 'components/MultiSelect', 'components/Selection'],
     },
   };
 }
diff --git a/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.ts b/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.ts
index d5f5db7..2b90a09 100644
--- a/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.ts
+++ b/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.ts
@@ -8,7 +8,7 @@ export async function load() {
       pageSource,
       description:
         'State to manage unique values using `Set` with improves ergonomics and better control of updates',
-      related: ['svelte-state/selectionState'],
+      related: ['svelte-state/SelectionState'],
     },
   };
 }
diff --git a/sites/docs/src/routes/docs/svelte-stores/timerStore/+page.md b/sites/docs/src/routes/docs/svelte-stores/timerStore/+page.md
index fd76221..1572f1a 100644
--- a/sites/docs/src/routes/docs/svelte-stores/timerStore/+page.md
+++ b/sites/docs/src/routes/docs/svelte-stores/timerStore/+page.md
@@ -22,7 +22,9 @@ const timer = timerStore();
 const timer = timerStore<T>({ initial?: T, onTick?: (value: T) => {...}, delay?: number, disabled?: boolean })
 ```
 
-<h2>Example</h2>
+<h1>Examples</h1>
+
+<h2>Default</h2>
 
 ```svelte
 <script>

From 00e03bd34378791b02fb38571162d7daea2fc2db Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 14 May 2025 15:17:22 -0400
Subject: [PATCH 2/3] feat: Add `TimerState`

---
 .changeset/angry-sheep-matter.md              |  5 +
 .../svelte-state/src/lib/timerState.svelte.ts | 91 +++++++++++++++++++
 sites/docs/src/routes/_NavMenu.svelte         |  2 +-
 .../docs/svelte-state/TimerState/+page.svelte | 55 +++++++++++
 .../docs/svelte-state/TimerState/+page.ts     | 13 +++
 5 files changed, 165 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/angry-sheep-matter.md
 create mode 100644 packages/svelte-state/src/lib/timerState.svelte.ts
 create mode 100644 sites/docs/src/routes/docs/svelte-state/TimerState/+page.svelte
 create mode 100644 sites/docs/src/routes/docs/svelte-state/TimerState/+page.ts

diff --git a/.changeset/angry-sheep-matter.md b/.changeset/angry-sheep-matter.md
new file mode 100644
index 0000000..a743ae0
--- /dev/null
+++ b/.changeset/angry-sheep-matter.md
@@ -0,0 +1,5 @@
+---
+'@layerstack/svelte-state': patch
+---
+
+feat: Add `TimerState`
diff --git a/packages/svelte-state/src/lib/timerState.svelte.ts b/packages/svelte-state/src/lib/timerState.svelte.ts
new file mode 100644
index 0000000..7e8128e
--- /dev/null
+++ b/packages/svelte-state/src/lib/timerState.svelte.ts
@@ -0,0 +1,91 @@
+export type TimerOptions<T> = {
+  initial?: T;
+
+  /** Delay between ticks in milliseconds
+   * @default 1000
+   */
+  delay?: number;
+
+  /** Start disabled (manually call `start()`)
+   * @default false
+   */
+  disabled?: boolean;
+
+  /** Called on each interval tick.  Returned value is used to update store value, defaulting to current Date */
+  onTick?: (current: T | null) => any;
+};
+
+/**
+ * Subscribable timer/interval state
+ */
+export class TimerState<T = any> {
+  #initial: T | null;
+  #current: T | null = $state(null);
+  #intervalId: ReturnType<typeof setInterval> | null = null;
+  #delay: number;
+  #disabled: boolean;
+  #running = $state(false);
+  #onTick: (current: T | null) => any;
+
+  constructor(options: TimerOptions<T> = {}) {
+    this.#initial = options.initial ?? null;
+    this.#current = this.#initial;
+    this.#delay = options.delay ?? 1000;
+    this.#disabled = options.disabled ?? false;
+    this.#onTick = options.onTick ?? (() => new Date());
+
+    if (!this.#disabled) {
+      this.start();
+    }
+
+    $effect(() => {
+      return this.stop;
+    });
+  }
+
+  get current() {
+    return this.#current;
+  }
+
+  set current(value: T | null) {
+    if (!this.#disabled) {
+      this.start();
+    }
+
+    this.#current = value;
+  }
+
+  get delay() {
+    return this.#delay;
+  }
+
+  set delay(value: number) {
+    this.stop();
+    this.#delay = value;
+    this.start();
+  }
+
+  start = () => {
+    stop();
+    this.#intervalId = setInterval(() => {
+      this.#current = this.#onTick(this.#current) ?? new Date();
+    }, this.#delay);
+    this.#running = true;
+  };
+
+  stop = () => {
+    if (this.#intervalId) {
+      clearInterval(this.#intervalId);
+    }
+    this.#intervalId = null;
+    this.#running = false;
+  };
+
+  reset = () => {
+    return (this.#current = this.#initial);
+  };
+
+  get running() {
+    return this.#running;
+  }
+}
diff --git a/sites/docs/src/routes/_NavMenu.svelte b/sites/docs/src/routes/_NavMenu.svelte
index 85b35dd..4ae4ba2 100644
--- a/sites/docs/src/routes/_NavMenu.svelte
+++ b/sites/docs/src/routes/_NavMenu.svelte
@@ -19,7 +19,7 @@
     'styles',
   ];
 
-  const state = ['SelectionState', 'UniqueState'];
+  const state = ['SelectionState', 'TimerState', 'UniqueState'];
 
   const stores = [
     'changeStore',
diff --git a/sites/docs/src/routes/docs/svelte-state/TimerState/+page.svelte b/sites/docs/src/routes/docs/svelte-state/TimerState/+page.svelte
new file mode 100644
index 0000000..f05895e
--- /dev/null
+++ b/sites/docs/src/routes/docs/svelte-state/TimerState/+page.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { subDays, subMonths } from 'date-fns';
+
+  import { Switch } from 'svelte-ux';
+  import { TimerState } from '@layerstack/svelte-state';
+  import Preview from '$docs/Preview.svelte';
+  import Code from '$docs/Code.svelte';
+
+  const dateTimer = new TimerState({ initial: new Date(), onTick: () => new Date() });
+  const tickTimer = new TimerState({ initial: 0, onTick: (value) => (value ?? 0) + 1 });
+</script>
+
+<h1>Usage</h1>
+
+<Code source={`const timer = new TimerState();`} language="javascript" />
+
+<Code
+  source={`const timer = new TimerState<T>({ initial?: T, onTick?: (value: T) => {...}, delay?: number, disabled?: boolean })`}
+  language="javascript"
+/>
+
+<h1>Examples</h1>
+
+<h2>Default</h2>
+
+<Code source={`const dateTimer = new TimerState();`} language="javascript" />
+
+<Preview>
+  <div>{dateTimer.current}</div>
+  <Switch
+    checked={dateTimer.running}
+    on:change={(e) => {
+      // @ts-expect-error
+      e.target?.checked ? dateTimer.start() : dateTimer.stop();
+    }}
+  />
+</Preview>
+
+<h2>Tick count</h2>
+
+<Code
+  source={`const tickTimer = new TimerState({ initial: 0, onTick: (value) => value + 1 });`}
+  language="javascript"
+/>
+
+<Preview>
+  <div>{tickTimer.current}</div>
+  <Switch
+    checked={tickTimer.running}
+    on:change={(e) => {
+      // @ts-expect-error
+      e.target?.checked ? tickTimer.start() : tickTimer.stop();
+    }}
+  />
+</Preview>
diff --git a/sites/docs/src/routes/docs/svelte-state/TimerState/+page.ts b/sites/docs/src/routes/docs/svelte-state/TimerState/+page.ts
new file mode 100644
index 0000000..43030ae
--- /dev/null
+++ b/sites/docs/src/routes/docs/svelte-state/TimerState/+page.ts
@@ -0,0 +1,13 @@
+import source from '$svelte-state/timerState.svelte.ts?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    meta: {
+      source,
+      pageSource,
+      description: 'Manage interval ticks, useful for timely updates and countdowns',
+      related: ['components/Duration', 'components/ScrollingValue'],
+    },
+  };
+}

From c83a5ccad26de8472b65610c1bd09d2eba234890 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 14 May 2025 15:26:53 -0400
Subject: [PATCH 3/3] docs: Migrate from +page.md to +page.svelte

---
 .../docs/svelte-state/TimerState/+page.svelte |   5 +-
 .../docs/svelte-state/selectionState/+page.md | 107 -------------
 .../svelte-state/selectionState/+page.svelte  | 141 ++++++++++++++++++
 .../docs/svelte-state/selectionState/+page.ts |   2 +-
 .../docs/svelte-state/uniqueState/+page.md    |  41 -----
 .../svelte-state/uniqueState/+page.svelte     |  45 ++++++
 .../docs/svelte-state/uniqueState/+page.ts    |   2 +-
 7 files changed, 190 insertions(+), 153 deletions(-)
 delete mode 100644 sites/docs/src/routes/docs/svelte-state/selectionState/+page.md
 create mode 100644 sites/docs/src/routes/docs/svelte-state/selectionState/+page.svelte
 delete mode 100644 sites/docs/src/routes/docs/svelte-state/uniqueState/+page.md
 create mode 100644 sites/docs/src/routes/docs/svelte-state/uniqueState/+page.svelte

diff --git a/sites/docs/src/routes/docs/svelte-state/TimerState/+page.svelte b/sites/docs/src/routes/docs/svelte-state/TimerState/+page.svelte
index f05895e..ffbc494 100644
--- a/sites/docs/src/routes/docs/svelte-state/TimerState/+page.svelte
+++ b/sites/docs/src/routes/docs/svelte-state/TimerState/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { subDays, subMonths } from 'date-fns';
-
-  import { Switch } from 'svelte-ux';
   import { TimerState } from '@layerstack/svelte-state';
+  import { Switch } from 'svelte-ux';
+
   import Preview from '$docs/Preview.svelte';
   import Code from '$docs/Code.svelte';
 
diff --git a/sites/docs/src/routes/docs/svelte-state/selectionState/+page.md b/sites/docs/src/routes/docs/svelte-state/selectionState/+page.md
deleted file mode 100644
index b2f962a..0000000
--- a/sites/docs/src/routes/docs/svelte-state/selectionState/+page.md
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts">
-	import { Checkbox, Radio } from 'svelte-ux';
-	import { SelectionState } from '@layerstack/svelte-state';
-	import Preview from '$docs/Preview.svelte';
-
-  const data = Array.from({ length: 5 }).map((_,i) => {
-    return {
-      id: i + 1
-    }
-  });
-
-  const selection = new SelectionState()
-  const selection2 = new SelectionState({ initial: [3,4,5]})
-  const selection3 = new SelectionState({ all: data.map(d => d.id)});
-  const selection4 = new SelectionState({ single: true });
-  const selection5 = new SelectionState({ max: 3 });
-</script>
-
-<h1>Usage</h1>
-
-<h2>Max</h2>
-
-```js
-const selection = new SelectionState({ max: 3 });
-```
-
-<Preview>
-  {#each data as d}
-    <div>
-      <Checkbox checked={selection5.isSelected(d.id)} on:change={() => selection5.toggleSelected(d.id)} disabled={selection5.isDisabled(d.id)}>
-        {d.id}
-      </Checkbox>
-    </div>
-  {/each}
-  selected: {JSON.stringify(selection5.current)}
-</Preview>
-
-<h2>Basic</h2>
-
-```js
-const selection = new SelectionState();
-```
-
-<Preview>
-  {#each data as d}
-    <div>
-      <Checkbox checked={selection.isSelected(d.id)} on:change={() => selection.toggleSelected(d.id)}>
-        {d.id}
-      </Checkbox>
-    </div>
-  {/each}
-  selected: {JSON.stringify(selection.current)}
-</Preview>
-
-<h2>Initial selection</h2>
-
-```js
-const selection2 = new SelectionState({ initial: [3, 4, 5] });
-```
-
-<Preview>
-  {#each data as d}
-    <div>
-      <Checkbox checked={selection2.isSelected(d.id)} on:change={() => selection2.toggleSelected(d.id)}>
-        {d.id}
-      </Checkbox>
-    </div>
-  {/each}
-  selected: {JSON.stringify(selection2.current)}
-</Preview>
-
-<h2>Select all</h2>
-
-```js
-const selection3 = new SelectionState({ all: data.map((d) => d.id) });
-```
-
-<Preview>
-  <Checkbox checked={selection3.isAnySelected()} indeterminate={!selection3.isAllSelected()} on:change={() => selection3.toggleAll()}>
-    Select all
-  </Checkbox>
-  {#each data as d}
-    <div>
-      <Checkbox checked={selection3.isSelected(d.id)} on:change={() => selection3.toggleSelected(d.id)}>
-        {d.id}
-      </Checkbox>
-    </div>
-  {/each}
-  selected: {JSON.stringify(selection3.current)}
-</Preview>
-
-<h2>Single</h2>
-
-```js
-const selection4 = new SelectionState({ single: true });
-```
-
-<Preview>
-  {#each data as d}
-    <div>
-      <Radio group={selection4.current} value={d.id} on:change={() => selection4.toggleSelected(d.id)}>
-        {d.id}
-      </Radio>
-    </div>
-  {/each}
-  selected: {JSON.stringify(selection4.current)}
-</Preview>
diff --git a/sites/docs/src/routes/docs/svelte-state/selectionState/+page.svelte b/sites/docs/src/routes/docs/svelte-state/selectionState/+page.svelte
new file mode 100644
index 0000000..45db5aa
--- /dev/null
+++ b/sites/docs/src/routes/docs/svelte-state/selectionState/+page.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { SelectionState } from '@layerstack/svelte-state';
+  import { Checkbox, Radio } from 'svelte-ux';
+
+  import Preview from '$docs/Preview.svelte';
+  import Code from '$docs/Code.svelte';
+
+  const data = Array.from({ length: 5 }).map((_, i) => {
+    return {
+      id: i + 1,
+    };
+  });
+
+  const selection = new SelectionState();
+  const selection2 = new SelectionState({ initial: [3, 4, 5] });
+  const selection3 = new SelectionState({ all: data.map((d) => d.id) });
+  const selection4 = new SelectionState({ single: true });
+  const selection5 = new SelectionState({ max: 3 });
+</script>
+
+<h1>Usage</h1>
+
+<Code
+  source={`import { SelectionState } from '@layerstack/svelte-state';
+
+const state = new SelectionState();
+// state.current.has(value)
+// state.current.size
+// state.add(value);
+// state.delete(value);
+// state.toggle(value);
+`}
+  language="javascript"
+/>
+
+<h1>Examples</h1>
+
+<h2>Basic</h2>
+
+<Code source={`const selection = new SelectionState();`} language="javascript" />
+
+<Preview>
+  {#each data as d}
+    <div>
+      <Checkbox
+        checked={selection.isSelected(d.id)}
+        on:change={() => selection.toggleSelected(d.id)}
+      >
+        {d.id}
+      </Checkbox>
+    </div>
+  {/each}
+  selected: {JSON.stringify(selection.current)}
+</Preview>
+
+<h2>Initial selection</h2>
+
+<Code
+  source={`const selection = new SelectionState({ initial: [3, 4, 5] });`}
+  language="javascript"
+/>
+
+<Preview>
+  {#each data as d}
+    <div>
+      <Checkbox
+        checked={selection2.isSelected(d.id)}
+        on:change={() => selection2.toggleSelected(d.id)}
+      >
+        {d.id}
+      </Checkbox>
+    </div>
+  {/each}
+  selected: {JSON.stringify(selection2.current)}
+</Preview>
+
+<h2>Max</h2>
+
+<Code source={`const selection = new SelectionState({ max: 3 });`} language="javascript" />
+
+<Preview>
+  {#each data as d}
+    <div>
+      <Checkbox
+        checked={selection5.isSelected(d.id)}
+        on:change={() => selection5.toggleSelected(d.id)}
+        disabled={selection5.isDisabled(d.id)}
+      >
+        {d.id}
+      </Checkbox>
+    </div>
+  {/each}
+  selected: {JSON.stringify(selection5.current)}
+</Preview>
+
+<h2>Select all</h2>
+
+<Code
+  source={`const selection = new SelectionState({ all: data.map((d) => d.id) });`}
+  language="javascript"
+/>
+
+<Preview>
+  <Checkbox
+    checked={selection3.isAnySelected()}
+    indeterminate={!selection3.isAllSelected()}
+    on:change={() => selection3.toggleAll()}
+  >
+    Select all
+  </Checkbox>
+  {#each data as d}
+    <div>
+      <Checkbox
+        checked={selection3.isSelected(d.id)}
+        on:change={() => selection3.toggleSelected(d.id)}
+      >
+        {d.id}
+      </Checkbox>
+    </div>
+  {/each}
+  selected: {JSON.stringify(selection3.current)}
+</Preview>
+
+<h2>Single</h2>
+
+<Code source={`const selection = new SelectionState({ single: true });`} language="javascript" />
+
+<Preview>
+  {#each data as d}
+    <div>
+      <Radio
+        group={selection4.current}
+        value={d.id}
+        on:change={() => selection4.toggleSelected(d.id)}
+      >
+        {d.id}
+      </Radio>
+    </div>
+  {/each}
+  selected: {JSON.stringify(selection4.current)}
+</Preview>
diff --git a/sites/docs/src/routes/docs/svelte-state/selectionState/+page.ts b/sites/docs/src/routes/docs/svelte-state/selectionState/+page.ts
index 8a06543..0158feb 100644
--- a/sites/docs/src/routes/docs/svelte-state/selectionState/+page.ts
+++ b/sites/docs/src/routes/docs/svelte-state/selectionState/+page.ts
@@ -1,5 +1,5 @@
 import source from '$svelte-state/selectionState.svelte.ts?raw';
-import pageSource from './+page.md?raw';
+import pageSource from './+page.svelte?raw';
 
 export async function load() {
   return {
diff --git a/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.md b/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.md
deleted file mode 100644
index 2ea6e15..0000000
--- a/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.md
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-	import { Checkbox, TextField } from 'svelte-ux';
-	import { UniqueState } from '@layerstack/svelte-state';
-	import Preview from '$docs/Preview.svelte';
-
-	const data = Array.from({ length: 5 }).map((_,i) => {
-    return {
-      id: i + 1
-    }
-  });
-
-	const state = new UniqueState();
-</script>
-
-<h1>Usage</h1>
-
-```js
-import { uniqueState } from '@layerstack/svelte-state';
-
-const state = new UniqueState();
-// state.current.has(value)
-// state.current.size
-// state.add(value);
-// state.delete(value);
-// state.toggle(value);
-```
-
-<h1>Examples</h1>
-
-<h2>Basic</h2>
-
-<Preview>
-	{#each data as d}
-		<div>
-			<Checkbox checked={state.current.has(d.id)} on:change={() => state.toggle(d.id)}>
-				{d.id}
-			</Checkbox>
-		</div>
-	{/each}
-	selected: {JSON.stringify([...state.current])}
-</Preview>
diff --git a/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.svelte b/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.svelte
new file mode 100644
index 0000000..33fc105
--- /dev/null
+++ b/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { UniqueState } from '@layerstack/svelte-state';
+  import { Checkbox } from 'svelte-ux';
+
+  import Preview from '$docs/Preview.svelte';
+  import Code from '$docs/Code.svelte';
+
+  const data = Array.from({ length: 5 }).map((_, i) => {
+    return {
+      id: i + 1,
+    };
+  });
+
+  const state = new UniqueState();
+</script>
+
+<h1>Usage</h1>
+
+<Code
+  source={`import { UniqueState } from '@layerstack/svelte-state';
+
+const state = new UniqueState();
+// state.current.has(value)
+// state.current.size
+// state.add(value);
+// state.delete(value);
+// state.toggle(value);
+`}
+  language="javascript"
+/>
+
+<h1>Examples</h1>
+
+<h2>Basic</h2>
+
+<Preview>
+  {#each data as d}
+    <div>
+      <Checkbox checked={state.current.has(d.id)} on:change={() => state.toggle(d.id)}>
+        {d.id}
+      </Checkbox>
+    </div>
+  {/each}
+  selected: {JSON.stringify([...state.current])}
+</Preview>
diff --git a/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.ts b/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.ts
index 2b90a09..b55a2ee 100644
--- a/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.ts
+++ b/sites/docs/src/routes/docs/svelte-state/uniqueState/+page.ts
@@ -1,5 +1,5 @@
 import source from '$svelte-state/uniqueState.svelte.ts?raw';
-import pageSource from './+page.md?raw';
+import pageSource from './+page.svelte?raw';
 
 export async function load() {
   return {