@Clamp() decorates getters only, not the method "reset".
@SessionValue(): setup() must return an object (a FieldSetup), got undefined.

import { createFieldDecorator } from '@praxisjs/decorators'
import { signal } from '@praxisjs/core/internal'
import type { Signal } from '@praxisjs/shared'

type Slots = Record<symbol, unknown>

export function SessionValue(key: string) {
  return createFieldDecorator<object, string>({
    label: '@SessionValue()',
    setup(name) {
      const slot = Symbol(`sessionValue.${name}`)
      return {
        get(this: Slots) {
          return (this[slot] as Signal<string>)()
        },
        set(this: Slots, value) {
          (this[slot] as Signal<string>).set(value)
          sessionStorage.setItem(key, value)
        },
        init(instance, initialValue) {
          (instance as Slots)[slot] = signal(sessionStorage.getItem(key) ?? initialValue)
        },
      }
    },
  })
}

@Component()
class SearchPage extends StatefulComponent {
  @SessionValue('search:query') query = ''

  render() {
    return (
      <input
        value={() => this.query}
        onInput={(e: Event) => { this.query = (e.target as HTMLInputElement).value }}
      />
    )
  }
}

export function Trimmed() {
  return createFieldDecorator<object, string>({
    label: '@Trimmed()',
    bind(instance, name) {
      const inner = Object.getOwnPropertyDescriptor(instance, name)
      return {
        descriptor: {
          get: () => inner?.get?.call(instance) as string,
          set: (value: string) => inner?.set?.call(instance, value.trim()),
        },
      }
    },
  })
}

@Trimmed() @State() email = ''   // @State runs first, @Trimmed wraps its accessor

@State() decorates plain class fields only: remove `accessor` from "count".

import { addClaimableInitializer, assertFieldContext } from '@praxisjs/decorators'

export function ReadOnly() {
  return function (_value: undefined, context: ClassFieldDecoratorContext) {
    assertFieldContext(context, '@ReadOnly()')
    const slot = Symbol(String(context.name))
    const descriptor = {
      get(this: Record<symbol, unknown>) { return this[slot] },
      enumerable: true,
      configurable: true,
    }
    addClaimableInitializer(context, function (initial) {
      (this as Record<symbol, unknown>)[slot] = initial
      Object.defineProperty(this, context.name, descriptor)
    })
  }
}

import { createMethodDecorator } from '@praxisjs/decorators'

export function Confirm(message: string) {
  return createMethodDecorator({
    label: '@Confirm()',
    setup(original) {
      return function (this: object, ...args: unknown[]) {
        if (window.confirm(message)) return original.apply(this, args)
      }
    },
  })
}

@Confirm('Delete this item permanently?')
async deleteItem(id: number) {
  await api.delete(id)
}

const calls = Symbol('calls')

export function CountCalls() {
  return createMethodDecorator({
    setup(original) {
      return function (this: { [calls]?: number }, ...args: unknown[]) {
        this[calls] = (this[calls] ?? 0) + 1
        return original.apply(this, args)
      }
    },
  })
}

export function Later(ms: number) {
  return createMethodDecorator({
    setup(original, context) {
      const timer = Symbol(`timer.${String(context.name)}`)
      return {
        method(this: Slots, ...args: unknown[]) {
          clearTimeout(this[timer] as number | undefined)
          this[timer] = setTimeout(() => original.apply(this, args), ms)
        },
        onUnmount(instance) {
          clearTimeout((instance as Slots)[timer] as number | undefined)
        },
      }
    },
  })
}

export function Logged() {
  return createMethodDecorator({
    wrap(original, instance, name) {
      const tag = `${instance.constructor.name}.${name}`
      return (...args: unknown[]) => {
        console.log(tag, args)
        return original.apply(instance, args)
      }
    },
  })
}

import { createLifecycleMethodDecorator } from '@praxisjs/decorators'

export function OnResize() {
  return createLifecycleMethodDecorator({
    label: '@OnResize()',
    register(callback) {
      window.addEventListener('resize', callback)
      return () => { window.removeEventListener('resize', callback) }
    },
  })
}

@Component()
class Layout extends StatefulComponent {
  @State() cols = 3

  @OnResize()
  recalculate() {
    this.cols = window.innerWidth > 1024 ? 4 : window.innerWidth > 640 ? 3 : 1
  }

  render() {
    return <Grid cols={() => this.cols} />
  }
}

export function OnKey(key: string) {
  return createLifecycleMethodDecorator<StatefulComponent, [event: KeyboardEvent]>({
    register(callback) {
      const listener = (event: KeyboardEvent) => { if (event.key === key) callback(event) }
      window.addEventListener('keydown', listener)
      return () => { window.removeEventListener('keydown', listener) }
    },
  })
}

import { createGetterDecorator } from '@praxisjs/decorators'

export function Clamp(min: number, max: number) {
  return createGetterDecorator<object, number>({
    label: '@Clamp()',
    setup(original) {
      return function (this: object) {
        return Math.min(max, Math.max(min, original.call(this)))
      }
    },
  })
}

@Component()
class Slider extends StatefulComponent {
  @State() raw = 0

  @Clamp(0, 100)
  get value() { return this.raw }   // always between 0 and 100

  render() {
    return <p>{() => this.value}</p>
  }
}

import { createWritableGetterDecorator } from '@praxisjs/decorators'
import { signal } from '@praxisjs/core/internal'
import type { Signal } from '@praxisjs/shared'

export function Overridable() {
  return createWritableGetterDecorator({
    label: '@Overridable()',
    setup(original, context) {
      const pinned = Symbol(`pinned.${String(context.name)}`)
      return {
        get(this: Slots) {
          const value = (this[pinned] as Signal<unknown>)()
          return value === undefined ? original.call(this) : value
        },
        set(this: Slots, value) {
          (this[pinned] as Signal<unknown>).set(value)
        },
        init(instance) {
          (instance as Slots)[pinned] = signal(undefined)
        },
      }
    },
  })
}

@Component()
class PageHeader extends StatefulComponent {
  @State() page = { title: 'Home' }

  @Overridable()
  get title(): string | undefined { return this.page.title }
  set title(_value: string | undefined) { /* replaced by @Overridable() */ }

  render() {
    return (
      <div>
        <h1>{() => this.title}</h1>
        <button onClick={() => { this.title = 'Custom' }}>Pin title</button>
        <button onClick={() => { this.title = undefined }}>Reset</button>
      </div>
    )
  }
}

import { createGetterObserverDecorator } from '@praxisjs/decorators'
import { effect } from '@praxisjs/core/internal'

export function LogChange() {
  return createGetterObserverDecorator({
    register(getter, instance, name) {
      return effect(() => { console.log(`[${name}]`, getter.call(instance)) })
    },
  })
}

@LogChange()
@Computed()
get filteredItems() {
  return this.items.filter((i) => i.active)
}

import { createClassDecorator, ClassBehavior } from '@praxisjs/decorators'

class AnalyticsBehavior extends ClassBehavior {
  constructor(private readonly name: string) { super() }

  onMount()   { analytics.track('mount',   { component: this.name }) }
  onUnmount() { analytics.track('unmount', { component: this.name }) }
}

export function Analytics(name: string) {
  return createClassDecorator(new AnalyticsBehavior(name))
}

@Analytics('UserDashboard')
@Component()
class UserDashboard extends StatefulComponent { /* ... */ }

class TimedRender extends ClassBehavior {
  render(instance: RootComponent, originalRender: () => Node | Node[] | null) {
    const start = performance.now()
    const nodes = originalRender()
    console.log(instance.constructor.name, performance.now() - start)
    return nodes
  }
}

import type { FieldDecorator } from '@praxisjs/decorators'

export function SessionValue(key: string): FieldDecorator<object, string> { /* ... */ }

import { describe, it, expect } from 'vitest'
import { StatefulComponent } from '@praxisjs/core'
import { SessionValue } from './session-value'

class Search extends StatefulComponent {
  @SessionValue('test:q') query = 'initial'
  render() { return null }
}

describe('@SessionValue', () => {
  it('starts from the stored value and writes through', () => {
    sessionStorage.setItem('test:q', 'stored')
    const search = new Search()
    expect(search.query).toBe('stored')
    search.query = 'next'
    expect(sessionStorage.getItem('test:q')).toBe('next')
  })

  it('keeps instances independent', () => {
    sessionStorage.clear()
    const a = new Search()
    const b = new Search()
    a.query = 'a'
    expect(b.query).toBe('initial')
  })

  it('names itself when misplaced', () => {
    expect(() => {
      class Wrong {
        // @ts-expect-error -- a field decorator on a method
        @SessionValue('k') run() {}
      }
      return Wrong
    }).toThrow('@SessionValue() decorates class fields only, not the method "run".')
  })
})

// Before
export function Bounded(min: number, max: number) {
  return createAccessorDecorator({
    bind(_instance, _name, initialValue) {
      const s = signal(clamp(initialValue as number))
      return { get: () => s(), set: (v) => s.set(clamp(v as number)) }
    },
  })
}
@Bounded(0, 100) accessor volume = 80

// After
export function Bounded(min: number, max: number) {
  const clamp = (v: number) => Math.min(max, Math.max(min, v))
  return createFieldDecorator<object, number>({
    setup(name) {
      const slot = Symbol(`bounded.${name}`)
      return {
        get(this: Slots) { return (this[slot] as Signal<number>)() },
        set(this: Slots, v) { (this[slot] as Signal<number>).set(clamp(v)) },
        init(instance, initialValue) { (instance as Slots)[slot] = signal(clamp(initialValue)) },
      }
    },
  })
}
@Bounded(0, 100) volume = 80

// Before
@Computed({
  get(this: Converter) { return (this.celsius * 9) / 5 + 32 },
  set(this: Converter, f: number) { this.celsius = ((f - 32) * 5) / 9 },
})
accessor fahrenheit!: number

// After
@Computed()
get fahrenheit() { return (this.celsius * 9) / 5 + 32 }
set fahrenheit(f: number) { this.celsius = ((f - 32) * 5) / 9 }