alepha 0.19.1 → 0.19.3

package/src/orm/core/providers/DrizzleKitProvider.ts

@@ -29,10 +29,13 @@ export class DrizzleKitProvider {
     }
 
     if (this.alepha.isTest()) {
-      // In test mode, we want to generate migrations from scratch (no snapshots)
-      // to ensure the generated SQL is correct and can be applied cleanly.
       const { statements } = await this.generateMigration(provider);
-      await this.executeFallbackStatements(statements, provider);
+      await this.executeStatements(
+        statements.map((s) =>
+          s.replace(/^CREATE SCHEMA /i, "CREATE SCHEMA IF NOT EXISTS "),
+        ),
+        provider,
+      );
       return;
     }
 
@@ -52,18 +55,22 @@ export class DrizzleKitProvider {
         await this.pushPostgres(kit, models, provider);
       }
     } catch (error) {
-      // Fallback: generate migrations from scratch (no snapshots)
-      // Covers drivers that don't support introspection (e.g. PgLite, sqlite-proxy)
+      // Fallback: generate migrations from scratch (no snapshots).
+      // Covers drivers that don't support introspection (e.g. PgLite, sqlite-proxy).
+      //
+      // If push partially executed (e.g. interactive rename applied then errored),
+      // the fallback would re-create tables that already exist. Guard against this
+      // by attempting the statements individually and ignoring "already exists" errors.
       this.log.debug(
         "Push sync not available, falling back to migration generation",
         { error },
       );
       const { statements } = await this.generateMigration(provider);
-      await this.executeFallbackStatements(statements, provider);
+      await this.executeStatementsLenient(statements, provider);
     }
 
     this.log.info(
-      `Sync with '${provider.name}' OK [${this.dateTime.nowMillis() - now}ms]`,
+      `Synchronization of '${provider.name}' OK [${this.dateTime.nowMillis() - now}ms]`,
     );
   }
 
@@ -127,7 +134,6 @@ export class DrizzleKitProvider {
   public getModels(provider: DatabaseProvider): Record<string, unknown> {
     const models: Record<string, unknown> = {};
 
-    // Required for pushSchema with Postgres and POSTGRES_SCHEMA
     for (const [key, value] of provider.schemas.entries()) {
       models[`__schema_${key}`] = value;
     }
@@ -232,14 +238,10 @@ export class DrizzleKitProvider {
     };
 
     if (provider.dialect === "sqlite") {
-      result = await this.muteSpinner(() =>
-        kit.pushSQLiteSchema(models, provider.db as any),
-      );
+      result = await kit.pushSQLiteSchema(models, provider.db as any);
     } else {
       const wrappedDb = this.wrapDbForDrizzleKit(provider.db);
-      result = await this.muteSpinner(() =>
-        kit.pushSchema(models, wrappedDb, [provider.schema]),
-      );
+      result = await kit.pushSchema(models, wrappedDb, [provider.schema]);
     }
 
     return {
@@ -256,11 +258,11 @@ export class DrizzleKitProvider {
     models: Record<string, unknown>,
     provider: DatabaseProvider,
   ): Promise<void> {
-    const result = await this.muteSpinner(() =>
-      kit.pushSQLiteSchema(models, provider.db as any),
+    const { statementsToExecute } = await kit.pushSQLiteSchema(
+      models,
+      provider.db as any,
     );
-
-    await this.runPushResult(result, provider);
+    await this.executeStatements(statementsToExecute, provider);
   }
 
   /**
@@ -275,78 +277,61 @@ export class DrizzleKitProvider {
       await this.createSchemaIfNotExists(provider, provider.schema);
     }
 
-    // Drizzle Kit's pushSchema internally does:
-    //   const res = await drizzleInstance.execute(sql.raw(query));
-    //   return res.rows;
-    //
-    // This assumes node-postgres (pg) format where execute() returns { rows: [...] }.
-    // But postgres.js (used by Alepha) returns a Result that extends Array — no .rows property.
-    // We wrap the db instance so execute() returns { rows: [...] } as expected.
+    // Drizzle Kit's pushSchema expects execute() to return { rows: T[] }
+    // (node-postgres/pg format), but postgres.js returns a Result that
+    // extends Array directly — no .rows property.
     const wrappedDb = this.wrapDbForDrizzleKit(provider.db);
 
-    const result = await this.muteSpinner(() =>
-      kit.pushSchema(models, wrappedDb, [provider.schema]),
-    );
-
-    await this.runPushResult(result, provider);
+    const { statementsToExecute } = await kit.pushSchema(models, wrappedDb, [
+      provider.schema,
+    ]);
+    await this.executeStatements(statementsToExecute, provider);
   }
 
   /**
-   * Run the statements returned by Drizzle Kit's pushSchema, with safety filters and logging.
+   * Execute a list of SQL statements against the provider.
    */
-  protected async runPushResult(
-    result: {
-      statementsToExecute: string[];
-      warnings: string[];
-      hasDataLoss: boolean;
-    },
+  protected async executeStatements(
+    statements: string[],
     provider: DatabaseProvider,
-  ) {
-    // Filter out destructive schema/table drops — never auto-apply those in dev.
-    const safe = (result.statementsToExecute as string[]).filter((s) => {
-      const upper = s.trimStart().toUpperCase();
-      if (upper.startsWith("DROP SCHEMA") || upper.startsWith("DROP TABLE")) {
-        this.log.warn("Skipping destructive statement", { statement: s });
-        return false;
-      }
-      return true;
-    });
-
-    if (result.hasDataLoss) {
-      this.log.warn("Push would cause data loss", {
-        warnings: result.warnings,
-        statements: result.statementsToExecute,
+  ): Promise<void> {
+    if (statements.length > 0) {
+      this.log.debug(`Executing ${statements.length} statements ...`, {
+        statements,
       });
     }
-
-    if (safe.length > 0) {
-      this.log.debug(`Pushing ${safe.length} statements ...`, {
-        statements: safe,
-      });
-      for (const statement of safe) {
-        await provider.execute(sql.raw(statement));
-      }
+    for (const statement of statements) {
+      await provider.execute(sql.raw(statement));
     }
   }
 
   /**
-   * Execute migration statements as a fallback when push sync is not available.
-   * Used for drivers that don't support Drizzle Kit introspection (e.g. PgLite).
+   * Execute SQL statements, ignoring "already exists" errors.
+   *
+   * Used by the fallback migration path where push may have partially
+   * applied changes before erroring, leaving some objects already created.
    */
-  protected async executeFallbackStatements(
+  protected async executeStatementsLenient(
     statements: string[],
     provider: DatabaseProvider,
   ): Promise<void> {
+    if (statements.length > 0) {
+      this.log.debug(
+        `Executing ${statements.length} statements (lenient) ...`,
+        { statements },
+      );
+    }
     for (const statement of statements) {
-      const upper = statement.trimStart().toUpperCase();
-      // Schema lifecycle is managed by createSchemaIfNotExists / generateTestSchema.
-      if (
-        upper.startsWith("DROP SCHEMA") ||
-        upper.startsWith("CREATE SCHEMA")
-      ) {
-        continue;
+      try {
+        await provider.execute(sql.raw(statement));
+      } catch (error: any) {
+        const message = error?.message ?? "";
+        if (message.includes("already exists")) {
+          this.log.debug(`Skipped (already exists): ${statement.slice(0, 80)}`);
+          continue;
+        }
+        throw error;
       }
-      await provider.execute(sql.raw(statement));
     }
   }
 
@@ -375,7 +360,7 @@ export class DrizzleKitProvider {
 
   // -------------------------------------------------------------------------------------------------------------------
 
-  // TODO: remove both hacks when Drizzle Kit is updated !
+  // TODO: remove when Drizzle Kit fixes postgres.js compatibility
 
   /**
    * Wrap a Drizzle PgDatabase instance for compatibility with Drizzle Kit.
@@ -401,40 +386,6 @@ export class DrizzleKitProvider {
     });
   }
 
-  /**
-   * Suppress Drizzle Kit's spinner output during a callback.
-   *
-   * Drizzle Kit uses hanji's renderWithTask with a setInterval-based spinner.
-   * If the wrapped task throws, the interval is never cleared and leaks
-   * spinner frames to stdout. We keep the filter active until the next
-   * tick after the promise settles to catch any straggling writes.
-   */
-  protected async muteSpinner<T>(fn: () => Promise<T>): Promise<T> {
-    const originalWrite = process.stdout.write;
-    const filter = (chunk: any, ...args: any[]) => {
-      const str =
-        typeof chunk === "string" ? chunk : (chunk?.toString?.() ?? "");
-      if (str.includes("Pulling schema from database")) {
-        return true;
-      }
-      if (str.includes("\x1B[1A")) {
-        return true;
-      }
-      return (originalWrite as any).call(process.stdout, chunk, ...args);
-    };
-    process.stdout.write = filter as any;
-    try {
-      return await fn();
-    } finally {
-      // Delay restore to catch orphaned setInterval spinner writes
-      // that fire after the promise rejects but before cleanup.
-      await new Promise((r) => setTimeout(r, 200));
-      process.stdout.write = originalWrite;
-    }
-  }
-
-  // -------------------------------------------------------------------------------------------------------------------
-
   /**
    * Try to load the official Drizzle Kit API.
    */

package/src/orm/core/providers/drivers/BunSqliteProvider.ts

@@ -6,7 +6,7 @@ import {
   $env,
   $hook,
   $inject,
-  $use,
+  $state,
   AlephaError,
   type Static,
   t,
@@ -74,7 +74,7 @@ declare module "alepha" {
 export class BunSqliteProvider extends DatabaseProvider {
   protected readonly env = $env(envSchema);
   protected readonly builder = $inject(SqliteModelBuilder);
-  protected readonly options = $use(bunSqliteOptions);
+  protected readonly options = $state(bunSqliteOptions);
 
   protected sqlite?: Database;
   protected bunDb?: BunSQLiteDatabase;

package/src/orm/core/providers/drivers/NodeSqliteProvider.ts

@@ -7,7 +7,7 @@ import {
   $env,
   $hook,
   $inject,
-  $use,
+  $state,
   AlephaError,
   type Static,
   t,
@@ -81,7 +81,7 @@ declare module "alepha" {
 export class NodeSqliteProvider extends DatabaseProvider {
   protected readonly env = $env(envSchema);
   protected readonly builder = $inject(SqliteModelBuilder);
-  protected readonly options = $use(nodeSqliteOptions);
+  protected readonly options = $state(nodeSqliteOptions);
 
   protected sqlite!: DatabaseSync;
   protected drizzleDb!: any;
@@ -182,7 +182,7 @@ export class NodeSqliteProvider extends DatabaseProvider {
         await this.migrate();
       }
 
-      this.log.info(`SQLite database OK`, { at: filepath });
+      this.log.info(`Sqlite connection OK`, { at: filepath });
     },
   });
 

package/src/orm/core/services/ModelBuilder.ts

@@ -136,6 +136,17 @@ export abstract class ModelBuilder {
                 }
                 configs.push(idx);
               }
+            } else if ("expressions" in indexDef) {
+              const parts = indexDef.expressions(self as any);
+              if (parts.length > 0) {
+                let idx = indexDef.unique
+                  ? builders.uniqueIndex(indexDef.name).on(...parts)
+                  : builders.index(indexDef.name).on(...parts);
+                if ("where" in indexDef && indexDef.where) {
+                  idx = (idx as any).where(indexDef.where);
+                }
+                configs.push(idx);
+              }
             } else if ("columns" in indexDef) {
               const columnNames = indexDef.columns.map((col: any) =>
                 this.toColumnName(col as string),

package/src/orm/core/services/QueryManager.ts

@@ -338,11 +338,25 @@ export class QueryManager {
     }
 
     if (operator?.ilike != null) {
-      conditions.push(ilike(column, encodeValue(operator.ilike)));
+      if (dialect === "sqlite") {
+        // SQLite doesn't have ilike, use LOWER() for case-insensitive matching
+        conditions.push(
+          sql`LOWER(${column}) LIKE LOWER(${encodeValue(operator.ilike)})`,
+        );
+      } else {
+        conditions.push(ilike(column, encodeValue(operator.ilike)));
+      }
     }
 
     if (operator?.notIlike != null) {
-      conditions.push(notIlike(column, encodeValue(operator.notIlike)));
+      if (dialect === "sqlite") {
+        // SQLite doesn't have ilike, use LOWER() for case-insensitive matching
+        conditions.push(
+          sql`LOWER(${column}) NOT LIKE LOWER(${encodeValue(operator.notIlike)})`,
+        );
+      } else {
+        conditions.push(notIlike(column, encodeValue(operator.notIlike)));
+      }
     }
 
     if (operator?.contains != null) {

package/src/orm/core/services/Repository.ts

@@ -12,6 +12,7 @@ import {
 } from "alepha";
 import { type DateTime, DateTimeProvider } from "alepha/datetime";
 import { $logger } from "alepha/logger";
+import { currentUserAtom } from "alepha/security";
 import {
   asc,
   avg,
@@ -43,6 +44,7 @@ import type {
 import type { PgTransactionConfig } from "drizzle-orm/pg-core/session";
 import {
   PG_DELETED_AT,
+  PG_ORGANIZATION,
   PG_PRIMARY_KEY,
   PG_UPDATED_AT,
   PG_VERSION,
@@ -388,9 +390,8 @@ export abstract class Repository<T extends TObject> {
       );
     }
 
-    const where = this.withDeletedAt(
-      (query.where ?? {}) as PgQueryWhere<T>,
-      opts,
+    const where = this.withOrganization(
+      this.withDeletedAt((query.where ?? {}) as PgQueryWhere<T>, opts),
     );
 
     builder.where(() => this.toSQL(where, joins));
@@ -565,9 +566,8 @@ export abstract class Repository<T extends TObject> {
     );
 
     if (opts.count) {
-      const countWhere = this.withDeletedAt(
-        (query.where ?? {}) as PgQueryWhere<T>,
-        opts,
+      const countWhere = this.withOrganization(
+        this.withDeletedAt((query.where ?? {}) as PgQueryWhere<T>, opts),
       );
 
       tasks.push(
@@ -662,6 +662,7 @@ export abstract class Repository<T extends TObject> {
     opts: StatementOptions = {},
   ): Promise<Static<T>> {
     this.assertWritable();
+    this.stampOrganization(data);
     await this.alepha.events.emit("repository:create:before", {
       tableName: this.tableName,
       data,
@@ -705,6 +706,10 @@ export abstract class Repository<T extends TObject> {
       return [];
     }
 
+    for (const value of values) {
+      this.stampOrganization(value);
+    }
+
     await this.alepha.events.emit("repository:create:before", {
       tableName: this.tableName,
       data: values,
@@ -774,6 +779,7 @@ export abstract class Repository<T extends TObject> {
     } = {},
   ): Promise<Static<T>> {
     this.assertWritable();
+    this.stampOrganization(data);
     await this.alepha.events.emit("repository:create:before", {
       tableName: this.tableName,
       data,
@@ -862,7 +868,7 @@ export abstract class Repository<T extends TObject> {
         opts.now ?? this.dateTimeProvider.nowISOString();
     }
 
-    where = this.withDeletedAt(where, opts);
+    where = this.withOrganization(this.withDeletedAt(where, opts));
     row = this.cast(row, false) as any;
 
     // do not update the ID field
@@ -1025,7 +1031,7 @@ export abstract class Repository<T extends TObject> {
         opts.now ?? this.dateTimeProvider.nowISOString();
     }
 
-    where = this.withDeletedAt(where, opts);
+    where = this.withOrganization(this.withDeletedAt(where, opts));
     data = this.cast(data, false) as any;
     try {
       const entities = await this.rawUpdate(opts)
@@ -1070,6 +1076,8 @@ export abstract class Repository<T extends TObject> {
       );
     }
 
+    where = this.withOrganization(where);
+
     await this.alepha.events.emit("repository:delete:before", {
       tableName: this.tableName,
       where,
@@ -1170,7 +1178,7 @@ export abstract class Repository<T extends TObject> {
     where: PgQueryWhereOrSQL<T> = {},
     opts: StatementOptions = {},
   ): Promise<number> {
-    where = this.withDeletedAt(where, opts);
+    where = this.withOrganization(this.withDeletedAt(where, opts));
     const db = opts.tx === null ? this.provider.db : (opts.tx ?? this.db);
     return db.$count(this.table, this.toSQL(where));
   }
@@ -1234,7 +1242,9 @@ export abstract class Repository<T extends TObject> {
 
     // WHERE
     if (query.where) {
-      const where = this.withDeletedAt(query.where as any, opts);
+      const where = this.withOrganization(
+        this.withDeletedAt(query.where as any, opts),
+      );
       builder = builder.where(this.toSQL(where)) as any;
     }
 
@@ -1458,6 +1468,56 @@ export abstract class Repository<T extends TObject> {
     return undefined;
   }
 
+  protected withOrganization(
+    where: PgQueryWhereOrSQL<T>,
+  ): PgQueryWhereOrSQL<T> {
+    const orgField = this.organizationField();
+    if (!orgField) {
+      return where;
+    }
+
+    const user = this.alepha.store.get(currentUserAtom);
+    if (!user?.organization) {
+      return where;
+    }
+
+    return {
+      and: [
+        where,
+        {
+          or: [
+            { [orgField.key]: { eq: user.organization } },
+            { [orgField.key]: { isNull: true } },
+          ],
+        } as any,
+      ],
+    } as PgQueryWhereOrSQL<T>;
+  }
+
+  protected stampOrganization(data: any): void {
+    const orgField = this.organizationField();
+    if (!orgField) {
+      return;
+    }
+
+    if (data[orgField.key] != null) {
+      return;
+    }
+
+    const user = this.alepha.store.get(currentUserAtom);
+    if (user?.organization) {
+      data[orgField.key] = user.organization;
+    }
+  }
+
+  protected organizationField(): PgAttrField | undefined {
+    const fields = getAttrFields(this.entity.schema, PG_ORGANIZATION);
+    if (fields.length > 0) {
+      return fields[0];
+    }
+    return undefined;
+  }
+
   /**
    * Convert something to valid Pg Insert Value.
    */

package/src/orm/postgres/{providers → __tests__}/BunPostgresProvider.bun.spec.ts

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it } from "bun:test";
 import { Alepha, t } from "alepha";
 import { $entity, $repository, DatabaseProvider, db } from "alepha/orm";
-import { BunPostgresProvider } from "./BunPostgresProvider.ts";
+import { BunPostgresProvider } from "../providers/BunPostgresProvider.ts";
 
 // -------------------------------------------------------------------------------------------------------------------
 

package/src/queue/core/providers/WorkerProvider.ts

@@ -2,7 +2,7 @@ import {
   $atom,
   $hook,
   $inject,
-  $use,
+  $state,
   Alepha,
   type Static,
   type TSchema,
@@ -61,7 +61,7 @@ declare module "alepha" {
 
 export class WorkerProvider {
   protected readonly log = $logger();
-  protected readonly options = $use(queueWorkerOptions);
+  protected readonly options = $state(queueWorkerOptions);
   protected readonly alepha = $inject(Alepha);
   protected readonly queueProvider = $inject(QueueProvider);
   protected readonly dateTimeProvider = $inject(DateTimeProvider);

package/src/queue/redis/providers/RedisQueueProvider.ts

@@ -1,4 +1,4 @@
-import { $atom, $inject, $use, type Static, t } from "alepha";
+import { $atom, $inject, $state, type Static, t } from "alepha";
 import type { QueueProvider } from "alepha/queue";
 import { RedisProvider } from "alepha/redis";
 
@@ -31,7 +31,7 @@ declare module "alepha" {
 // ---------------------------------------------------------------------------------------------------------------------
 
 export class RedisQueueProvider implements QueueProvider {
-  protected readonly options = $use(redisQueueOptions);
+  protected readonly options = $state(redisQueueOptions);
   protected readonly redisProvider: RedisProvider = $inject(RedisProvider);
 
   public prefix(queue: string): string {

package/src/react/core/{hooks → __tests__}/useAction.browser.spec.tsx

@@ -4,7 +4,7 @@ import { AlephaDateTime } from "alepha/datetime";
 import type { ReactNode } from "react";
 import { describe, test, vi } from "vitest";
 import { AlephaContext } from "../contexts/AlephaContext.ts";
-import { useAction } from "./useAction.ts";
+import { useAction } from "../hooks/useAction.ts";
 
 describe("useAction", () => {
   test("should handle successful action", async ({ expect }) => {

package/src/react/core/hooks/useAction.ts

@@ -134,8 +134,10 @@ export function useAction<Args extends any[], Result = void>(
   const isMountedRef = useRef(true);
   const intervalRef = useRef<Interval | undefined>(undefined);
 
-  // Cleanup on unmount
+  // Track mount state — must set true in body for React StrictMode double-invoke
   useEffect(() => {
+    isMountedRef.current = true;
+
     return () => {
       isMountedRef.current = false;
 
@@ -179,12 +181,11 @@ export function useAction<Args extends any[], Result = void>(
       setLoading(true);
       setError(undefined);
 
-      await alepha.events.emit("react:action:begin", {
-        type: "custom",
-        id: options.id,
-      });
-
       try {
+        await alepha.events.emit("react:action:begin", {
+          type: "custom",
+          id: options.id,
+        });
         // Pass abort signal as last argument to handler
         const result = await options.handler(...args, {
           signal: abortController.signal,

package/src/react/head/{providers → __tests__}/BrowserHeadProvider.browser.spec.ts

@@ -1,7 +1,7 @@
 import { Alepha } from "alepha";
 import { beforeEach, describe, expect, it } from "vitest";
 import type { Head } from "../interfaces/Head.ts";
-import { BrowserHeadProvider } from "./BrowserHeadProvider.ts";
+import { BrowserHeadProvider } from "../providers/BrowserHeadProvider.ts";
 
 describe("BrowserHeadProvider", () => {
   let alepha: Alepha;

package/src/react/head/{helpers → __tests__}/SeoExpander.spec.ts

@@ -1,6 +1,6 @@
 import { Alepha } from "alepha";
 import { describe, it } from "vitest";
-import { SeoExpander } from "./SeoExpander.ts";
+import { SeoExpander } from "../helpers/SeoExpander.ts";
 
 describe("SeoExpander", () => {
   it("should expand basic SEO configuration", ({ expect }) => {

package/src/react/i18n/{providers → __tests__}/I18nProvider.spec.ts

@@ -2,7 +2,7 @@ import { Alepha } from "alepha";
 import { describe, test } from "vitest";
 import { AlephaReactI18n } from "../index.ts";
 import { $dictionary } from "../primitives/$dictionary.ts";
-import { I18nProvider } from "./I18nProvider.ts";
+import { I18nProvider } from "../providers/I18nProvider.ts";
 
 describe("I18nProvider", () => {
   test("should register dictionaries on initialization", async ({ expect }) => {

package/src/react/i18n/{hooks → __tests__}/useI18n.browser.spec.tsx

@@ -4,10 +4,10 @@ import { AlephaContext } from "alepha/react";
 import type { ReactNode } from "react";
 import { act } from "react";
 import { describe, test } from "vitest";
+import { useI18n } from "../hooks/useI18n.ts";
 import { AlephaReactI18n } from "../index.ts";
 import { $dictionary } from "../primitives/$dictionary.ts";
 import { I18nProvider } from "../providers/I18nProvider.ts";
-import { useI18n } from "./useI18n.ts";
 
 describe("useI18n hook", () => {
   const renderWithAlepha = (alepha: Alepha, element: ReactNode) => {

package/src/react/intro/components/GettingStartedDevtoolsSlide.tsx

@@ -6,7 +6,7 @@ import type { GettingStartedSlide } from "./GettingStarted.tsx";
  * Returns undefined if devtools are not available.
  */
 export const useDevtoolsSlide = (): GettingStartedSlide | undefined => {
-  if (!import.meta.env.VITE_ALEPHA_DEVTOOLS) {
+  if (!import.meta.env?.VITE_ALEPHA_DEVTOOLS) {
     return undefined;
   }
 

package/src/react/router/{providers → __tests__}/ReactBrowserProvider.browser.spec.ts

@@ -1,6 +1,6 @@
 import { Alepha } from "alepha";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ReactBrowserProvider } from "./ReactBrowserProvider.ts";
+import { ReactBrowserProvider } from "../providers/ReactBrowserProvider.ts";
 
 class TestReactBrowserProvider extends ReactBrowserProvider {
   public testGetHydrationState = this.getHydrationState.bind(this);

package/src/react/router/providers/ReactBrowserProvider.ts

@@ -2,7 +2,7 @@ import {
   $atom,
   $hook,
   $inject,
-  $use,
+  $state,
   Alepha,
   type State,
   type Static,
@@ -54,7 +54,7 @@ export class ReactBrowserProvider {
   protected readonly dateTimeProvider = $inject(DateTimeProvider);
   protected readonly browserHeadProvider = $inject(BrowserHeadProvider);
 
-  protected readonly options = $use(reactBrowserOptions);
+  protected readonly options = $state(reactBrowserOptions);
 
   public get rootId() {
     return "root";