@codemation/next-host 0.0.1

package/src/auth/CodemationNextAuthOAuthProviderDescriptorMapper.ts

@@ -0,0 +1,30 @@
+import type { NextAuthConfig } from "next-auth";
+
+export type CodemationOAuthProviderDescriptor = Readonly<{
+  id: string;
+  name: string;
+}>;
+
+export class CodemationNextAuthOAuthProviderDescriptorMapper {
+  mapFromBuiltProviders(
+    providers: ReadonlyArray<NonNullable<NextAuthConfig["providers"]>[number]>,
+  ): ReadonlyArray<CodemationOAuthProviderDescriptor> {
+    const out: CodemationOAuthProviderDescriptor[] = [];
+    for (const p of providers) {
+      if (p === null || p === undefined) {
+        continue;
+      }
+      if (typeof p !== "object") {
+        continue;
+      }
+      const id = "id" in p && typeof (p as { id: unknown }).id === "string" ? (p as { id: string }).id : "";
+      if (id === "" || id === "credentials") {
+        continue;
+      }
+      const rawName = "name" in p ? (p as { name: unknown }).name : undefined;
+      const name = typeof rawName === "string" && rawName.trim().length > 0 ? rawName : id;
+      out.push({ id, name });
+    }
+    return out;
+  }
+}

package/src/auth/CodemationNextAuthOAuthProviderSnapshotResolver.ts

@@ -0,0 +1,17 @@
+import { CodemationAuthPrismaClient } from "../server/CodemationAuthPrismaClient";
+import type { CodemationOAuthProviderDescriptor } from "./CodemationNextAuthOAuthProviderDescriptorMapper";
+import { CodemationNextAuthOAuthProviderDescriptorMapper } from "./CodemationNextAuthOAuthProviderDescriptorMapper";
+import { CodemationNextAuthConfigResolver } from "./CodemationNextAuthConfigResolver";
+import { CodemationNextAuthProviderCatalog } from "./CodemationNextAuthProviderCatalog";
+
+export type { CodemationOAuthProviderDescriptor } from "./CodemationNextAuthOAuthProviderDescriptorMapper";
+
+export class CodemationNextAuthOAuthProviderSnapshotResolver {
+  async resolve(): Promise<ReadonlyArray<CodemationOAuthProviderDescriptor>> {
+    const env = process.env;
+    const authConfig = await new CodemationNextAuthConfigResolver().resolve();
+    const prisma = await CodemationAuthPrismaClient.resolveShared();
+    const built = await CodemationNextAuthProviderCatalog.build(authConfig, prisma, env);
+    return new CodemationNextAuthOAuthProviderDescriptorMapper().mapFromBuiltProviders(built);
+  }
+}

package/src/auth/CodemationNextAuthProviderCatalog.ts

@@ -0,0 +1,107 @@
+import type {
+  CodemationAuthConfig,
+  CodemationAuthOAuthProviderConfig,
+  CodemationAuthOidcProviderConfig,
+} from "@codemation/host";
+import type { PrismaClient } from "@codemation/host/persistence";
+import { compare } from "bcryptjs";
+import type { NextAuthConfig } from "next-auth";
+import Credentials from "next-auth/providers/credentials";
+import GitHub from "next-auth/providers/github";
+import Google from "next-auth/providers/google";
+import MicrosoftEntraID from "next-auth/providers/microsoft-entra-id";
+
+export class CodemationNextAuthProviderCatalog {
+  static async build(
+    authConfig: CodemationAuthConfig | undefined,
+    prisma: PrismaClient,
+    env: NodeJS.ProcessEnv,
+  ): Promise<NextAuthConfig["providers"]> {
+    if (!authConfig) {
+      return [];
+    }
+    const providers: NextAuthConfig["providers"] = [];
+    if (CodemationNextAuthProviderCatalog.includesCredentialsProvider(authConfig)) {
+      providers.push(CodemationNextAuthProviderCatalog.createCredentialsProvider(prisma));
+    }
+    for (const entry of authConfig.oauth ?? []) {
+      providers.push(CodemationNextAuthProviderCatalog.createOAuthProvider(entry, env));
+    }
+    for (const entry of authConfig.oidc ?? []) {
+      providers.push(CodemationNextAuthProviderCatalog.createOidcProvider(entry, env));
+    }
+    return providers;
+  }
+
+  private static includesCredentialsProvider(authConfig: CodemationAuthConfig): boolean {
+    return authConfig.kind === "local";
+  }
+
+  private static createCredentialsProvider(prisma: PrismaClient): NextAuthConfig["providers"][number] {
+    return Credentials({
+      name: "Email and password",
+      credentials: {
+        email: { label: "Email", type: "email" },
+        password: { label: "Password", type: "password" },
+      },
+      authorize: async (credentials) => {
+        const email = typeof credentials?.email === "string" ? credentials.email.trim() : "";
+        const password = typeof credentials?.password === "string" ? credentials.password : "";
+        if (!email || !password) {
+          return null;
+        }
+        const user = await prisma.user.findUnique({ where: { email } });
+        if (!user?.passwordHash || user.accountStatus === "inactive") {
+          return null;
+        }
+        if (user.accountStatus !== "active") {
+          return null;
+        }
+        const matches = await compare(password, user.passwordHash);
+        if (!matches) {
+          return null;
+        }
+        return {
+          id: user.id,
+          email: user.email ?? email,
+          name: user.name ?? undefined,
+          image: user.image ?? undefined,
+        };
+      },
+    });
+  }
+
+  private static createOAuthProvider(
+    entry: CodemationAuthOAuthProviderConfig,
+    env: NodeJS.ProcessEnv,
+  ): NextAuthConfig["providers"][number] {
+    const clientId = env[entry.clientIdEnv] ?? "";
+    const clientSecret = env[entry.clientSecretEnv] ?? "";
+    if (entry.provider === "google") {
+      return Google({ clientId, clientSecret });
+    }
+    if (entry.provider === "github") {
+      return GitHub({ clientId, clientSecret });
+    }
+    const tenantId = entry.tenantIdEnv ? (env[entry.tenantIdEnv] ?? "common") : "common";
+    return MicrosoftEntraID({
+      clientId,
+      clientSecret,
+      issuer: `https://login.microsoftonline.com/${tenantId}/v2.0`,
+    });
+  }
+
+  private static createOidcProvider(
+    entry: CodemationAuthOidcProviderConfig,
+    env: NodeJS.ProcessEnv,
+  ): NextAuthConfig["providers"][number] {
+    return {
+      id: entry.id,
+      name: entry.id,
+      type: "oidc",
+      issuer: entry.issuer,
+      clientId: env[entry.clientIdEnv] ?? "",
+      clientSecret: env[entry.clientSecretEnv] ?? "",
+    };
+  }
+}

package/src/auth/codemationEdgeAuth.ts

@@ -0,0 +1,25 @@
+import NextAuth from "next-auth";
+import Credentials from "next-auth/providers/credentials";
+
+/**
+ * Middleware runs on the Edge runtime: no Prisma, no consumer manifest.
+ * Verifies Auth.js JWT session cookies using AUTH_SECRET only.
+ */
+const authSecretFromEnv = process.env.AUTH_SECRET ?? process.env.NEXTAUTH_SECRET;
+const authSecret =
+  authSecretFromEnv?.trim() ||
+  (process.env.NODE_ENV === "development" ? "codemation-dev-auth-secret-not-for-production" : undefined);
+
+export const { auth } = NextAuth({
+  trustHost: true,
+  session: { strategy: "jwt" },
+  secret: authSecret,
+  providers: [
+    Credentials({
+      id: "edge-jwt-verifier-placeholder",
+      name: "Edge verifier",
+      credentials: {},
+      authorize: async () => null,
+    }),
+  ],
+});

package/src/auth/codemationNextAuth.ts

@@ -0,0 +1,32 @@
+import { PrismaAdapter } from "@auth/prisma-adapter";
+import NextAuth from "next-auth";
+import { CodemationAuthPrismaClient } from "../server/CodemationAuthPrismaClient";
+import { CodemationNextAuthConfigResolver } from "./CodemationNextAuthConfigResolver";
+import { CodemationNextAuthProviderCatalog } from "./CodemationNextAuthProviderCatalog";
+
+export const { handlers, auth, signIn, signOut } = NextAuth(async () => {
+  const env = process.env;
+  const authConfig = await new CodemationNextAuthConfigResolver().resolve();
+  const prisma = await CodemationAuthPrismaClient.resolveShared();
+  const secretFromEnv = env.AUTH_SECRET ?? env.NEXTAUTH_SECRET;
+  const secret =
+    secretFromEnv?.trim() ||
+    (env.NODE_ENV === "development" ? "codemation-dev-auth-secret-not-for-production" : undefined);
+  if (!secret || secret.trim().length === 0) {
+    throw new Error("AUTH_SECRET (or NEXTAUTH_SECRET) is required for Codemation authentication.");
+  }
+  const providers = await CodemationNextAuthProviderCatalog.build(authConfig, prisma, env);
+  if (env.NODE_ENV === "production" && providers.length === 0) {
+    throw new Error("CodemationConfig.auth must configure at least one NextAuth provider for production.");
+  }
+  return {
+    adapter: PrismaAdapter(prisma),
+    secret,
+    session: { strategy: "jwt" },
+    providers: [...providers],
+    pages: {
+      signIn: "/login",
+    },
+    trustHost: true,
+  };
+});

package/src/components/Codemation.tsx

@@ -0,0 +1,6 @@
+import type { WorkflowSummary } from "../features/workflows/hooks/realtime/realtime";
+import { WorkflowsScreen } from "../features/workflows/screens/WorkflowsScreen";
+
+export function Codemation(args: Readonly<{ initialWorkflows: ReadonlyArray<WorkflowSummary> }>) {
+  return <WorkflowsScreen {...args} />;
+}

package/src/components/CodemationDataTable.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+export type CodemationDataTableColumn = Readonly<{
+  key: string;
+  header: string;
+  headerTestId?: string;
+}>;
+
+export type CodemationDataTableProps = Readonly<{
+  tableTestId: string;
+  columns: ReadonlyArray<CodemationDataTableColumn>;
+  children: ReactNode;
+}>;
+
+/**
+ * Shared data table using shadcn/ui Table primitives and design tokens.
+ */
+export function CodemationDataTable(props: CodemationDataTableProps) {
+  return (
+    <Table data-testid={props.tableTestId}>
+      <TableHeader>
+        <TableRow>
+          {props.columns.map((column) => (
+            <TableHead key={column.key} data-testid={column.headerTestId ?? `codemation-table-header-${column.key}`}>
+              {column.header}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>{props.children}</TableBody>
+    </Table>
+  );
+}

package/src/components/CodemationDialog.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import * as React from "react";
+
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+const maxWidthBySize = {
+  narrow: "sm:max-w-lg",
+  wide: "sm:max-w-2xl",
+  full: "sm:max-w-[min(92vw,960px)]",
+} as const;
+
+export type CodemationDialogSize = keyof typeof maxWidthBySize;
+
+export type CodemationDialogRootProps = Readonly<{
+  children: React.ReactNode;
+  onClose: () => void;
+  /** Root `data-testid` (applied to the dialog panel). */
+  testId?: string;
+  /** `dialog` (default) or `alertdialog` for confirmations. */
+  role?: "dialog" | "alertdialog";
+  /** Max width preset; default `wide`. */
+  size?: CodemationDialogSize;
+  /** Extra classes on the Radix panel (e.g. `max-h-[min(90vh,640px)]`). */
+  contentClassName?: string;
+  /** Corner X to dismiss (Radix); default false — use `<CodemationDialog.Actions>` for explicit buttons. */
+  showCloseButton?: boolean;
+}>;
+
+function CodemationDialogRoot({
+  children,
+  onClose,
+  testId,
+  role = "dialog",
+  size = "wide",
+  contentClassName,
+  showCloseButton = false,
+}: CodemationDialogRootProps) {
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent
+        showCloseButton={showCloseButton}
+        data-testid={testId}
+        role={role}
+        aria-describedby={undefined}
+        className={cn(
+          "flex max-h-[min(92vh,900px)] flex-col gap-0 overflow-hidden p-0",
+          maxWidthBySize[size],
+          contentClassName,
+        )}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export type CodemationDialogTitleProps = Readonly<{
+  children: React.ReactNode;
+  className?: string;
+}>;
+
+/**
+ * Do not set `id` on the underlying Radix `DialogTitle` — the dialog root assigns `titleId`
+ * in context; overriding `id` breaks `aria-labelledby` and Radix dev warnings.
+ */
+function CodemationDialogTitle({ children, className }: CodemationDialogTitleProps) {
+  return (
+    <DialogTitle
+      className={cn("m-0 shrink-0 border-b border-border px-4 py-3 text-base leading-none font-semibold", className)}
+    >
+      {children}
+    </DialogTitle>
+  );
+}
+
+export type CodemationDialogContentProps = Readonly<{
+  children: React.ReactNode;
+  className?: string;
+}>;
+
+function CodemationDialogContent({ children, className }: CodemationDialogContentProps) {
+  return (
+    <div className={cn("flex min-h-0 flex-1 flex-col gap-4 overflow-auto px-4 py-3 text-sm", className)}>
+      {children}
+    </div>
+  );
+}
+
+export type CodemationDialogActionsProps = Readonly<{
+  children: React.ReactNode;
+  /** Toolbar directly under the title (e.g. filters). Default is footer actions. */
+  position?: "top" | "bottom";
+  /** Flex alignment for the button row. */
+  align?: "start" | "end" | "between";
+  className?: string;
+}>;
+
+function CodemationDialogActions({
+  children,
+  position = "bottom",
+  align = "end",
+  className,
+}: CodemationDialogActionsProps) {
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 flex-wrap gap-2 border-border bg-muted/30 px-4 py-3",
+        position === "top" ? "border-b" : "border-t",
+        align === "end" && "justify-end",
+        align === "start" && "justify-start",
+        align === "between" && "justify-between",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type CodemationDialogCompound = typeof CodemationDialogRoot & {
+  Title: typeof CodemationDialogTitle;
+  Content: typeof CodemationDialogContent;
+  Actions: typeof CodemationDialogActions;
+};
+
+export const CodemationDialog = Object.assign(CodemationDialogRoot, {
+  Title: CodemationDialogTitle,
+  Content: CodemationDialogContent,
+  Actions: CodemationDialogActions,
+}) as CodemationDialogCompound;

package/src/components/CodemationFormattedDateTime.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import type { Locale } from "date-fns";
+import { format, isValid, parseISO } from "date-fns";
+import { enUS } from "date-fns/locale";
+import type { ReactNode } from "react";
+
+export type CodemationFormattedDateTimeProps = Readonly<{
+  /** ISO 8601 instant (e.g. from API). */
+  isoUtc: string | null | undefined;
+  /** Shown when `isoUtc` is missing or unparsable. */
+  fallbackText?: string;
+  /** Reserved for localization; defaults to `enUS`. */
+  locale?: Locale;
+  dataTestId?: string;
+  className?: string;
+}>;
+
+/**
+ * Renders a human-readable date/time via **date-fns** (`format` + `parseISO`).
+ * Pass a different `locale` when you wire i18n.
+ */
+export function CodemationFormattedDateTime(props: CodemationFormattedDateTimeProps): ReactNode {
+  const { isoUtc, fallbackText = "—", locale = enUS, dataTestId, className } = props;
+  if (!isoUtc?.trim()) {
+    return (
+      <span className={className} data-testid={dataTestId}>
+        {fallbackText}
+      </span>
+    );
+  }
+  const parsed = parseISO(isoUtc);
+  if (!isValid(parsed)) {
+    return (
+      <span className={className} data-testid={dataTestId}>
+        {fallbackText}
+      </span>
+    );
+  }
+  const label = format(parsed, "PPp", { locale });
+  return (
+    <time className={className} dateTime={isoUtc} data-testid={dataTestId}>
+      {label}
+    </time>
+  );
+}

package/src/components/GoogleColorGIcon.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+/**
+ * Standard color Google "G" (multicolor). Simple Icons only ships a monochrome mark;
+ * Google requires the full-color logo for sign-in UI.
+ *
+ * @see https://developers.google.com/identity/branding-guidelines
+ */
+export function GoogleColorGIcon(props: Readonly<{ className?: string; testId?: string }>): ReactNode {
+  return (
+    <svg
+      role="img"
+      className={props.className}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      data-testid={props.testId}
+    >
+      <path
+        fill="#4285F4"
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+      />
+      <path
+        fill="#34A853"
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+      />
+      <path
+        fill="#EA4335"
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      />
+    </svg>
+  );
+}

package/src/components/OauthProviderIcon.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { Component, type ReactNode } from "react";
+
+import { GoogleColorGIcon } from "./GoogleColorGIcon";
+import { simpleIconForProvider } from "./oauthProviderIconData";
+
+export type OauthProviderIconProps = Readonly<{
+  providerId: string;
+  className?: string;
+  testId?: string;
+}>;
+
+export class OauthProviderIcon extends Component<OauthProviderIconProps> {
+  override render(): ReactNode {
+    if (this.props.providerId === "google") {
+      return <GoogleColorGIcon className={this.props.className} testId={this.props.testId} />;
+    }
+    const icon = simpleIconForProvider(this.props.providerId);
+    return (
+      <svg
+        role="img"
+        className={this.props.className}
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden
+        data-testid={this.props.testId}
+      >
+        <path d={icon.path} fill={`#${icon.hex}`} />
+      </svg>
+    );
+  }
+}

package/src/components/PasswordStrengthMeter.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useMemo, type ReactNode } from "react";
+import zxcvbn from "zxcvbn";
+
+import { cn } from "@/lib/utils";
+
+export type PasswordStrengthMeterProps = Readonly<{
+  password: string;
+  /** Skips scoring (and layout) when false. */
+  enabled?: boolean;
+  dataTestId?: string;
+}>;
+
+const scoreLabels = ["Too weak", "Weak", "Fair", "Good", "Strong"] as const;
+
+/**
+ * Password strength using **zxcvbn** (Dropbox). Not a policy gate — server still enforces min length.
+ */
+export function PasswordStrengthMeter(props: PasswordStrengthMeterProps): ReactNode {
+  const { password, enabled = true, dataTestId = "password-strength-meter" } = props;
+  const result = useMemo(() => {
+    if (!enabled || password.length === 0) return null;
+    return zxcvbn(password);
+  }, [enabled, password]);
+
+  if (!enabled || password.length === 0 || !result) {
+    return null;
+  }
+
+  const { score, feedback } = result;
+  const hint = feedback.warning || (feedback.suggestions[0] ?? "");
+  const label = scoreLabels[Math.min(score, 4)] ?? scoreLabels[0];
+
+  const barClass = (i: number) =>
+    cn(
+      "h-1.5 flex-1 rounded-sm bg-muted transition-colors",
+      i <= score &&
+        (score <= 1 ? "bg-destructive" : score <= 3 ? "bg-amber-500" : "bg-emerald-600 dark:bg-emerald-500"),
+    );
+
+  return (
+    <div className="flex flex-col gap-1.5" data-testid={dataTestId} role="status" aria-live="polite">
+      <div className="flex gap-1" aria-hidden>
+        {([0, 1, 2, 3, 4] as const).map((i) => (
+          <span key={i} className={barClass(i)} />
+        ))}
+      </div>
+      <span className="text-xs font-medium text-foreground" data-testid={`${dataTestId}-label`}>
+        {label}
+      </span>
+      {hint ? (
+        <span className="text-xs text-muted-foreground" data-testid={`${dataTestId}-hint`}>
+          {hint}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/forms/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Canonical forms stack: React Hook Form + Zod + shadcn Form primitives.
+ * Import from here in feature code so validation and layout stay consistent.
+ */
+export { z } from "zod";
+export { zodResolver } from "@hookform/resolvers/zod";
+export {
+  useForm,
+  useFormContext,
+  useFormState,
+  useWatch,
+  type FieldPath,
+  type FieldValues,
+  type Resolver,
+  type SubmitHandler,
+  type UseFormProps,
+  type UseFormReturn,
+} from "react-hook-form";
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+} from "@/components/ui/form";

package/src/components/json/JsonMonacoEditor.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import Editor from "@monaco-editor/react";
+import type { ComponentProps } from "react";
+
+import { Textarea } from "@/components/ui/textarea";
+
+const defaultOptions: NonNullable<ComponentProps<typeof Editor>["options"]> = {
+  automaticLayout: true,
+  formatOnPaste: true,
+  formatOnType: true,
+  minimap: { enabled: false },
+  scrollBeyondLastLine: false,
+  lineNumbersMinChars: 3,
+  tabSize: 2,
+  insertSpaces: true,
+  wordWrap: "on",
+  bracketPairColorization: {
+    enabled: true,
+  },
+  guides: {
+    indentation: true,
+    bracketPairs: true,
+  },
+  padding: {
+    top: 12,
+    bottom: 12,
+  },
+};
+
+/**
+ * Monaco-based JSON editor with a mirrored, visually hidden `<textarea>` that carries the same value.
+ * Tests and automation can drive `data-testid` on that textarea because Monaco’s surface is not a reliable
+ * DOM target for `fireEvent.change` / user typing simulation.
+ */
+export function JsonMonacoEditor(
+  args: Readonly<{
+    path: string;
+    value: string;
+    onChange: (value: string | undefined) => void;
+    /** Shown below the editor region when set. */
+    error?: string | null;
+    /** Passed to the hidden textarea for stable test selectors. */
+    testId?: string;
+  }>,
+) {
+  const { path, value, onChange, error, testId = "workflow-json-editor-input" } = args;
+  return (
+    <div className="relative flex min-h-0 flex-1 flex-col">
+      <div className="h-[min(60vh,560px)] min-h-[200px] shrink-0 overflow-hidden rounded-md border border-border bg-background">
+        <Editor
+          height="100%"
+          language="json"
+          path={path}
+          value={value}
+          onChange={onChange}
+          loading={<div className="grid h-full place-items-center text-xs text-muted-foreground">Loading editor…</div>}
+          options={defaultOptions}
+        />
+      </div>
+      <Textarea
+        data-testid={testId}
+        value={value}
+        onChange={(event) => {
+          onChange(event.target.value);
+        }}
+        spellCheck={false}
+        className="pointer-events-none absolute inset-0 h-px w-px min-h-0 resize-none border-0 p-0 opacity-0"
+        aria-hidden="true"
+        tabIndex={-1}
+      />
+      {error ? <div className="mt-1 text-xs text-destructive">{error}</div> : null}
+    </div>
+  );
+}