separate node and gjs into its own package

9 files changed, 740 insertions, 0 deletions

diff --git a/node/src/application.ts b/node/src/application.ts
new file mode 100644
index 0000000..bc0f47f
--- /dev/null
+++ b/node/src/application.ts
@@ -0,0 +1,78 @@
+import gi from "node-gtk"
+const Astal = gi.require("Astal", "0.1")
+
+type RequestHandler = {
+    (request: string, res: (response: string) => void): void
+}
+
+type Config = Partial<{
+    instanceName: string
+    gtkTheme: string
+    iconTheme: string
+    cursorTheme: string
+    css: string
+    requestHandler: RequestHandler
+    hold: boolean
+}>
+
+class AstalJS extends Astal.Application {
+    static GTypeName = "AstalJS"
+    static { gi.registerClass(this) }
+
+    eval(body: string): Promise<any> {
+        return new Promise((res, rej) => {
+            try {
+                const fn = Function(`return (async function() {
+                    ${body.includes(";") ? body : `return ${body};`}
+                })`)
+                fn()()
+                    .then(res)
+                    .catch(rej)
+            } catch (error) {
+                rej(error)
+            }
+        })
+    }
+
+    requestHandler?: RequestHandler
+
+    vfunc_response(msg: string, conn: any): void {
+        if (typeof this.requestHandler === "function") {
+            this.requestHandler(msg, response => {
+                Astal.writeSock(conn, response, (_, res) =>
+                    Astal.writeSockFinish(res),
+                )
+            })
+        } else {
+            // @ts-expect-error missing type
+            super.vfunc_response(msg, conn)
+        }
+    }
+
+    start(
+        { requestHandler, css, ...cfg }: Omit<Config, "hold"> = {},
+        callback?: (args: string[]) => any,
+    ) {
+        Object.assign(this, cfg)
+
+        this.requestHandler = requestHandler
+        this.on("activate", () => {
+            callback?.(process.argv)
+        })
+
+        if (!this.acquireSocket()) {
+            console.error(`Astal instance "${this.instanceName}" already running`)
+            process.exit()
+        }
+
+        if (css)
+            this.applyCss(css, false)
+
+        // FIXME: promises never resolve
+        // https://github.com/romgrk/node-gtk/issues/121
+        // https://gitlab.gnome.org/GNOME/gjs/-/issues/468
+        App.run([])
+    }
+}
+
+export const App = new AstalJS
diff --git a/node/src/astalify.ts b/node/src/astalify.ts
new file mode 100644
index 0000000..3bd00eb
--- /dev/null
+++ b/node/src/astalify.ts
@@ -0,0 +1,220 @@
+import { Astal, Gtk } from "./imports.js"
+import Binding, { kebabify, type Connectable, type Subscribable } from "./binding.js"
+
+export type Widget<C extends { new(...args: any): any }> = InstanceType<C> & {
+    className: string
+    css: string
+    cursor: Cursor
+    hook(
+        object: Connectable,
+        signal: string,
+        callback: (self: Widget<C>, ...args: any[]) => void,
+    ): Widget<C>
+    hook(
+        object: Subscribable,
+        callback: (self: Widget<C>, ...args: any[]) => void,
+    ): Widget<C>
+}
+
+
+function setter(prop: string) {
+    return `set${prop.charAt(0).toUpperCase() + prop.slice(1)}`
+}
+
+function hook(
+    self: any,
+    object: Connectable | Subscribable,
+    signalOrCallback: string | ((self: any, ...args: any[]) => void),
+    callback?: (self: any, ...args: any[]) => void,
+) {
+    if (typeof object.connect === "function" && callback) {
+        const id = object.connect(signalOrCallback, (_: any, ...args: unknown[]) => {
+            callback(self, ...args)
+        })
+        self.connect("destroy", () => {
+            (object.disconnect as Connectable["disconnect"])(id)
+        })
+    }
+
+    else if (typeof object.subscribe === "function" && typeof signalOrCallback === "function") {
+        const unsub = object.subscribe((...args: unknown[]) => {
+            signalOrCallback(self, ...args)
+        })
+        self.connect("destroy", unsub)
+    }
+
+    return self
+}
+
+function setChild(parent: any, child: any) {
+    if (parent instanceof Gtk.Bin) {
+        if (parent.getChild())
+            parent.remove(parent.getChild()!)
+    }
+    if (parent instanceof Gtk.Container)
+        parent.add(child)
+}
+
+function ctor(self: any, config: any, ...children: any[]) {
+    const { setup, child, ...props } = config
+    props.visible ??= true
+
+    const bindings = Object.keys(props).reduce((acc: any, prop) => {
+        if (props[prop] instanceof Binding) {
+            const bind = [prop, props[prop]]
+            prop === "child"
+                ? setChild(self, props[prop].get())
+                : self[setter(prop)](props[prop].get())
+
+            delete props[prop]
+            return [...acc, bind]
+        }
+        return acc
+    }, [])
+
+    const onHandlers = Object.keys(props).reduce((acc: any, key) => {
+        if (key.startsWith("on")) {
+            const sig = kebabify(key).split("-").slice(1).join("-")
+            const handler = [sig, props[key]]
+            delete props[key]
+            return [...acc, handler]
+        }
+        return acc
+    }, [])
+
+    Object.assign(self, props)
+    Object.assign(self, {
+        hook(obj: any, sig: any, callback: any) {
+            return hook(self, obj, sig, callback)
+        },
+    })
+
+    if (child instanceof Binding) {
+        setChild(self, child.get())
+        self.connect("destroy", child.subscribe(v => {
+            setChild(self, v)
+        }))
+    } else if (self instanceof Gtk.Container && child instanceof Gtk.Widget) {
+        self.add(child)
+    }
+
+    for (const [signal, callback] of onHandlers)
+        self.connect(signal, callback)
+
+    if (self instanceof Gtk.Container && children) {
+        for (const child of children)
+            self.add(child)
+    }
+
+    for (const [prop, bind] of bindings) {
+        self.connect("destroy", bind.subscribe((v: any) => {
+            self[`${setter(prop)}`](v)
+        }))
+    }
+
+    setup?.(self)
+    return self
+}
+
+function proxify<
+    C extends { new(...args: any[]): any },
+>(klass: C) {
+    Object.defineProperty(klass.prototype, "className", {
+        get() { return Astal.widgetGetClassNames(this).join(" ") },
+        set(v) { Astal.widgetSetClassNames(this, v.split(/\s+/)) },
+    })
+
+    Object.defineProperty(klass.prototype, "css", {
+        get() { return Astal.widgetGetCss(this) },
+        set(v) { Astal.widgetSetCss(this, v) },
+    })
+
+    Object.defineProperty(klass.prototype, "cursor", {
+        get() { return Astal.widgetGetCursor(this) },
+        set(v) { Astal.widgetSetCursor(this, v) },
+    })
+
+    const proxy = new Proxy(klass, {
+        construct(_, [conf, ...children]) {
+            const self = new klass
+            return ctor(self, conf, ...children)
+        },
+        apply(_t, _a, [conf, ...children]) {
+            const self = new klass
+            return ctor(self, conf, ...children)
+        },
+    })
+
+    return proxy
+}
+
+export default function astalify<
+    C extends typeof Gtk.Widget,
+    P extends Record<string, any>,
+    N extends string = "Widget",
+>(klass: C) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    type Astal<N> = Omit<C, "new"> & {
+        new(props: P, ...children: InstanceType<typeof Gtk.Widget>[]): Widget<C>
+        (props: P, ...children: InstanceType<typeof Gtk.Widget>[]): Widget<C>
+    }
+
+    return proxify(klass) as unknown as Astal<N>
+}
+
+
+type BindableProps<T> = {
+    [K in keyof T]: Binding<NonNullable<T[K]>> | T[K];
+}
+
+export type ConstructProps<
+    Self extends { new(...args: any[]): any },
+    Props = unknown,
+    Signals = unknown
+> = {
+    [Key in `on${string}`]: (self: Widget<Self>) => unknown
+} & Partial<Signals> & BindableProps<Props & {
+    className?: string
+    css?: string
+    cursor?: string
+}> & {
+    onDestroy?: (self: Widget<Self>) => unknown
+    onDraw?: (self: Widget<Self>) => unknown
+    setup?: (self: Widget<Self>) => void
+}
+
+type Cursor =
+    | "default"
+    | "help"
+    | "pointer"
+    | "context-menu"
+    | "progress"
+    | "wait"
+    | "cell"
+    | "crosshair"
+    | "text"
+    | "vertical-text"
+    | "alias"
+    | "copy"
+    | "no-drop"
+    | "move"
+    | "not-allowed"
+    | "grab"
+    | "grabbing"
+    | "all-scroll"
+    | "col-resize"
+    | "row-resize"
+    | "n-resize"
+    | "e-resize"
+    | "s-resize"
+    | "w-resize"
+    | "ne-resize"
+    | "nw-resize"
+    | "sw-resize"
+    | "se-resize"
+    | "ew-resize"
+    | "ns-resize"
+    | "nesw-resize"
+    | "nwse-resize"
+    | "zoom-in"
+    | "zoom-out"
diff --git a/node/src/binding.ts b/node/src/binding.ts
new file mode 100644
index 0000000..a8b6d55
--- /dev/null
+++ b/node/src/binding.ts
@@ -0,0 +1,78 @@
+export const kebabify = (str: string) => str
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .replaceAll("_", "-")
+    .toLowerCase()
+
+export interface Subscribable<T = unknown> {
+    subscribe(callback: () => void): () => void
+    get(): T
+    [key: string]: any
+}
+
+export interface Connectable {
+    connect(signal: string, callback: (...args: any[]) => unknown): number
+    disconnect(id: number): void
+    [key: string]: any
+}
+
+export default class Binding<Value> {
+    private emitter: Subscribable<Value> | Connectable
+    private prop?: string
+    private transformFn = (v: any) => v
+
+    static bind<
+        T extends Connectable,
+        P extends keyof T,
+    >(object: T, property: P): Binding<T[P]>
+
+    static bind<T>(object: Subscribable<T>): Binding<T>
+
+    static bind(emitter: Connectable | Subscribable, prop?: string) {
+        return new Binding(emitter, prop)
+    }
+
+    private constructor(emitter: Connectable | Subscribable<Value>, prop?: string) {
+        this.emitter = emitter
+        this.prop = prop && kebabify(prop)
+    }
+
+    toString() {
+        return `Binding<${this.emitter}${this.prop ? `, "${this.prop}"` : ""}>`
+    }
+
+    as<T>(fn: (v: Value) => T): Binding<T> {
+        const bind = new Binding(this.emitter, this.prop)
+        bind.transformFn = (v: Value) => fn(this.transformFn(v))
+        return bind as unknown as Binding<T>
+    }
+
+    get(): Value {
+        if (typeof this.emitter.get === "function")
+            return this.transformFn(this.emitter.get())
+
+        if (typeof this.prop === "string")
+            return this.transformFn(this.emitter[this.prop])
+
+        throw Error("can not get value of binding")
+    }
+
+    subscribe(callback: (value: Value) => void): () => void {
+        if (typeof this.emitter.subscribe === "function") {
+            return this.emitter.subscribe(() => {
+                callback(this.get())
+            })
+        }
+        else if (typeof this.emitter.connect === "function") {
+            const signal = `notify::${this.prop}`
+            const id = this.emitter.connect(signal, () => {
+                callback(this.get())
+            })
+            return () => {
+                (this.emitter.disconnect as Connectable["disconnect"])(id)
+            }
+        }
+        throw Error(`${this.emitter} is not bindable`)
+    }
+}
+
+export const { bind } = Binding
diff --git a/node/src/imports.ts b/node/src/imports.ts
new file mode 100644
index 0000000..47f582a
--- /dev/null
+++ b/node/src/imports.ts
@@ -0,0 +1,8 @@
+import gi from "node-gtk"
+
+export { gi }
+export const Gtk = gi.require("Gtk", "3.0")
+export const GLib = gi.require("GLib", "2.0")
+export const Gio = gi.require("Gio", "3.0")
+export const GObject = gi.require("GObject", "2.0")
+export const Astal = gi.require("Astal", "0.1")
diff --git a/node/src/index.ts b/node/src/index.ts
new file mode 100644
index 0000000..77fba88
--- /dev/null
+++ b/node/src/index.ts
@@ -0,0 +1,9 @@
+export { subprocess, exec, execAsync } from "./process.js"
+export { interval, timeout, idle } from "./time.js"
+export { bind } from "./binding.js"
+export { Variable } from "./variable.js"
+export * as Widget from "./widgets.js"
+export { App } from "./application.js"
+
+// for convinience
+export { Astal, Gtk, GLib, GObject, Gio, gi } from "./imports.js"
diff --git a/node/src/process.ts b/node/src/process.ts
new file mode 100644
index 0000000..604e142
--- /dev/null
+++ b/node/src/process.ts
@@ -0,0 +1,68 @@
+import { Astal } from "./imports.js"
+
+type Process = ReturnType<typeof Astal.Process.subprocess>
+
+type Args<Out = void, Err = void> = {
+    cmd: string | string[],
+    out?: (stdout: string) => Out,
+    err?: (stderr: string) => Err,
+}
+
+export function args<O, E>(argsOrCmd: Args | string | string[], onOut: O, onErr: E) {
+    const params = Array.isArray(argsOrCmd) || typeof argsOrCmd === "string"
+    return {
+        cmd: params ? argsOrCmd : argsOrCmd.cmd,
+        err: params ? onErr : argsOrCmd.err || onErr,
+        out: params ? onOut : argsOrCmd.out || onOut,
+    }
+}
+
+export function subprocess(args: Args): Process
+export function subprocess(
+    cmd: string | string[],
+    onOut?: (stdout: string) => void,
+    onErr?: (stderr: string) => void,
+): Process
+export function subprocess(
+    argsOrCmd: Args | string | string[],
+    onOut: (stdout: string) => void = console.log,
+    onErr: (stderr: string) => void = console.error,
+) {
+    const { cmd, err, out } = args(argsOrCmd, onOut, onErr)
+    const proc = Array.isArray(cmd)
+        ? Astal.Process.subprocessv(cmd)
+        : Astal.Process.subprocess(cmd)
+
+    proc.connect("stdout", (_: any, stdout: string) => out(stdout))
+    proc.connect("stderr", (_: any, stderr: string) => err(stderr))
+    return proc
+}
+
+export function exec<Out = string, Err = string>(
+    args: Args<Out, Err>
+): Out | Err
+export function exec<Out = string, Err = string>(
+    cmd: string | string[],
+    onOut?: (stdout: string) => Out,
+    onErr?: (stderr: string) => Err,
+): Out | Err
+export function exec<Out = string, Err = string>(
+    argsOrCmd: Args<Out, Err> | string | string[],
+    onOut: (stdout: string) => Out = out => out as Out,
+    onErr: (stderr: string) => Err = out => out as Err,
+): Out | Err {
+    const { cmd, err, out } = args(argsOrCmd, onOut, onErr)
+    return Array.isArray(cmd)
+        ? out(Astal.Process.execv(cmd)!) as Out
+        : err(Astal.Process.exec(cmd)!) as Err
+}
+
+export function execAsync(cmd: string | string[]): Promise<string> {
+    const proc = Array.isArray(cmd)
+        ? Astal.Process.execAsyncv(cmd)
+        : Astal.Process.execAsync(cmd)
+    return new Promise((resolve, reject) => {
+        proc.connect("stdout", (_: any, out: string) => resolve(out))
+        proc.connect("stderr", (_: any, err: string) => reject(err))
+    })
+}
diff --git a/node/src/time.ts b/node/src/time.ts
new file mode 100644
index 0000000..e72a276
--- /dev/null
+++ b/node/src/time.ts
@@ -0,0 +1,20 @@
+import { Astal } from "./imports.js"
+
+
+export function interval(interval: number, callback: () => void) {
+    const t = Astal.Time.interval(interval, null)
+    t.connect("now", callback)
+    return t
+}
+
+export function timeout(timeout: number, callback: () => void) {
+    const t = Astal.Time.timeout(timeout, null)
+    t.connect("now", callback)
+    return t
+}
+
+export function idle(callback: () => void) {
+    const t = Astal.Time.idle(null)
+    t.connect("now", callback)
+    return t
+}
diff --git a/node/src/variable.ts b/node/src/variable.ts
new file mode 100644
index 0000000..c5fb927
--- /dev/null
+++ b/node/src/variable.ts
@@ -0,0 +1,222 @@
+import { Astal } from "./imports.js"
+import { interval } from "./time.js"
+import { subprocess, execAsync } from "./process.js"
+import Binding, { type Connectable } from "./binding.js"
+
+class VariableWrapper<T> extends Function {
+    private variable!: InstanceType<typeof Astal.VariableBase>
+    private errHandler? = console.error
+
+    private _value: T
+    private _poll?: InstanceType<typeof Astal.Time>
+    private _watch?: InstanceType<typeof Astal.Process>
+
+    private pollInterval = 1000
+    private pollExec?: string[] | string
+    private pollTransform?: (stdout: string, prev: T) => T
+    private pollFn?: (prev: T) => T | Promise<T>
+
+    private watchTransform?: (stdout: string, prev: T) => T
+    private watchExec?: string[] | string
+
+    constructor(init: T) {
+        super()
+        this._value = init
+        this.variable = new Astal.VariableBase
+        this.variable.connect("dropped", () => {
+            this.stopWatch()
+            this.stopPoll()
+        })
+        this.variable.connect("error", (_: any, err: string) => this.errHandler?.(err))
+        return new Proxy(this, {
+            apply: (target, _, args) => target._call(args[0]),
+        })
+    }
+
+    private _call<R = T>(transform?: (value: T) => R): Binding<R> {
+        const b = Binding.bind(this)
+        return transform ? b.as(transform) : b as unknown as Binding<R>
+    }
+
+    toString() {
+        return String(`Variable<${this.get()}>`)
+    }
+
+    get(): T { return this._value }
+    set(value: T) {
+        if (value !== this._value) {
+            this._value = value
+            this.variable.emit("changed")
+        }
+    }
+
+    startPoll() {
+        if (this._poll)
+            return
+
+        if (this.pollFn) {
+            this._poll = interval(this.pollInterval, () => {
+                const v = this.pollFn!(this.get())
+                if (v instanceof Promise) {
+                    v.then(v => this.set(v))
+                        .catch(err => this.variable.emit("error", err))
+                } else {
+                    this.set(v)
+                }
+            })
+        } else if (this.pollExec) {
+            this._poll = interval(this.pollInterval, () => {
+                execAsync(this.pollExec!)
+                    .then(v => this.set(this.pollTransform!(v, this.get())))
+                    .catch(err => this.variable.emit("error", err))
+            })
+        }
+    }
+
+    startWatch() {
+        if (this._watch)
+            return
+
+        this._watch = subprocess({
+            cmd: this.watchExec!,
+            out: out => this.set(this.watchTransform!(out, this.get())),
+            err: err => this.variable.emit("error", err),
+        })
+    }
+
+    stopPoll() {
+        this._poll?.cancel()
+        delete this._poll
+    }
+
+    stopWatch() {
+        this._watch?.kill()
+        delete this._watch
+    }
+
+    isPolling() { return !!this._poll }
+    isWatching() { return !!this._watch }
+
+    drop() {
+        this.variable.emit("dropped")
+        this.variable.runDispose()
+    }
+
+    onDropped(callback: () => void) {
+        this.variable.connect("dropped", callback)
+        return this as unknown as Variable<T>
+    }
+
+    onError(callback: (err: string) => void) {
+        delete this.errHandler
+        this.variable.connect("error", (_: any, err: string) => callback(err))
+        return this as unknown as Variable<T>
+    }
+
+    subscribe(callback: (value: T) => void) {
+        const id = this.variable.connect("changed", () => {
+            callback(this.get())
+        })
+        return () => this.variable.disconnect(id)
+    }
+
+    poll(
+        interval: number,
+        exec: string | string[],
+        transform?: (stdout: string, prev: T) => T
+    ): Variable<T>
+
+    poll(
+        interval: number,
+        callback: (prev: T) => T | Promise<T>
+    ): Variable<T>
+
+    poll(
+        interval: number,
+        exec: string | string[] | ((prev: T) => T | Promise<T>),
+        transform: (stdout: string, prev: T) => T = out => out as T,
+    ) {
+        this.stopPoll()
+        this.pollInterval = interval
+        this.pollTransform = transform
+        if (typeof exec === "function") {
+            this.pollFn = exec
+            delete this.pollExec
+        } else {
+            this.pollExec = exec
+            delete this.pollFn
+        }
+        this.startPoll()
+        return this as unknown as Variable<T>
+    }
+
+    watch(
+        exec: string | string[],
+        transform: (stdout: string, prev: T) => T = out => out as T,
+    ) {
+        this.stopWatch()
+        this.watchExec = exec
+        this.watchTransform = transform
+        this.startWatch()
+        return this as unknown as Variable<T>
+    }
+
+    observe(
+        objs: Array<[obj: Connectable, signal: string]>,
+        callback: (...args: any[]) => T): Variable<T>
+
+    observe(
+        obj: Connectable,
+        signal: string,
+        callback: (...args: any[]) => T): Variable<T>
+
+    observe(
+        objs: Connectable | Array<[obj: Connectable, signal: string]>,
+        sigOrFn: string | ((...args: any[]) => T),
+        callback?: (...args: any[]) => T,
+    ) {
+        const f = typeof sigOrFn === "function" ? sigOrFn : callback ?? (() => this.get())
+        const set = (_: Connectable, ...args: any[]) => this.set(f(...args))
+
+        if (Array.isArray(objs)) {
+            for (const obj of objs) {
+                const [o, s] = obj
+                o.connect(s, set)
+            }
+        } else {
+            if (typeof sigOrFn === "string")
+                objs.connect(sigOrFn, set)
+        }
+
+        return this as unknown as Variable<T>
+    }
+
+    static derive<V,
+        const Deps extends Array<Variable<any> | Binding<any>>,
+        Args extends {
+            [K in keyof Deps]: Deps[K] extends Variable<infer T>
+            ? T : Deps[K] extends Binding<infer T> ? T : never
+        },
+    >(deps: Deps, fn: (...args: Args) => V) {
+        const update = () => fn(...deps.map(d => d.get()) as Args)
+        const derived = new Variable(update())
+        const unsubs = deps.map(dep => dep.subscribe(() => derived.set(update())))
+        derived.onDropped(() => unsubs.map(unsub => unsub()))
+        return derived
+    }
+}
+
+export interface Variable<T> extends Omit<VariableWrapper<T>, "bind"> {
+    <R>(transform: (value: T) => R): Binding<R>
+    (): Binding<T>
+}
+
+export const Variable = new Proxy(VariableWrapper as any, {
+    apply: (_t, _a, args) => new VariableWrapper(args[0]),
+}) as {
+    derive: typeof VariableWrapper["derive"]
+    <T>(init: T): Variable<T>
+    new <T>(init: T): Variable<T>
+}
+
+export default Variable
diff --git a/node/src/widgets.ts b/node/src/widgets.ts
new file mode 100644
index 0000000..300cfab
--- /dev/null
+++ b/node/src/widgets.ts
@@ -0,0 +1,37 @@
+/* eslint-disable max-len */
+import { Astal, Gtk } from "./imports.js"
+import astalify, { type ConstructProps, type Widget } from "./astalify.js"
+import type GtkT from "@girs/node-gtk-3.0/node-gtk-3.0"
+import type AstalT from "@girs/node-astal-0.1/node-astal-0.1"
+
+export { astalify }
+
+// Label
+export const Label = astalify<typeof Gtk.Label, LabelProps, "Label">(Gtk.Label)
+export type LabelProps = ConstructProps<typeof Gtk.Label, GtkT.Label.ConstructorProperties>
+
+// Icon
+export const Icon = astalify<typeof Astal.Icon, IconProps, "Icon">(Astal.Icon)
+export type IconProps = ConstructProps<typeof Astal.Icon, AstalT.Icon.ConstructorProperties>
+
+// Button
+export const Button = astalify<typeof Astal.Button, ButtonProps, "Button">(Astal.Button)
+export type ButtonProps = ConstructProps<typeof Astal.Button, AstalT.Button.ConstructorProperties, {
+    onClicked: (self: Widget<typeof Astal.Button>) => void
+}>
+
+// Window
+export const Window = astalify<typeof Astal.Window, WindowProps, "Window">(Astal.Window)
+export type WindowProps = ConstructProps<typeof Astal.Window, AstalT.Window.ConstructorProperties>
+
+// Box
+export const Box = astalify<typeof Astal.Box, BoxProps, "Box">(Astal.Box)
+export type BoxProps = ConstructProps<typeof Astal.Box, AstalT.Box.ConstructorProperties>
+
+// CenterBox
+export const CenterBox = astalify<typeof Astal.CenterBox, CenterBoxProps, "CenterBox">(Astal.CenterBox)
+export type CenterBoxProps = ConstructProps<typeof Astal.CenterBox, AstalT.CenterBox.ConstructorProperties>
+
+// EventBox
+export const EventBox = astalify<typeof Astal.EventBox, EventBoxProps, "EventBox">(Astal.EventBox)
+export type EventBoxProps = ConstructProps<typeof Astal.EventBox, AstalT.EventBox.ConstructorProperties>