@appstrate/ui 1.0.0

package/LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to the Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding any notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2025-2026 Appstrate
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/NOTICE

@@ -0,0 +1,5 @@
+Appstrate UI
+Copyright 2025-2026 Appstrate
+
+This product includes software developed at
+Appstrate (https://appstrate.dev).

package/README.md

@@ -0,0 +1,40 @@
+# @appstrate/ui
+
+Shared React UI components for Appstrate surfaces — schema-driven forms, upload widget, RJSF templates.
+
+## Install
+
+```sh
+bun add @appstrate/ui
+```
+
+Peer deps: `react` 19, `react-dom` 19, `@rjsf/core` ^6, `@rjsf/utils` ^6, `@rjsf/validator-ajv8` ^6, `lucide-react`, `react-select` ^5, `@appstrate/core` ^2.10, `typescript` ^5.
+
+The package ships raw `.tsx` sources (no build step) — consumers are expected to transpile via their bundler (Vite, Next.js, etc.). Same convention as `@appstrate/core`.
+
+Designed to be consumed by any Appstrate surface (main app, portal, future dashboards) so schema forms render identically everywhere.
+
+## Usage
+
+```tsx
+import { SchemaForm } from "@appstrate/ui/schema-form";
+
+<SchemaForm
+  wrapper={manifest.input}
+  formData={values}
+  uploadPath="/api/uploads"
+  labels={labels}
+  onChange={(e) => setValues(e.formData)}
+  onSubmit={(e) => submit(e.formData)}
+/>;
+```
+
+The widget is i18n-agnostic — pass translated strings via `labels`. See `apps/web/src/hooks/use-schema-form-labels.ts` for the i18next bridge used by the Appstrate platform.
+
+## Exports
+
+- `./schema-form` — `SchemaForm` component, `FileWidgetLabels` type, RJSF widgets/templates.
+
+## License
+
+Apache-2.0

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@appstrate/ui",
+  "version": "1.0.0",
+  "description": "Shared React UI components for Appstrate surfaces — schema-driven forms, upload widget, RJSF templates",
+  "license": "Apache-2.0",
+  "type": "module",
+  "engines": {
+    "bun": ">=1.3.9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "author": "Appstrate <hello@appstrate.dev>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/appstrate/appstrate.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/appstrate/appstrate/tree/main/packages/ui",
+  "bugs": {
+    "url": "https://github.com/appstrate/appstrate/issues"
+  },
+  "keywords": [
+    "appstrate",
+    "ui",
+    "react",
+    "rjsf",
+    "schema-form",
+    "afps"
+  ],
+  "files": [
+    "src",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "exports": {
+    "./schema-form": "./src/schema-form/index.tsx"
+  },
+  "dependencies": {
+    "tailwind-merge": "^3.0.0"
+  },
+  "peerDependencies": {
+    "@appstrate/core": "^2.10.0",
+    "@rjsf/core": "^6",
+    "@rjsf/utils": "^6",
+    "@rjsf/validator-ajv8": "^6",
+    "lucide-react": ">=0.400.0",
+    "react": "^19",
+    "react-dom": "^19",
+    "react-select": "^5",
+    "typescript": "^5"
+  },
+  "devDependencies": {
+    "@appstrate/core": "workspace:*",
+    "@types/bun": "^1.3.9",
+    "@rjsf/core": "^6.4.2",
+    "@rjsf/utils": "^6.4.2",
+    "@rjsf/validator-ajv8": "^6.4.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lucide-react": "^1.8.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-select": "^5.10.2",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "check": "tsc --noEmit",
+    "test": "bun test"
+  }
+}

package/src/schema-form/cn.ts

@@ -0,0 +1,11 @@
+// Copyright 2025-2026 Appstrate
+// SPDX-License-Identifier: Apache-2.0
+
+// Thin wrapper around `tailwind-merge` so conflicting Tailwind utilities
+// (e.g. base `border-input` + conditional `border-destructive`) resolve
+// deterministically by attribute order rather than CSS source order.
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: (string | false | null | undefined)[]): string {
+  return twMerge(inputs.filter(Boolean).join(" "));
+}

package/src/schema-form/context.ts

@@ -0,0 +1,16 @@
+// Copyright 2025-2026 Appstrate
+// SPDX-License-Identifier: Apache-2.0
+
+import type { FileWidgetLabels } from "./file-widget.tsx";
+import type { UploadFn } from "./upload-client.ts";
+
+/**
+ * Shape of `formContext` that `SchemaForm` feeds to RJSF templates and
+ * widgets. Templates should read it via `registry.formContext as SchemaFormContext`
+ * rather than re-declaring ad-hoc types.
+ */
+export interface SchemaFormContext {
+  uploadPath?: string;
+  upload?: UploadFn;
+  labels?: FileWidgetLabels & { addItem?: string };
+}

package/src/schema-form/file-widget.tsx

@@ -0,0 +1,278 @@
+// Copyright 2025-2026 Appstrate
+// SPDX-License-Identifier: Apache-2.0
+
+import { useRef, useState, useCallback, useEffect, useMemo } from "react";
+import { X } from "lucide-react";
+import type { WidgetProps } from "@rjsf/utils";
+import { Button, LABEL_CLASS } from "./primitives.tsx";
+import { cn } from "./cn.ts";
+import { createUploader, isUploadUri, type UploadFn } from "./upload-client.ts";
+import type { SchemaFormContext } from "./context.ts";
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+interface Attachment {
+  uri: string;
+  name: string;
+  size: number;
+}
+
+function attachmentsFromValue(value: unknown): Attachment[] {
+  const list: Attachment[] = [];
+  const raw = Array.isArray(value) ? value : value != null ? [value] : [];
+  for (const v of raw) {
+    if (isUploadUri(v)) {
+      const tail = v.slice("upload://".length);
+      list.push({ uri: v, name: tail, size: 0 });
+    }
+  }
+  return list;
+}
+
+/**
+ * Labels consumed by FileWidget. Callers can pass translated strings via
+ * `<SchemaForm labels={...}>` so the widget integrates with the host app's
+ * i18n system without this package taking a hard dependency on i18next.
+ */
+export interface FileWidgetLabels {
+  uploading?: string;
+  dragDrop?: string;
+  addFile?: string;
+  uploadsDisabled?: string;
+  maxSize?: (size: string) => string;
+  maxFiles?: (count: number) => string;
+  formats?: (formats: string) => string;
+  extError?: (name: string, accept: string) => string;
+  sizeError?: (name: string, size: string) => string;
+}
+
+const DEFAULT_LABELS: Required<FileWidgetLabels> = {
+  uploading: "Uploading…",
+  dragDrop: "Drag and drop a file here, or click to select",
+  addFile: "Add file",
+  uploadsDisabled: "File uploads are not configured for this form.",
+  maxSize: (size) => `Max ${size}`,
+  maxFiles: (count) => `At most ${count} files allowed`,
+  formats: (formats) => `Formats: ${formats}`,
+  extError: (name, accept) => `${name} is not a supported format (${accept})`,
+  sizeError: (name, size) => `${name} exceeds the ${size} size limit`,
+};
+
+/**
+ * RJSF file widget. Accepts:
+ *   - `{ type: "string", format: "uri", contentMediaType }`            → single
+ *   - `{ type: "array", items: { type: "string", format: "uri", … } }` → multi
+ *
+ * The binary is uploaded directly to storage via the endpoint resolved from
+ * `formContext.uploadPath` (POST), and `onChange` writes back an
+ * `upload://upl_xxx` URI (or array of URIs). RJSF then validates the schema
+ * on this URI — the server re-validates when the run is triggered.
+ */
+export function FileWidget(props: WidgetProps) {
+  const { id, value, onChange, required, label, schema, disabled, readonly, options, formContext } =
+    props;
+  const ctx = (formContext ?? {}) as SchemaFormContext;
+  const labels = useMemo<Required<FileWidgetLabels>>(
+    () => ({ ...DEFAULT_LABELS, ...(ctx.labels ?? {}) }),
+    [ctx.labels],
+  );
+  const upload = useMemo<UploadFn | null>(
+    () => ctx.upload ?? (ctx.uploadPath ? createUploader(ctx.uploadPath) : null),
+    [ctx.upload, ctx.uploadPath],
+  );
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [attachments, setAttachments] = useState<Attachment[]>(() => attachmentsFromValue(value));
+  const abortRef = useRef<AbortController | null>(null);
+  useEffect(() => () => abortRef.current?.abort(), []);
+
+  const multiple = schema.type === "array" || (options?.multiple as boolean | undefined) === true;
+  const accept = (options?.accept as string | undefined) ?? undefined;
+  const maxSize = options?.maxSize as number | undefined;
+  const maxFiles = options?.maxFiles as number | undefined;
+
+  const commit = useCallback(
+    (next: Attachment[]) => {
+      setAttachments(next);
+      if (multiple) {
+        onChange(next.map((a) => a.uri));
+      } else {
+        onChange(next[0]?.uri);
+      }
+    },
+    [multiple, onChange],
+  );
+
+  const addFiles = useCallback(
+    async (incoming: File[]) => {
+      setError(null);
+      if (!upload) {
+        setError(labels.uploadsDisabled);
+        return;
+      }
+      for (const f of incoming) {
+        if (accept) {
+          const allowed = accept
+            .split(",")
+            .map((e) => e.trim().toLowerCase())
+            .filter(Boolean);
+          const ext = f.name.includes(".") ? `.${f.name.split(".").pop()!.toLowerCase()}` : "";
+          const mimeMatch = allowed.some((a) => {
+            if (a.startsWith(".")) return a === ext;
+            if (a.endsWith("/*")) return f.type.startsWith(a.slice(0, -1));
+            return f.type === a;
+          });
+          if (!mimeMatch) {
+            setError(labels.extError(f.name, accept));
+            return;
+          }
+        }
+        if (maxSize && f.size > maxSize) {
+          setError(labels.sizeError(f.name, formatSize(maxSize)));
+          return;
+        }
+      }
+      const willHave = attachments.length + incoming.length;
+      if (multiple && maxFiles && willHave > maxFiles) {
+        setError(labels.maxFiles(maxFiles));
+        return;
+      }
+
+      setUploading(true);
+      abortRef.current?.abort();
+      const ctrl = new AbortController();
+      abortRef.current = ctrl;
+      try {
+        const uploaded: Attachment[] = [];
+        for (const f of incoming) {
+          const uri = await upload(f, ctrl.signal);
+          uploaded.push({ uri, name: f.name, size: f.size });
+        }
+        const next = multiple ? [...attachments, ...uploaded] : uploaded.slice(0, 1);
+        commit(next);
+      } catch (e) {
+        if ((e as { name?: string }).name === "AbortError") return;
+        setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        setUploading(false);
+        if (abortRef.current === ctrl) abortRef.current = null;
+      }
+    },
+    [accept, attachments, commit, labels, maxFiles, maxSize, multiple, upload],
+  );
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    const dropped = Array.from(e.dataTransfer.files);
+    if (dropped.length > 0) void addFiles(dropped);
+  };
+
+  const handleSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = Array.from(e.target.files || []);
+    if (selected.length > 0) void addFiles(selected);
+    e.target.value = "";
+  };
+
+  const remove = (idx: number) => {
+    commit(attachments.filter((_, i) => i !== idx));
+    setError(null);
+  };
+
+  const locked = disabled || readonly || uploading;
+
+  return (
+    <div className="space-y-2">
+      <label htmlFor={id} className={LABEL_CLASS}>
+        {label}
+        {required && " *"}
+      </label>
+      {attachments.length === 0 ? (
+        <div
+          role="button"
+          tabIndex={locked ? -1 : 0}
+          aria-disabled={locked || undefined}
+          aria-label={labels.addFile}
+          className={cn(
+            "text-muted-foreground hover:border-muted-foreground/50 focus-visible:ring-ring flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 text-center text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none",
+            dragOver && "border-primary bg-primary/5",
+            locked && "pointer-events-none opacity-60",
+          )}
+          onClick={() => !locked && inputRef.current?.click()}
+          onKeyDown={(e) => {
+            if (locked) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              inputRef.current?.click();
+            }
+          }}
+          onDragOver={(e) => {
+            e.preventDefault();
+            if (!locked) setDragOver(true);
+          }}
+          onDragLeave={() => setDragOver(false)}
+          onDrop={(e) => !locked && handleDrop(e)}
+        >
+          {uploading ? labels.uploading : labels.dragDrop}
+          {accept && <span className="mt-1 text-xs">{labels.formats(accept)}</span>}
+          {maxSize && <span className="mt-1 text-xs">{labels.maxSize(formatSize(maxSize))}</span>}
+        </div>
+      ) : (
+        <>
+          <div className="space-y-1">
+            {attachments.map((a, i) => (
+              <div
+                key={`${a.uri}-${i}`}
+                className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
+              >
+                <span className="truncate font-medium">{a.name}</span>
+                {a.size > 0 && (
+                  <span className="text-muted-foreground ml-2 shrink-0">{formatSize(a.size)}</span>
+                )}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="text-muted-foreground ml-2 h-7 w-7 shrink-0"
+                  disabled={locked}
+                  onClick={() => remove(i)}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+          {multiple && (!maxFiles || attachments.length < maxFiles) && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={locked}
+              onClick={() => inputRef.current?.click()}
+            >
+              {uploading ? labels.uploading : labels.addFile}
+            </Button>
+          )}
+        </>
+      )}
+      {error && <p className="text-destructive text-sm">{error}</p>}
+      <input
+        ref={inputRef}
+        id={id}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={locked}
+        onChange={handleSelect}
+        className="hidden"
+      />
+    </div>
+  );
+}

package/src/schema-form/index.tsx

@@ -0,0 +1,151 @@
+// Copyright 2025-2026 Appstrate
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Thin RJSF wrapper integrated with the Appstrate dark theme. Ships in
+ * `@appstrate/ui/schema-form` so every Appstrate frontend (main app,
+ * portal, future surfaces) renders AFPS input/config/output schemas
+ * identically.
+ *
+ *   <SchemaForm
+ *     wrapper={manifest.input}
+ *     formData={…}
+ *     onChange={…}
+ *     onSubmit={…}
+ *     uploadPath="/api/uploads"
+ *   >
+ *     {/* custom footer, or leave empty to let RJSF render a submit button *\/}
+ *   </SchemaForm>
+ *
+ * The AFPS `SchemaWrapper` (schema + fileConstraints + uiHints + propertyOrder)
+ * is mapped to RJSF's `schema` + `uiSchema` by `@appstrate/core/form`. JSON
+ * Schema 2020-12 is used via `customizeValidator({ AjvClass: Ajv2020 })`.
+ */
+
+import { forwardRef, useMemo, type ReactNode } from "react";
+import type { FormProps as RjsfFormProps } from "@rjsf/core";
+import RjsfForm from "@rjsf/core";
+import { mapAfpsToRjsf, type SchemaWrapper } from "@appstrate/core/form";
+import { schemaFormValidator } from "./validator.ts";
+import {
+  BaseInputTemplate,
+  FieldTemplate,
+  TitleFieldTemplate,
+  DescriptionFieldTemplate,
+  ArrayFieldTemplate,
+  ArrayFieldItemTemplate,
+  ObjectFieldTemplate,
+  MultiSchemaFieldTemplate,
+  SubmitButton,
+} from "./templates.tsx";
+import {
+  FileWidget,
+  TextareaWidget,
+  CheckboxWidget,
+  SelectWidget,
+  MultiSelectWidget,
+} from "./widgets.tsx";
+import type { FileWidgetLabels } from "./file-widget.tsx";
+import type { UploadFn } from "./upload-client.ts";
+
+import type { SchemaFormContext } from "./context.ts";
+
+export type { SchemaWrapper } from "@appstrate/core/form";
+export type { FileWidgetLabels } from "./file-widget.tsx";
+export type { UploadFn } from "./upload-client.ts";
+export type { SchemaFormContext } from "./context.ts";
+
+const widgets = {
+  file: FileWidget,
+  TextareaWidget,
+  CheckboxWidget,
+  SelectWidget,
+  multiselect: MultiSelectWidget,
+};
+
+const templates = {
+  BaseInputTemplate,
+  FieldTemplate,
+  TitleFieldTemplate,
+  DescriptionFieldTemplate,
+  ArrayFieldTemplate,
+  ArrayFieldItemTemplate,
+  ObjectFieldTemplate,
+  MultiSchemaFieldTemplate,
+  ButtonTemplates: { SubmitButton },
+};
+
+export interface SchemaFormProps extends Omit<
+  RjsfFormProps,
+  "schema" | "uiSchema" | "validator" | "widgets" | "templates" | "children" | "formContext"
+> {
+  wrapper: SchemaWrapper;
+  /** Extra uiSchema merged on top of the AFPS-derived one. */
+  uiSchema?: Record<string, unknown>;
+  /** When true, render the default RJSF submit button. Default: false. */
+  showSubmitButton?: boolean;
+  /**
+   * Endpoint the `FileWidget` POSTs to for direct uploads. Must return an
+   * `UploadDescriptor`. Omit to disable uploads (the widget shows an error
+   * if the user tries to attach a file).
+   */
+  uploadPath?: string;
+  /** Escape hatch: provide your own uploader instead of the default fetch client. */
+  upload?: UploadFn;
+  /** Translated strings for the FileWidget. Defaults are English. */
+  labels?: FileWidgetLabels & { addItem?: string };
+  /** Extra formContext keys merged into what SchemaForm builds internally. */
+  formContext?: Record<string, unknown>;
+  children?: ReactNode;
+}
+
+/**
+ * Submit-button rendering is controlled by a single signal:
+ * `ui:submitButtonOptions.norender`. When `showSubmitButton` is false (default)
+ * we set `norender: true` and let RJSF render whatever `children` the caller
+ * passes as a footer (or nothing).
+ */
+export const SchemaForm = forwardRef<RjsfForm, SchemaFormProps>(function SchemaForm(
+  {
+    wrapper,
+    showSubmitButton = false,
+    children,
+    uiSchema: extraUi,
+    uploadPath,
+    upload,
+    labels,
+    formContext,
+    ...rest
+  },
+  ref,
+) {
+  const mapped = mapAfpsToRjsf(wrapper);
+  const uiSchema = {
+    ...mapped.uiSchema,
+    ...(extraUi ?? {}),
+    ...(showSubmitButton ? {} : { "ui:submitButtonOptions": { norender: true } }),
+  };
+
+  // Stable identity so downstream `useMemo`s in FileWidget actually memoize.
+  const ctx = useMemo(
+    () =>
+      ({ ...(formContext ?? {}), uploadPath, upload, labels }) as SchemaFormContext &
+        Record<string, unknown>,
+    [formContext, uploadPath, upload, labels],
+  );
+
+  return (
+    <RjsfForm
+      ref={ref}
+      schema={mapped.schema as unknown as Record<string, unknown>}
+      uiSchema={uiSchema}
+      validator={schemaFormValidator}
+      widgets={widgets}
+      templates={templates}
+      formContext={ctx}
+      {...rest}
+    >
+      {children}
+    </RjsfForm>
+  );
+});

package/src/schema-form/primitives.tsx

@@ -0,0 +1,46 @@
+// Copyright 2025-2026 Appstrate
+// SPDX-License-Identifier: Apache-2.0
+
+// Inline Tailwind primitives (shadcn-equivalent look, zero extra deps) shared
+// by templates and widgets. Styling relies solely on CSS tokens that all
+// Appstrate surfaces expose (`--background`, `--input`, `--primary`, …).
+
+import { cn } from "./cn.ts";
+
+export const INPUT_CLASS =
+  "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50";
+
+export const LABEL_CLASS =
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
+
+const BUTTON_VARIANTS: Record<string, string> = {
+  default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+  outline:
+    "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+  ghost: "hover:bg-accent hover:text-accent-foreground",
+};
+
+const BUTTON_SIZES: Record<string, string> = {
+  default: "h-9 px-4 py-2",
+  sm: "h-8 rounded-md px-3 text-xs",
+  icon: "h-9 w-9",
+};
+
+export function Button({
+  variant = "default",
+  size = "default",
+  className,
+  ...rest
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: string; size?: string }) {
+  return (
+    <button
+      {...rest}
+      className={cn(
+        "focus-visible:ring-ring inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+        BUTTON_VARIANTS[variant] ?? BUTTON_VARIANTS.default,
+        BUTTON_SIZES[size] ?? BUTTON_SIZES.default,
+        className,
+      )}
+    />
+  );
+}

package/src/schema-form/templates.tsx

@@ -0,0 +1,272 @@
+// Copyright 2025-2026 Appstrate
+// SPDX-License-Identifier: Apache-2.0
+
+// Tailwind-styled RJSF templates matching the Appstrate dark theme. Only
+// templates we actually want to restyle are overridden — RJSF defaults
+// handle the rest. No shadcn/radix imports here so this module ships in
+// `@appstrate/ui` and can be consumed by any Appstrate frontend (main app,
+// portal, future surfaces). Styling relies solely on CSS tokens that all
+// Appstrate UIs expose (`--background`, `--input`, `--primary`, …).
+
+import type {
+  BaseInputTemplateProps,
+  FieldTemplateProps,
+  TitleFieldProps,
+  DescriptionFieldProps,
+  SubmitButtonProps,
+  ArrayFieldTemplateProps,
+  ArrayFieldItemTemplateProps,
+  ObjectFieldTemplateProps,
+  MultiSchemaFieldTemplateProps,
+} from "@rjsf/utils";
+import { getSubmitButtonOptions } from "@rjsf/utils";
+import { Plus, Trash2, ArrowUp, ArrowDown } from "lucide-react";
+import { cn } from "./cn.ts";
+import { Button, INPUT_CLASS, LABEL_CLASS } from "./primitives.tsx";
+import type { SchemaFormContext } from "./context.ts";
+
+export function BaseInputTemplate<T = unknown>(props: BaseInputTemplateProps<T>) {
+  const {
+    id,
+    value,
+    required,
+    readonly,
+    disabled,
+    type,
+    schema,
+    onChange,
+    onBlur,
+    onFocus,
+    options,
+    autofocus,
+    placeholder,
+    rawErrors,
+  } = props;
+
+  const formatType =
+    schema.format === "email"
+      ? "email"
+      : schema.format === "uri"
+        ? "url"
+        : schema.format === "date"
+          ? "date"
+          : schema.format === "date-time"
+            ? "datetime-local"
+            : schema.format === "time"
+              ? "time"
+              : "text";
+  const inputType = type ?? formatType;
+
+  const isConst = schema && "const" in schema;
+  const isReadOnly = readonly || isConst;
+
+  return (
+    <input
+      id={id}
+      type={inputType}
+      value={(value as string | number | undefined) ?? ""}
+      required={required}
+      readOnly={isReadOnly}
+      disabled={disabled}
+      autoFocus={autofocus && !isReadOnly}
+      placeholder={(placeholder ?? (options?.["ui:placeholder"] as string | undefined)) as string}
+      className={cn(
+        INPUT_CLASS,
+        isReadOnly && "bg-muted/50 cursor-not-allowed",
+        rawErrors && rawErrors.length > 0 && "border-destructive",
+      )}
+      onChange={(e) =>
+        onChange(
+          e.target.value === "" ? (options?.emptyValue as T) : (e.target.value as unknown as T),
+        )
+      }
+      onBlur={(e) => onBlur?.(id, e.target.value)}
+      onFocus={(e) => onFocus?.(id, e.target.value)}
+    />
+  );
+}
+
+export function FieldTemplate(props: FieldTemplateProps) {
+  const {
+    id,
+    label,
+    children,
+    rawErrors,
+    rawDescription,
+    required,
+    displayLabel,
+    hidden,
+    schema,
+    uiSchema,
+    classNames,
+  } = props;
+
+  if (hidden) return <div className="hidden">{children}</div>;
+
+  // File widget renders its own label so we skip the FieldTemplate label.
+  const widget = (uiSchema as Record<string, unknown>)?.["ui:widget"];
+  const isFileWidget = widget === "file";
+  // Objects and arrays render labels via TitleField, so don't double up here —
+  // unless a custom single-control widget (multi-select) is in play, in which
+  // case we DO want the field-level label.
+  const isSingleControlWidget = widget === "multiselect";
+  const isContainer =
+    !isSingleControlWidget && (schema.type === "object" || schema.type === "array");
+
+  const showLabel = displayLabel && !isFileWidget && !isContainer && label;
+
+  const showDescription = rawDescription && !isFileWidget && !isContainer;
+
+  return (
+    <div className={cn("space-y-1.5", classNames)}>
+      {showLabel && (
+        <label htmlFor={id} className={LABEL_CLASS}>
+          {label}
+          {required && " *"}
+        </label>
+      )}
+      {showDescription && <p className="text-muted-foreground text-xs">{rawDescription}</p>}
+      {children}
+      {rawErrors && rawErrors.length > 0 && (
+        <ul className="space-y-0.5">
+          {rawErrors.map((err, i) => (
+            <li key={i} className="text-destructive text-xs">
+              {err}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export function TitleFieldTemplate(props: TitleFieldProps) {
+  const { title, required, id } = props;
+  if (!title) return null;
+  return (
+    <h3 id={id} className="text-sm font-medium">
+      {title}
+      {required && " *"}
+    </h3>
+  );
+}
+
+export function DescriptionFieldTemplate(props: DescriptionFieldProps) {
+  const { description, id } = props;
+  if (!description) return null;
+  return (
+    <p id={id} className="text-muted-foreground text-xs">
+      {description}
+    </p>
+  );
+}
+
+export function MultiSchemaFieldTemplate(props: MultiSchemaFieldTemplateProps) {
+  const { selector, optionSchemaField } = props;
+  return (
+    <div className="space-y-4">
+      {selector}
+      {optionSchemaField}
+    </div>
+  );
+}
+
+export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
+  const { title, description, properties, fieldPathId } = props;
+  const isRoot = fieldPathId?.$id === "root";
+  return (
+    <div className={isRoot ? "space-y-6" : "space-y-4"}>
+      {title && !isRoot && <h3 className="text-sm font-medium">{title}</h3>}
+      {description && !isRoot && <p className="text-muted-foreground text-xs">{description}</p>}
+      {properties.map((p) => (
+        <div key={p.name}>{p.content}</div>
+      ))}
+    </div>
+  );
+}
+
+export function ArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps) {
+  const { children, buttonsProps, hasToolbar } = props;
+  const {
+    hasMoveUp,
+    hasMoveDown,
+    hasRemove,
+    disabled,
+    onMoveUpItem,
+    onMoveDownItem,
+    onRemoveItem,
+  } = buttonsProps;
+  return (
+    <div className="border-border bg-muted/30 relative space-y-2 rounded-md border p-3">
+      <div className="space-y-3">{children}</div>
+      {hasToolbar && (hasMoveUp || hasMoveDown || hasRemove) && !disabled && (
+        <div className="flex justify-end gap-1">
+          {hasMoveUp && (
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              onClick={onMoveUpItem}
+              aria-label="Move up"
+            >
+              <ArrowUp className="h-4 w-4" />
+            </Button>
+          )}
+          {hasMoveDown && (
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              onClick={onMoveDownItem}
+              aria-label="Move down"
+            >
+              <ArrowDown className="h-4 w-4" />
+            </Button>
+          )}
+          {hasRemove && (
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              onClick={onRemoveItem}
+              aria-label="Remove"
+            >
+              <Trash2 className="text-destructive h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
+  const { items, canAdd, onAddClick, disabled, readonly, title, schema, uiSchema, registry } =
+    props;
+  const description = (uiSchema?.["ui:description"] as string | undefined) ?? schema.description;
+  const ctx = (registry.formContext ?? {}) as SchemaFormContext;
+  return (
+    <div className="space-y-3">
+      {title && <h3 className="text-sm font-medium">{title}</h3>}
+      {description && <p className="text-muted-foreground text-xs">{description}</p>}
+      {items && items.length > 0 && <div className="space-y-2">{items}</div>}
+      {canAdd && !readonly && (
+        <Button type="button" variant="outline" size="sm" onClick={onAddClick} disabled={disabled}>
+          <Plus className="mr-1 h-4 w-4" />
+          {ctx.labels?.addItem ?? "Add"}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export function SubmitButton(props: SubmitButtonProps) {
+  const { uiSchema } = props;
+  const { norender, submitText, props: btnProps } = getSubmitButtonOptions(uiSchema);
+  if (norender) return null;
+  return (
+    <Button type="submit" {...btnProps}>
+      {submitText ?? "Submit"}
+    </Button>
+  );
+}

package/src/schema-form/upload-client.ts

@@ -0,0 +1,66 @@
+// Copyright 2025-2026 Appstrate
+// SPDX-License-Identifier: Apache-2.0
+
+// Tiny direct-upload client used by the FileWidget. The endpoint path is
+// configurable so the same widget works against Appstrate's `/api/uploads`
+// and Portal's `/share/:token/uploads` proxy.
+
+interface UploadDescriptor {
+  id: string;
+  uri: string;
+  url: string;
+  method: "PUT";
+  headers: Record<string, string>;
+}
+
+export interface UploadFn {
+  (file: File, signal?: AbortSignal): Promise<string>;
+}
+
+/**
+ * Build an upload function bound to a specific POST endpoint. Returns the
+ * opaque `upload://upl_xxx` URI on success.
+ *
+ * Errors propagate the server-side RFC 9457 detail message so the caller
+ * can surface it to the user.
+ *
+ * `signal` lets callers cancel an in-flight upload.
+ */
+export function createUploader(uploadPath: string): UploadFn {
+  return async (file, signal) => {
+    const descRes = await fetch(uploadPath, {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        name: file.name,
+        size: file.size,
+        mime: file.type || "application/octet-stream",
+      }),
+      signal,
+    });
+    if (!descRes.ok) {
+      const body = (await descRes.json().catch(() => ({ detail: descRes.statusText }))) as {
+        detail?: string;
+      };
+      throw new Error(body.detail ?? `upload init failed: ${descRes.status}`);
+    }
+    const desc = (await descRes.json()) as UploadDescriptor;
+
+    const putRes = await fetch(desc.url, {
+      method: desc.method,
+      headers: desc.headers,
+      body: file,
+      signal,
+    });
+    if (!putRes.ok) {
+      throw new Error(`upload failed: ${putRes.status} ${putRes.statusText}`);
+    }
+
+    return desc.uri;
+  };
+}
+
+export function isUploadUri(v: unknown): v is string {
+  return typeof v === "string" && v.startsWith("upload://");
+}

package/src/schema-form/validator.ts

@@ -0,0 +1,15 @@
+// Copyright 2025-2026 Appstrate
+// SPDX-License-Identifier: Apache-2.0
+
+// Shared Ajv2020 + ajv-formats validator for RJSF, matching the backend via
+// the single factory in `@appstrate/core/ajv`. The awkward `unknown` cast at
+// the ajv-formats / ajv/dist/2020 boundary lives there, not here.
+
+import { customizeValidator } from "@rjsf/validator-ajv8";
+import { AjvClass } from "@appstrate/core/ajv";
+
+export const schemaFormValidator = customizeValidator({
+  AjvClass,
+  ajvOptionsOverrides: { strict: false },
+  ajvFormatOptions: {},
+});

package/src/schema-form/widgets.tsx

@@ -0,0 +1,123 @@
+// Copyright 2025-2026 Appstrate
+// SPDX-License-Identifier: Apache-2.0
+
+// Custom RJSF widgets — framework-agnostic (no shadcn/radix deps).
+// Single- and multi-selects both use react-select so we get a rich,
+// consistent dropdown in every Appstrate surface.
+
+import type { WidgetProps } from "@rjsf/utils";
+import Select, { type StylesConfig } from "react-select";
+import { cn } from "./cn.ts";
+import { LABEL_CLASS } from "./primitives.tsx";
+export { FileWidget } from "./file-widget.tsx";
+
+interface EnumOption {
+  value: unknown;
+  label: string;
+}
+
+// react-select custom styles mapped onto Appstrate's CSS variables so the
+// dropdown picks up the current theme (dark/light) via CSS tokens.
+const selectStyles: StylesConfig<EnumOption> = {
+  control: (base) => ({
+    ...base,
+    backgroundColor: "transparent",
+    borderColor: "var(--border)",
+    minHeight: "2.25rem",
+  }),
+  menu: (base) => ({ ...base, backgroundColor: "var(--popover)" }),
+  option: (base, state) => ({
+    ...base,
+    backgroundColor: state.isFocused ? "var(--accent)" : "transparent",
+    color: "inherit",
+  }),
+  multiValue: (base) => ({ ...base, backgroundColor: "var(--secondary)" }),
+  input: (base) => ({ ...base, color: "inherit" }),
+  singleValue: (base) => ({ ...base, color: "inherit" }),
+  placeholder: (base) => ({ ...base, color: "var(--muted-foreground)" }),
+};
+
+export function TextareaWidget(props: WidgetProps) {
+  const { id, value, onChange, required, readonly, disabled, placeholder, rawErrors } = props;
+  return (
+    <textarea
+      id={id}
+      value={(value as string | undefined) ?? ""}
+      required={required}
+      readOnly={readonly}
+      disabled={disabled}
+      placeholder={placeholder}
+      rows={5}
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        rawErrors && rawErrors.length > 0 && "border-destructive",
+      )}
+      onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
+    />
+  );
+}
+
+export function CheckboxWidget(props: WidgetProps) {
+  const { id, value, onChange, required, disabled, label } = props;
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="checkbox"
+        id={id}
+        checked={Boolean(value)}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.checked)}
+        className="border-primary text-primary focus-visible:ring-ring h-4 w-4 shrink-0 rounded-sm border shadow focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      />
+      {label && (
+        <label htmlFor={id} className={cn(LABEL_CLASS, "cursor-pointer font-normal")}>
+          {label}
+          {required && " *"}
+        </label>
+      )}
+    </div>
+  );
+}
+
+export function SelectWidget(props: WidgetProps) {
+  const { id, value, onChange, disabled, options, placeholder } = props;
+  const enumOptions = (options.enumOptions as EnumOption[] | undefined) ?? [];
+
+  const selected = enumOptions.find((o) => String(o.value) === String(value)) ?? null;
+
+  return (
+    <Select<EnumOption, false>
+      inputId={id}
+      isDisabled={disabled}
+      isClearable
+      options={enumOptions}
+      value={selected}
+      placeholder={placeholder ?? ""}
+      onChange={(opt) => onChange(opt ? opt.value : undefined)}
+      classNamePrefix="rjsf-select"
+      styles={selectStyles}
+    />
+  );
+}
+
+/** Array of enums → multi-select dropdown via react-select. */
+export function MultiSelectWidget(props: WidgetProps) {
+  const { id, value, onChange, disabled, options } = props;
+  const enumOptions = (options.enumOptions as EnumOption[] | undefined) ?? [];
+
+  const raw = Array.isArray(value) ? value : [];
+  const selected = enumOptions.filter((o) => raw.some((v) => String(v) === String(o.value)));
+
+  return (
+    <Select<EnumOption, true>
+      inputId={id}
+      isMulti
+      isDisabled={disabled}
+      options={enumOptions}
+      value={selected}
+      onChange={(sel) => onChange(sel.map((s) => s.value))}
+      classNamePrefix="rjsf-ms"
+      styles={selectStyles as StylesConfig<EnumOption, true>}
+    />
+  );
+}