fusee-framework 1.3.0 → 1.4.1

package/app/routes/TestComposables.ts

@@ -0,0 +1,158 @@
+import { defineComponent } from '../../framework/index.js'
+import { counterLogic, mouseTracker } from '../composables/demo.js'
+import { useFetch } from '../composables/useFetch.js'
+import { useLocalStorage } from '../composables/useLocalStorage.js'
+
+export const TestComposables = defineComponent({
+    setup() {
+        // ── 1. counterLogic — pure signal composable, no context needed ──────
+        const counter = counterLogic(0, 1)
+        const bigCounter = counterLogic(100, 10)
+
+        // ── 2. mouseTracker — lifecycle composable (needs setup context) ─────
+        const mouse = mouseTracker()
+
+        // ── 3. useLocalStorage — persists across page reloads ────────────────
+        const theme = useLocalStorage<string>('demo-theme', 'dark')
+        const nickname = useLocalStorage<string>('demo-nickname', '')
+
+        const toggleTheme = () => theme(theme() === 'dark' ? 'light' : 'dark')
+
+        // ── 4. useFetch — reactive data fetching ─────────────────────────────
+        const { data: posts, loading, error } = useFetch(
+            'https://jsonplaceholder.typicode.com/posts?_limit=3'
+        )
+        // ── 5. Custom Directives Test ────────────────────────────────────────
+        const hColor = signal('#8b8bff33')
+        const colors = ['#8b8bff33', '#10b98133', '#f59e0b33', '#ef444433']
+        let colorIdx = 0
+        const nextColor = () => hColor(colors[++colorIdx % colors.length])
+
+        return {
+            hColor,
+            nextColor,
+
+            // counter
+            count: counter.count,
+            doubled: counter.doubled,
+            isEven: counter.isEven,
+            increment: counter.increment,
+            decrement: counter.decrement,
+            reset: counter.reset,
+
+            // big counter
+            bigCount: bigCounter.count,
+            bigIncrement: bigCounter.increment,
+            bigDecrement: bigCounter.decrement,
+
+            // mouse
+            mouseX: mouse.x,
+            mouseY: mouse.y,
+
+            // localStorage
+            theme,
+            nickname,
+            toggleTheme,
+
+            // fetch
+            posts,
+            loading,
+            error,
+
+            template: `
+                <div class="page">
+                    <h1>🧩 Composables Demo</h1>
+                    <p style="color:#888; margin-bottom: 2rem;">
+                        Each section below is powered by a <code style="color:#ff3333">defineComposable()</code> function.
+                        No naming rules — just reactive logic.
+                    </p>
+
+                    <!-- ── 1. counterLogic ─────────────────────────────────────── -->
+                    <section class="demo-card">
+                        <h2>📦 counterLogic(0, step=1)</h2>
+                        <p class="demo-desc">Pure signal composable — works without setup() context.</p>
+                        <div class="counter-display">
+                            <span class="big-num" :class="isEven ? 'even' : 'odd'">{{ count }}</span>
+                            <span class="derived-label">× 2 = {{ doubled }}</span>
+                        </div>
+                        <div class="btn-row">
+                            <button @click="decrement" class="cmp-btn minus">−</button>
+                            <button @click="reset"     class="cmp-btn reset">↺</button>
+                            <button @click="increment" class="cmp-btn plus">+</button>
+                        </div>
+                        <p class="badge" :class="isEven ? 'badge-blue' : 'badge-red'">{{ isEven ? 'Even' : 'Odd' }}</p>
+                    </section>
+
+                    <!-- ── 1b. Second independent counter (step=10) ───────────── -->
+                    <section class="demo-card">
+                        <h2>📦 counterLogic(100, step=10)</h2>
+                        <p class="demo-desc">Same composable, different instance. Fully isolated state.</p>
+                        <div class="counter-display">
+                            <span class="big-num">{{ bigCount }}</span>
+                        </div>
+                        <div class="btn-row">
+                            <button @click="bigDecrement" class="cmp-btn minus">−10</button>
+                            <button @click="bigIncrement" class="cmp-btn plus">+10</button>
+                        </div>
+                    </section>
+
+                    <!-- ── 2. mouseTracker ────────────────────────────────────── -->
+                    <section class="demo-card">
+                        <h2>🖱️ mouseTracker()</h2>
+                        <p class="demo-desc">Lifecycle composable — registers window listener on mount, cleans up on unmount.</p>
+                        <div class="mouse-display">
+                            <span>X: <strong>{{ mouseX }}</strong></span>
+                            <span>Y: <strong>{{ mouseY }}</strong></span>
+                        </div>
+                    </section>
+
+                    <!-- ── 3. useLocalStorage ─────────────────────────────────── -->
+                    <section class="demo-card">
+                        <h2>💾 useLocalStorage()</h2>
+                        <p class="demo-desc">State persists across page reloads. Try changing the nickname, then refresh.</p>
+                        <div style="margin-bottom: 12px;">
+                            <input f-model="nickname"
+                                   class="cmp-input"
+                                   placeholder="Your nickname…" />
+                            <p style="margin-top: 8px; color: #888; font-size: 0.85rem;">
+                                Stored: <strong style="color:#ff3333">{{ nickname || '(empty)' }}</strong>
+                            </p>
+                        </div>
+                        <button @click="toggleTheme" class="cmp-btn reset">
+                            Theme: {{ theme }}
+                        </button>
+                    </section>
+
+                    <!-- ── 4. useFetch ────────────────────────────────────────── -->
+                    <section class="demo-card">
+                        <h2>🌐 useFetch()</h2>
+                        <p class="demo-desc">Fetches from JSONPlaceholder. Loading state handled reactively.</p>
+                        <div f-if="loading">
+                            <p style="color: #888;">⏳ Loading posts…</p>
+                        </div>
+                        <div f-elif="error">
+                            <p style="color: #ff6b6b;">❌ {{ error }}</p>
+                        </div>
+                        <div f-else>
+                            <div f-for="post in posts" style="margin-bottom: 10px; padding: 10px; background:#1a1a24; border-radius:6px; border-left: 3px solid #ff3333;">
+                                <strong style="color:#ff9999">{{ post.title }}</strong>
+                                <p style="margin-top: 4px; font-size: 0.8rem; color: #666;">{{ post.body }}</p>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- ── 6. Custom Directives ────────────────────────────────────── -->
+                    <section class="demo-card">
+                        <h2>🛠️ Custom Directives</h2>
+                        <p class="demo-desc">Testing <code>f-focus</code> and <code>f-highlight</code>.</p>
+                        
+                        <div f-highlight="hColor" style="padding: 15px; border-radius: 8px; margin-bottom: 10px;">
+                            <input f-focus class="cmp-input" placeholder="I have f-focus!" />
+                        </div>
+                        
+                        <button @click="nextColor" class="cmp-btn plus">Change Highlight Color</button>
+                    </section>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/TestFor.js

@@ -5,33 +5,60 @@ export const TestFor = defineComponent({
             { id: 2, name: 'Item 2' },
             { id: 3, name: 'Item 3' }
         ])
+        const search = signal('')
+        
+        // ✨ NEW: Using the reactive .filter() method on the signal!
+        // This returns a Computed signal that updates automatically.
+        const filteredItems = items.filter(item => 
+            item.name.toLowerCase().includes(search().toLowerCase())
+        )
+
         inspect(items)
 
         return {
             items,
+            search,
+            filteredItems,
+            // 🔗 Chaining test: filter -> map -> join
+            namesSummary: filteredItems.map(i => i.name).join(', '),
+
+            updateItem: (id, newName) => {
+                // We update the SOURCE signal so the .filter() can see the new values!
+                items(items().map(i => i.id === id ? { ...i, name: newName } : i))
+            },
             addItem: () => {
                 const nextId = Math.max(0, ...items().map(i => i.id)) + 1
-                items([...items(), { id: nextId, name: `Item ${nextId}` }])
+                items.push({ id: nextId, name: `Item ${nextId}` })
             },
             shuffleItems: () => {
-                const shuffled = [...items()].sort(() => Math.random() - 0.5)
-                items(shuffled)
+                items.sort(() => Math.random() - 0.5)
             },
             template: `
                 <div class="page">
                     <h1>Keyed f-for Test</h1>
                     <p>Focus an input below, then click "Shuffle" or "Add". The focus should stay!</p>
+                    <p style="color: #8b8bff; background: #8b8bff11; padding: 10px; border-radius: 4px; border-left: 3px solid #8b8bff;">
+                        🔗 <strong>Reactive Summary:</strong> {{ namesSummary || 'No items found' }}
+                    </p>
                     
-                    <div style="margin-bottom: 20px; display: flex; gap: 10px;">
-                        <button @click="addItem" class="primary-btn">Add Item</button>
-                        <button @click="shuffleItems" class="primary-btn">Shuffle Items</button>
+                    <div style="margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px;">
+                        <input type="text" f-model="search" placeholder="🔍 Filter items..." 
+                               style="padding: 10px; border-radius: 4px; border: 1px solid #444; background: #111; color: #fff; width: 100%;" />
+                        
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="addItem" class="primary-btn">Add Item</button>
+                            <button @click="shuffleItems" class="primary-btn">Shuffle Items</button>
+                        </div>
                     </div>
 
                     <div style="display: flex; flex-direction: column; gap: 10px;">
-                        <div f-for="item in items" :key="item.id" 
+                        <div f-for="item in filteredItems" :key="item.id" 
                              style="padding: 10px; border: 1px solid #333; display: flex; gap: 10px; align-items: center;">
                             <span>ID: {{ item.id }}</span>
-                            <input type="text" :value="item.name" placeholder="Type here..." 
+                            <input type="text" 
+                                   :value="item.name" 
+                                   @input="updateItem(item().id, $event.target.value)"
+                                   placeholder="Type here..." 
                                    style="background: #111; color: #fff; border: 1px solid #444; padding: 5px;" />
                         </div>
                     </div>

package/app/routes/TestFor.ts

@@ -5,6 +5,10 @@ type Item = {
 
 type TestForResult = {
     items: Signal<Item[]>
+    search: Signal<string>
+    filteredItems: Computed<Item[]>
+    namesSummary: Computed<string>
+    updateItem: (id: number, name: string) => void
     addItem: () => void
     shuffleItems: () => void
     template: string
@@ -17,33 +21,55 @@ export const TestFor = defineComponent({
             { id: 2, name: 'Item 2' },
             { id: 3, name: 'Item 3' }
         ])
+        const search = signal('')
+        const filteredItems = items.filter(i =>
+            i.name.toLowerCase().includes(search().toLowerCase())
+        )
+        const namesSummary = filteredItems.map(i => i.name).join(', ')
 
         return {
             items,
+            search,
+            filteredItems,
+            namesSummary,
+            updateItem: (id, newName) => {
+                items(items().map(i => i.id === id ? { ...i, name: newName } : i))
+            },
             addItem: () => {
                 const nextIds = items().map(i => i.id)
                 const nextId = nextIds.length > 0 ? Math.max(...nextIds) + 1 : 1
-                items([...items(), { id: nextId, name: `Item ${nextId}` }])
+                items.push({ id: nextId, name: `Item ${nextId}` })
             },
             shuffleItems: () => {
-                const shuffled = [...items()].sort(() => Math.random() - 0.5)
-                items(shuffled)
+                items.sort(() => Math.random() - 0.5)
             },
             template: `
                 <div class="page">
                     <h1>Keyed f-for Test (TypeScript)</h1>
                     <p>Focus an input below, then click "Shuffle" or "Add". The focus should stay!</p>
+
+                    <p style="color: #8b8bff; background: #8b8bff11; padding: 10px; border-radius: 4px; border-left: 3px solid #8b8bff;">
+                        🔗 <strong>Reactive Summary:</strong> {{ namesSummary || 'No items found' }}
+                    </p>
                     
-                    <div style="margin-bottom: 20px; display: flex; gap: 10px;">
-                        <button @click="addItem" class="primary-btn">Add Item</button>
-                        <button @click="shuffleItems" class="primary-btn">Shuffle Items</button>
+                    <div style="margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px;">
+                        <input type="text" f-model="search" placeholder="🔍 Filter items..." 
+                               style="padding: 10px; border-radius: 4px; border: 1px solid #444; background: #111; color: #fff; width: 100%;" />
+                        
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="addItem" class="primary-btn">Add Item</button>
+                            <button @click="shuffleItems" class="primary-btn">Shuffle Items</button>
+                        </div>
                     </div>
 
                     <div style="display: flex; flex-direction: column; gap: 10px;">
-                        <div f-for="item in items" :key="item.id" 
+                        <div f-for="item in filteredItems" :key="item.id" 
                              style="padding: 10px; border: 1px solid #333; display: flex; gap: 10px; align-items: center;">
                             <span>ID: {{ item.id }}</span>
-                            <input type="text" :value="item.name" placeholder="Type here..." 
+                            <input type="text" 
+                                   :value="item.name" 
+                                   @input="updateItem(item().id, $event.target.value)"
+                                   placeholder="Type here..." 
                                    style="background: #111; color: #fff; border: 1px solid #444; padding: 5px;" />
                         </div>
                     </div>

package/auto-imports.d.ts

@@ -9,6 +9,7 @@ declare global {
   const batch: typeof import('fusee-framework').batch
   const computed: typeof import('fusee-framework').computed
   const defineComponent: typeof import('fusee-framework').defineComponent
+  const directive: typeof import('fusee-framework').directive
   const effect: typeof import('fusee-framework').effect
   const emit: typeof import('fusee-framework').emit
   const inject: typeof import('fusee-framework').inject

package/framework/auto-import-preset.js

@@ -3,6 +3,7 @@ export const FuseePreset = {
         'signal', 'computed', 'effect',
         'batch', 'untrack', 'inspect',
         'defineComponent', 'onMount', 'onUnmount',
+        'directive',
         'mountOutlet', 'mountTemplate', 'emit'
     ]
 }

package/framework/core/component.js

@@ -7,6 +7,10 @@ setEffectHook(eff => {
     if (currentInstance) currentInstance._effects.push(eff)
 })
 
+export function getCurrentInstance() {
+    return currentInstance
+}
+
 function resolveProps(schema, received) {
     const isArray = Array.isArray(schema)
     const resolved = {}
@@ -68,9 +72,6 @@ function resolveProps(schema, received) {
     return resolved
 }
 
-// ── Emit ──────────────────────────────────────────────────────────────────────
-// listeners: { change: fn, submit: fn, ... }
-// emit('change', 42) → calls listeners.change(42)
 function createEmit(listeners) {
     return function emit(eventName, ...args) {
         const handler = listeners[eventName]
@@ -82,10 +83,6 @@ function createEmit(listeners) {
     }
 }
 
-// ── Slots ─────────────────────────────────────────────────────────────────────
-// Parses slot content from parent HTML string.
-// Named slots: <template slot="header">...</template>
-// Default slot: everything else
 export function parseSlots(slotHTML) {
     const slots = { default: '' }
     if (!slotHTML || !slotHTML.trim()) return slots
@@ -105,19 +102,15 @@ export function parseSlots(slotHTML) {
     return slots
 }
 
-// Replaces <slot> and <slot name="x"> in template with actual slot content
 function resolveSlots(template, slots) {
-    // Handle named slots with any content between tags (including default content)
     let result = template.replace(/<slot\s+name="([^"]+)"\s*>[\s\S]*?<\/slot>/gi, (match, name) => {
         return slots[name] ?? ''
     })
-    // Handle default slots with any content between tags
     result = result.replace(/<slot\s*>[\s\S]*?<\/slot>/gi, () => {
         return slots.default ?? ''
     })
-    // Handle self-closing named slots
+
     result = result.replace(/<slot\s+name="([^"]+)"\s*\/>/gi, (_, name) => slots[name] ?? '')
-    // Handle self-closing default slots
     result = result.replace(/<slot\s*\/>/gi, () => slots.default ?? '')
     return result
 }
@@ -131,10 +124,6 @@ export function onUnmount(fn) {
 }
 
 export function defineComponent(options) {
-    // ComponentFactory now accepts props + optional { listeners, slots, parent }
-    // listeners: event handlers from parent @eventName="handler"
-    // slots: parsed slot HTML from parent
-    // parent: parent component instance for provide/inject
     return function ComponentFactory(props = {}, { listeners = {}, slots = {}, parent = null } = {}) {
         const instance = {
             props: options.props ? resolveProps(options.props, props) : props,
@@ -149,16 +138,13 @@ export function defineComponent(options) {
         const emit = createEmit(listeners)
 
         currentInstance = instance
-        // setup() receives (props, { emit, slots })
         const result = options.setup(instance.props, { emit, slots })
-        // Store instance reference on result for child component access
         result._instance = instance
         currentInstance = null
 
         function render(container) {
             instance._element = container
 
-            // Resolve slot placeholders before mounting
             const resolvedTemplate = resolveSlots(result.template, slots)
 
             const { effects } = mountTemplate(
@@ -201,8 +187,8 @@ export function inject(key) {
 }
 
 export function defineAsyncComponent(loaderOrOptions) {
-    const options = typeof loaderOrOptions === 'function' 
-        ? { loader: loaderOrOptions } 
+    const options = typeof loaderOrOptions === 'function'
+        ? { loader: loaderOrOptions }
         : loaderOrOptions
 
     return function AsyncComponentFactory(props = {}, { listeners = {}, slots = {}, parent = null } = {}) {

package/framework/core/composable.js

@@ -0,0 +1,27 @@
+import { getCurrentInstance } from './component.js'
+
+export function defineComposable(fn) {
+    const composable = function (...args) {
+        return fn(...args)
+    }
+
+    composable._isComposable = true
+
+    Object.defineProperty(composable, 'name', {
+        value: fn.name || 'composable',
+        configurable: true
+    })
+
+    return composable
+}
+
+export function assertSetupContext(name) {
+    const instance = getCurrentInstance()
+    if (!instance) {
+        console.warn(
+            `[framework] ${name ? name + ' ' : ''}composable was called outside of setup(). ` +
+            `Lifecycle hooks (onMount, onUnmount) and injections will not work.`
+        )
+    }
+    return instance
+}

package/framework/core/directives.js

@@ -2,6 +2,73 @@ import { signal, effect, batch } from './signal.js'
 import { evaluateExpression } from './evaluator.js'
 import { compileNode } from './compiler.js'
 
+const customDirectives = new Map()
+
+export function directive(name, definition) {
+    if (typeof name !== 'string' || !name.trim()) {
+        console.error('[framework] directive() requires a non-empty name')
+        return
+    }
+    if (!definition || typeof definition !== 'object') {
+        console.error(`[framework] directive("${name}") requires a definition object`)
+        return
+    }
+    customDirectives.set(name, definition)
+}
+
+export function processCustomDirectives(el, context, effects) {
+    if (el.nodeType !== 1 || !el.hasAttribute || !el.attributes) return
+
+    for (const attr of [...el.attributes]) {
+        const match = attr.name.match(/^f-([a-zA-Z0-9-]+)(?::([a-zA-Z0-9-]+))?(?:\.(.+))?$/)
+
+        if (!match) continue
+
+        const directiveName = match[1]
+        const arg = match[2] || null
+        const modifiersStr = match[3]
+        const modifiers = modifiersStr ? modifiersStr.split('.') : []
+
+        const definition = customDirectives.get(directiveName)
+        if (!definition) {
+            continue
+        }
+
+        el.removeAttribute(attr.name)
+
+        const value = evaluateExpression(attr.value, context)
+        const expression = attr.value
+
+        const binding = {
+            value,
+            expression,
+            arg,
+            modifiers
+        }
+
+        if (typeof definition.mounted === 'function') {
+            definition.mounted(el, binding)
+        }
+
+        if (typeof definition.updated === 'function') {
+            effects.push(effect(() => {
+                const newValue = evaluateExpression(expression, context)
+
+                if (!Object.is(binding.value, newValue)) {
+                    binding.value = newValue
+                    definition.updated(el, binding)
+                }
+            }))
+        }
+
+        if (typeof definition.unmounted === 'function') {
+            effects.push(() => {
+                definition.unmounted(el, binding)
+            })
+        }
+    }
+}
+
 export function processDirectives(root, context, components, effects) {
     if (processFor(root, context, components, effects)) return true
     if (processIf(root, context, components, effects)) return true
@@ -13,6 +80,7 @@ export function processDirectives(root, context, components, effects) {
     processHtml(root, context, effects)
     processText(root, context, effects)
     processEvents(root, context, effects)
+    processCustomDirectives(root, context, effects)
     processCloak(root)
 
     return false
@@ -282,7 +350,7 @@ export function processIs(el, context, components, effects) {
     // 1. Prepare directive state
     const expr = el.getAttribute('f-is')
     const keepAlive = processKeepAlive(el)
-    
+
     el.removeAttribute('f-is')
 
     const anchor = document.createComment('f-keepAlive-anchor')

package/framework/core/signal.js

@@ -51,6 +51,10 @@ export function signal(initialValue) {
     }
 
     accessor.isSignal = true
+
+    if (Array.isArray(initialValue)) addMutatingArrayMethods(accessor)
+    addReactiveArrayMethods(accessor)
+
     return accessor
 }
 
@@ -125,6 +129,9 @@ export function computed(fn) {
 
     accessor.isSignal = true
     accessor.readonly = true
+
+    addReactiveArrayMethods(accessor)
+
     return accessor
 }
 
@@ -138,11 +145,6 @@ export function untrack(fn) {
     }
 }
 
-/**
- * Reactive log helper similar to Svelte 5's $inspect.
- * Watches signals or functions and logs their current values on change.
- * Only active in development mode.
- */
 export function inspect(...args) {
     const isDev = typeof import.meta.env !== 'undefined' ? !!import.meta.env.DEV : true
     if (!isDev) return
@@ -157,3 +159,88 @@ export function inspect(...args) {
         console.log('[inspect]', ...values)
     })
 }
+
+function addReactiveArrayMethods(accessor) {
+    // Transformations
+    accessor.map = (fn) => computed(() => accessor()?.map?.(fn) ?? [])
+    accessor.filter = (fn) => computed(() => accessor()?.filter?.(fn) ?? [])
+    accessor.slice = (...args) => computed(() => accessor()?.slice?.(...args) ?? [])
+    accessor.concat = (...args) => computed(() => accessor()?.concat?.(...args) ?? [])
+    accessor.flat = (depth) => computed(() => accessor()?.flat?.(depth) ?? [])
+    accessor.flatMap = (fn) => computed(() => accessor()?.flatMap?.(fn) ?? [])
+
+    // Searches
+    accessor.find = (fn) => computed(() => accessor()?.find?.(fn))
+    accessor.findLast = (fn) => computed(() => accessor()?.findLast?.(fn))
+    accessor.findIndex = (fn) => computed(() => accessor()?.findIndex?.(fn))
+    accessor.findLastIndex = (fn) => computed(() => accessor()?.findLastIndex?.(fn))
+    accessor.indexOf = (searchElement, fromIdx) => computed(() => accessor()?.indexOf?.(searchElement, fromIdx))
+    accessor.lastIndexOf = (searchElement, fromIdx) => computed(() => accessor()?.lastIndexOf?.(searchElement, fromIdx))
+    accessor.includes = (searchElement, fromIdx) => computed(() => accessor()?.includes?.(searchElement, fromIdx))
+
+    // Validations
+    accessor.every = (fn) => computed(() => accessor()?.every?.(fn))
+    accessor.some = (fn) => computed(() => accessor()?.some?.(fn))
+
+    // Accumulators & Access
+    accessor.reduce = (...args) => computed(() => accessor()?.reduce?.(...args))
+    accessor.at = (index) => computed(() => accessor()?.at?.(index))
+    accessor.join = (separator) => computed(() => accessor()?.join?.(separator) ?? '')
+}
+
+function addMutatingArrayMethods(accessor) {
+    accessor.push = (...items) => {
+        const next = [...accessor(), ...items]
+        accessor(next)
+        return next.length
+    }
+
+    accessor.pop = () => {
+        const arr = accessor()
+        if (arr.length === 0) return undefined
+        const item = arr[arr.length - 1]
+        accessor(arr.slice(0, -1))
+        return item
+    }
+
+    accessor.shift = () => {
+        const arr = accessor()
+        if (arr.length === 0) return undefined
+        const item = arr[0]
+        accessor(arr.slice(1))
+        return item
+    }
+
+    accessor.unshift = (...items) => {
+        const next = [...items, ...accessor()]
+        accessor(next)
+        return next.length
+    }
+
+    accessor.splice = (start, deleteCount, ...items) => {
+        const arr = [...accessor()]
+        const removed = arr.splice(start, deleteCount, ...items)
+        accessor(arr)
+        return removed
+    }
+
+    accessor.remove = (predicate) => {
+        accessor(accessor().filter((item, i) => !predicate(item, i)))
+    }
+
+    accessor.clear = () => {
+        accessor([])
+    }
+
+    accessor.sort = (compareFn) => {
+        const next = [...accessor()].sort(compareFn)
+        accessor(next)
+        return accessor
+    }
+
+    accessor.reverse = () => {
+        const next = [...accessor()].reverse()
+        accessor(next)
+        return accessor
+    }
+}

package/framework/index.js

@@ -1,8 +1,10 @@
 // ─── Framework Public API ─────────────────────────────────────────────────────
 export { signal, computed, effect, batch, untrack, inspect } from './core/signal.js'
-export { defineComponent, defineAsyncComponent, onMount, onUnmount, parseSlots, provide, inject } from './core/component.js'
+export { defineComponent, defineAsyncComponent, onMount, onUnmount, parseSlots, provide, inject, getCurrentInstance } from './core/component.js'
 export { createRouter, navigate, mountOutlet } from './router/router.js'
 export { mountTemplate } from './core/compiler.js'
 
-// Emit is a placeholder - actual emit function is created per component
+export { defineComposable, assertSetupContext } from './core/composable.js'
+export { directive } from './core/directives.js'
+
 export const emit = () => console.warn('[framework] emit() can only be used inside component setup()')