cfsa-antigravity 3.0.2 → 3.1.0

package/template/.codex/skill-library/stack/frameworks/svelte5/references/runes.md

@@ -0,0 +1,394 @@
+# Svelte 5 Runes Reference
+
+## Table of Contents
+- [$state - Reactive State](#state---reactive-state)
+- [$derived - Computed Values](#derived---computed-values)
+- [$effect - Side Effects](#effect---side-effects)
+- [$props - Component Props](#props---component-props)
+- [$bindable - Two-Way Binding](#bindable---two-way-binding)
+- [$inspect - Debugging](#inspect---debugging)
+
+---
+
+## $state - Reactive State
+
+In Svelte 5, plain `let` declarations are no longer automatically reactive. Use `$state()` for reactive state.
+
+### Basic Usage
+
+```svelte
+<script>
+  let count = $state(0);
+</script>
+
+<button onclick={() => count++}>
+  Clicks: {count}
+</button>
+```
+
+### Object and Array State
+
+Objects and arrays are deeply reactive by default:
+
+```svelte
+<script>
+  let user = $state({ name: 'Alice', age: 30 });
+  let items = $state(['apple', 'banana']);
+</script>
+
+<button onclick={() => user.age++}>Age: {user.age}</button>
+<button onclick={() => items.push('cherry')}>Items: {items.length}</button>
+```
+
+### Class State
+
+```svelte
+<script>
+  class Counter {
+    count = $state(0);
+    increment() { this.count++; }
+  }
+  const counter = new Counter();
+</script>
+
+<button onclick={() => counter.increment()}>{counter.count}</button>
+```
+
+### Raw State (Opt-out of Deep Reactivity)
+
+```svelte
+<script>
+  let items = $state.raw([1, 2, 3]);
+
+  // This WON'T trigger an update:
+  items.push(4);
+
+  // This WILL trigger an update:
+  items = [...items, 4];
+</script>
+```
+
+---
+
+## $derived - Computed Values
+
+Replaces `$:` reactive statements for computed values.
+
+### Basic Usage
+
+```svelte
+<script>
+  let count = $state(0);
+  let doubled = $derived(count * 2);
+  let quadrupled = $derived(doubled * 2);
+</script>
+```
+
+### Complex Derivations with $derived.by
+
+```svelte
+<script>
+  let items = $state([1, 2, 3, 4, 5]);
+  let filter = $state('even');
+
+  let filteredItems = $derived.by(() => {
+    if (filter === 'even') return items.filter(n => n % 2 === 0);
+    return items.filter(n => n % 2 !== 0);
+  });
+</script>
+```
+
+### Deriving from Props
+
+```svelte
+<script>
+  let { firstName, lastName } = $props();
+  let fullName = $derived(`${firstName} ${lastName}`);
+</script>
+```
+
+### $derived vs $effect
+
+Use `$derived` for computing values, `$effect` for side effects:
+
+```svelte
+<script>
+  let count = $state(0);
+
+  // CORRECT: Use $derived for computed values
+  let doubled = $derived(count * 2);
+
+  // INCORRECT: Don't use $effect to set derived values
+  // let doubled;
+  // $effect(() => { doubled = count * 2; }); // Anti-pattern!
+</script>
+```
+
+---
+
+## $effect - Side Effects
+
+Runs code when component mounts and when dependencies change. Requires cleanup for subscriptions.
+
+### Basic Effect with Cleanup
+
+```svelte
+<script>
+  let count = $state(0);
+
+  $effect(() => {
+    const interval = setInterval(() => count++, 1000);
+    return () => clearInterval(interval); // Cleanup
+  });
+</script>
+```
+
+### DOM Event Listeners
+
+```svelte
+<script>
+  let mouseX = $state(0);
+  let mouseY = $state(0);
+
+  $effect(() => {
+    function handleMouseMove(event) {
+      mouseX = event.clientX;
+      mouseY = event.clientY;
+    }
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  });
+</script>
+```
+
+### External Subscriptions
+
+```svelte
+<script>
+  let { userId } = $props();
+  let userData = $state(null);
+
+  $effect(() => {
+    const unsubscribe = database.subscribe(`users/${userId}`, (data) => {
+      userData = data;
+    });
+    return () => unsubscribe();
+  });
+</script>
+```
+
+### $effect.pre for Pre-DOM Updates
+
+```svelte
+<script>
+  let div;
+  let messages = $state([]);
+
+  $effect.pre(() => {
+    if (div) {
+      const shouldScroll = div.scrollTop + div.clientHeight >= div.scrollHeight - 20;
+      if (shouldScroll) {
+        tick().then(() => { div.scrollTop = div.scrollHeight; });
+      }
+    }
+  });
+</script>
+```
+
+### Untracked Dependencies
+
+```svelte
+<script>
+  import { untrack } from 'svelte';
+
+  let count = $state(0);
+  let logCount = $state(0);
+
+  $effect(() => {
+    // Only runs when count changes, not logCount
+    console.log(count, untrack(() => logCount));
+  });
+</script>
+```
+
+---
+
+## $props - Component Props
+
+Replaces `export let` for declaring component props.
+
+### Basic Usage
+
+```svelte
+<script>
+  let { name, count = 0, disabled = false } = $props();
+</script>
+```
+
+### Rest Props Pattern
+
+```svelte
+<script>
+  let { class: className, children, ...restProps } = $props();
+</script>
+
+<div class={className} {...restProps}>
+  {@render children?.()}
+</div>
+```
+
+### Renaming Reserved Words
+
+```svelte
+<script>
+  let {
+    class: className,  // 'class' is reserved
+    for: htmlFor,      // 'for' is reserved
+    ...rest
+  } = $props();
+</script>
+```
+
+### TypeScript Props
+
+```svelte
+<script lang="ts">
+  interface Props {
+    name: string;
+    count?: number;
+    onClick?: (event: MouseEvent) => void;
+  }
+
+  let { name, count = 0, onClick }: Props = $props();
+</script>
+```
+
+### Props with Children
+
+```svelte
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    children: Snippet;
+    footer?: Snippet;
+  }
+
+  let { title, children, footer }: Props = $props();
+</script>
+
+<article>
+  <h1>{title}</h1>
+  <main>{@render children()}</main>
+  {#if footer}<footer>{@render footer()}</footer>{/if}
+</article>
+```
+
+---
+
+## $bindable - Two-Way Binding
+
+Props must be explicitly marked with `$bindable()` to support `bind:`.
+
+### Basic Usage
+
+```svelte
+<!-- Input.svelte -->
+<script>
+  let { value = $bindable() } = $props();
+</script>
+
+<input bind:value />
+
+<!-- Parent.svelte -->
+<script>
+  import Input from './Input.svelte';
+  let name = $state('');
+</script>
+
+<Input bind:value={name} />
+```
+
+### Bindable with Default Value
+
+```svelte
+<script>
+  let { value = $bindable('default') } = $props();
+</script>
+```
+
+### Multiple Bindable Props
+
+```svelte
+<script>
+  let {
+    value = $bindable(''),
+    checked = $bindable(false),
+    selected = $bindable(null)
+  } = $props();
+</script>
+```
+
+### TypeScript with Bindable
+
+```svelte
+<script lang="ts">
+  interface Props {
+    value: string;
+    disabled?: boolean;
+  }
+
+  let { value = $bindable(''), disabled = false }: Props = $props();
+</script>
+```
+
+---
+
+## $inspect - Debugging
+
+Development-only debugging that logs values when they change. Stripped in production.
+
+### Basic Usage
+
+```svelte
+<script>
+  let count = $state(0);
+  $inspect(count); // Logs every time count changes
+</script>
+```
+
+### Multiple Values
+
+```svelte
+<script>
+  let name = $state('Alice');
+  let age = $state(30);
+  $inspect(name, age);
+</script>
+```
+
+### Custom Logging with $inspect.with
+
+```svelte
+<script>
+  let user = $state({ name: 'Alice', age: 30 });
+
+  $inspect.with((type, ...values) => {
+    if (type === 'init') console.log('Initial value:', values);
+    else console.log('Updated to:', values);
+  }, user);
+</script>
+```
+
+### Debugging with Breakpoints
+
+```svelte
+<script>
+  let data = $state({ x: 0, y: 0 });
+
+  $inspect.with((type, value) => {
+    if (type === 'update' && value.x > 100) debugger;
+  }, data);
+</script>
+```

package/template/.codex/skill-library/stack/frameworks/svelte5/references/snippets.md

@@ -0,0 +1,291 @@
+# Svelte 5 Snippets Reference
+
+## Table of Contents
+- [Replacing Slots with Snippets](#replacing-slots-with-snippets)
+- [Rendering with @render](#rendering-with-render)
+
+---
+
+## Replacing Slots with Snippets
+
+Svelte 5 replaces `<slot>` with snippets - a more powerful and type-safe composition primitive.
+
+### Default Content (children)
+
+**Svelte 4:**
+```svelte
+<div class="card"><slot /></div>
+```
+
+**Svelte 5:**
+```svelte
+<script>
+  let { children } = $props();
+</script>
+
+<div class="card">{@render children?.()}</div>
+```
+
+### Named Slots to Named Snippets
+
+**Svelte 4:**
+```svelte
+<header><slot name="header" /></header>
+<main><slot /></main>
+<footer><slot name="footer" /></footer>
+
+<!-- Usage -->
+<Layout>
+  <h1 slot="header">Title</h1>
+  <p>Content</p>
+  <span slot="footer">Footer</span>
+</Layout>
+```
+
+**Svelte 5:**
+```svelte
+<script>
+  let { header, children, footer } = $props();
+</script>
+
+<header>{@render header?.()}</header>
+<main>{@render children?.()}</main>
+<footer>{@render footer?.()}</footer>
+
+<!-- Usage -->
+<Layout>
+  {#snippet header()}<h1>Title</h1>{/snippet}
+  <p>Content</p>
+  {#snippet footer()}<span>Footer</span>{/snippet}
+</Layout>
+```
+
+### Slot Props to Snippet Parameters
+
+**Svelte 4:**
+```svelte
+<ul>
+  {#each items as item}
+    <li><slot {item} /></li>
+  {/each}
+</ul>
+
+<List {items} let:item>
+  <span>{item.name}</span>
+</List>
+```
+
+**Svelte 5:**
+```svelte
+<script>
+  let { items, children } = $props();
+</script>
+
+<ul>
+  {#each items as item}
+    <li>{@render children?.(item)}</li>
+  {/each}
+</ul>
+
+<List {items}>
+  {#snippet children(item)}
+    <span>{item.name}</span>
+  {/snippet}
+</List>
+```
+
+### Slot Fallback to Snippet Fallback
+
+```svelte
+<script>
+  let { children } = $props();
+</script>
+
+{#if children}
+  {@render children()}
+{:else}
+  <p>Default content</p>
+{/if}
+```
+
+### Defining Snippets Within Components
+
+```svelte
+<script>
+  let items = $state([
+    { id: 1, name: 'Item 1', type: 'normal' },
+    { id: 2, name: 'Item 2', type: 'featured' }
+  ]);
+</script>
+
+{#snippet normalItem(item)}
+  <li>{item.name}</li>
+{/snippet}
+
+{#snippet featuredItem(item)}
+  <li class="featured">*** {item.name} ***</li>
+{/snippet}
+
+<ul>
+  {#each items as item}
+    {#if item.type === 'featured'}
+      {@render featuredItem(item)}
+    {:else}
+      {@render normalItem(item)}
+    {/if}
+  {/each}
+</ul>
+```
+
+### TypeScript Typing
+
+```svelte
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Item { id: number; name: string; }
+
+  interface Props {
+    header?: Snippet;
+    children: Snippet<[item: Item]>;
+    footer?: Snippet;
+  }
+
+  let { header, children, footer }: Props = $props();
+</script>
+```
+
+---
+
+## Rendering with @render
+
+Snippets must be rendered using `{@render}`. Optional snippets need null-safe calling.
+
+### Basic Snippet Rendering
+
+```svelte
+<script>
+  let { children } = $props();
+</script>
+
+<div>{@render children()}</div>
+```
+
+### Optional Snippets
+
+Always use optional chaining for snippets that might not be provided:
+
+```svelte
+<script>
+  let { children } = $props();
+</script>
+
+{@render children?.()}
+```
+
+### Conditional Rendering
+
+```svelte
+<script>
+  let { header, children, footer } = $props();
+</script>
+
+{#if header}
+  <header>{@render header()}</header>
+{/if}
+
+<main>{@render children?.()}</main>
+
+{#if footer}
+  <footer>{@render footer()}</footer>
+{/if}
+```
+
+### Rendering with Arguments
+
+```svelte
+<script>
+  let { items, itemTemplate } = $props();
+</script>
+
+<ul>
+  {#each items as item, index}
+    <li>{@render itemTemplate(item, index)}</li>
+  {/each}
+</ul>
+
+<!-- Usage -->
+<List {items}>
+  {#snippet itemTemplate(item, index)}
+    <span>{index + 1}. {item.name}</span>
+  {/snippet}
+</List>
+```
+
+### Rendering Multiple Times
+
+Snippets can be rendered multiple times:
+
+```svelte
+<script>
+  let { icon } = $props();
+</script>
+
+<button>
+  {@render icon?.()}
+  <span>Click me</span>
+  {@render icon?.()}
+</button>
+```
+
+### Rendering Dynamic Snippets
+
+```svelte
+<script>
+  let { normalView, editView, isEditing } = $props();
+  let currentView = $derived(isEditing ? editView : normalView);
+</script>
+
+{@render currentView?.()}
+```
+
+### TypeScript with @render
+
+```svelte
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children: Snippet;
+    header?: Snippet;
+    row: Snippet<[data: { id: number; name: string }]>;
+  }
+
+  let { children, header, row }: Props = $props();
+</script>
+
+{@render header?.()}
+{@render children()}
+{@render row({ id: 1, name: 'Test' })}
+```
+
+### Passing Snippets to Child Components
+
+```svelte
+<!-- Wrapper.svelte -->
+<script>
+  import Inner from './Inner.svelte';
+  let { itemRenderer } = $props();
+</script>
+
+<Inner {itemRenderer} />
+
+<!-- Inner.svelte -->
+<script>
+  let { itemRenderer } = $props();
+</script>
+
+{#each items as item}
+  {@render itemRenderer?.(item)}
+{/each}
+```