@valbuild/ui 0.12.0 → 0.13.0

package/src/components/ValWindow.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RichTextEditor } from "../exports";
+import { FormContainer } from "./forms/FormContainer";
+import { ImageForm } from "./forms/ImageForm";
+import { TextForm } from "./forms/TextForm";
+
+import { ValWindow } from "./ValWindow";
+
+const meta: Meta<typeof ValWindow> = { component: ValWindow };
+
+export default meta;
+type Story = StoryObj<typeof ValWindow>;
+
+const EXAMPLE_IMAGE =
+  "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAFgAWAAD/4QDkRXhpZgAASUkqAAgAAAAJABIBAwABAAAAAQAAABoBBQABAAAAegAAABsBBQABAAAAggAAACgBAwABAAAAAgAAADEBAgANAAAAigAAADIBAgAUAAAAmAAAAGmHBAABAAAAygAAAHySAgAHAAAArAAAAIaSAgAWAAAAtAAAAAAAAAAWAAAAAQAAABYAAAABAAAAR0lNUCAyLjEwLjM0AAAyMDIzOjA1OjI0IDE0OjQ3OjA1AE9wZW5BSQAATWFkZSB3aXRoIE9wZW5BSSBMYWJzAAEAAaADAAEAAAABAAAAAAAAAP/hDM9odHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDQuNC4wLUV4aXYyIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDo1NDk5MWU4Yy01YjkxLTQwYWYtYjk4ZC00ZjEwMWYwY2QxZWQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Y2JmMjFlNjMtNGZiYi00MjI5LThlM2UtN2MzMWI0ZDNiNWFhIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YzQ3ZWZmNDktNzg4Yy00NzdjLWJkNTEtZGM5YzJjYTY4NzBjIiBkYzpGb3JtYXQ9ImltYWdlL2pwZWciIEdJTVA6QVBJPSIyLjAiIEdJTVA6UGxhdGZvcm09IkxpbnV4IiBHSU1QOlRpbWVTdGFtcD0iMTY4NDkzMjQyNzk4NDA2MCIgR0lNUDpWZXJzaW9uPSIyLjEwLjM0IiB4bXA6Q3JlYXRvclRvb2w9IkdJTVAgMi4xMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMzowNToyNFQxNDo0NzowNSswMjowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjM6MDU6MjRUMTQ6NDc6MDUrMDI6MDAiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6Y2hhbmdlZD0iLyIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoxNjIyMWEyMS0wZmMzLTQ1NmEtOWZlOC1hOTAyMmY0NjBhOTEiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoTGludXgpIiBzdEV2dDp3aGVuPSIyMDIzLTA1LTI0VDE0OjQ3OjA3KzAyOjAwIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8P3hwYWNrZXQgZW5kPSJ3Ij8+/+ICsElDQ19QUk9GSUxFAAEBAAACoGxjbXMEQAAAbW50clJHQiBYWVogB+cABQAYAAwALQAJYWNzcEFQUEwAAAAAAAAA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";
+const EXAMPLE_TEXT = `
+Vi gjør mange ting sammen i Blank, men det vi lever av er å designe og utvikle digitale tjenester for kundene våre.
+
+Noen av selskapene vi jobber med er små, andre er store. Alle har de høye ambisjoner for sine digitale løsninger, og stiller høye krav til hvem de jobber med.
+
+Noen ganger starter vi nye, egne, selskaper også, mest fordi det er gøy (og fordi vi liker å bygge ting), men også fordi smarte folk har gode idéer som fortjener å bli realisert.
+Ting vi har bygd for kundene våre
+`;
+export const ShortText: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <TextForm
+          name="/apps/blogs.0.title"
+          text="Hva skjer'a, Bagera?"
+          onChange={() => {
+            console.log("onChange");
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};
+export const LongText: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <TextForm
+          name="/apps/blogs.0.title"
+          text={EXAMPLE_TEXT}
+          onChange={() => {
+            console.log("onChange");
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};
+
+export const RichText: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <RichTextEditor
+          richtext={{
+            children: [
+              {
+                children: [
+                  {
+                    detail: 0,
+                    format: 0,
+                    mode: "normal",
+                    style: "",
+                    text: "Heading 1",
+                    type: "text",
+                    version: 1,
+                  },
+                ],
+                direction: "ltr",
+                format: "",
+                indent: 0,
+                type: "heading",
+                version: 1,
+                tag: "h1",
+              },
+            ],
+            direction: "ltr",
+            format: "",
+            indent: 0,
+            type: "root",
+            version: 1,
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};
+
+export const EmptyImage: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <ImageForm
+          name="/apps/blogs.0.image"
+          error={null}
+          data={null}
+          onChange={() => {
+            console.log("onChange");
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};
+
+export const Image: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <ImageForm
+          name="/apps/blogs.0.image"
+          error={null}
+          data={{
+            url: EXAMPLE_IMAGE,
+            metadata: {
+              width: 32,
+              height: 32,
+              sha256: "123",
+            },
+          }}
+          onChange={() => {
+            console.log("onChange");
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};
+
+export const ImageError: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <ImageForm
+          name="/apps/blogs.0.image"
+          error={"invalid-file"}
+          data={{
+            url: EXAMPLE_IMAGE,
+          }}
+          onChange={() => {
+            console.log("onChange");
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};

package/src/components/ValWindow.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AlignJustify, X } from "react-feather";
+import classNames from "classnames";
+
+export type ValWindowProps = {
+  children: React.ReactNode;
+  onClose: () => void;
+  position?: { left: number; top: number };
+  isInitialized?: true;
+};
+
+export function ValWindow({
+  position,
+  isInitialized: isInitializedProp,
+  onClose,
+  children,
+}: ValWindowProps): React.ReactElement {
+  const [draggedPosition, isInitialized, ref, onMouseDown] = useDrag({
+    position,
+  });
+  useEffect(() => {
+    const closeOnEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keyup", closeOnEscape);
+    return () => {
+      document.removeEventListener("keyup", closeOnEscape);
+    };
+  }, []);
+  return (
+    <div
+      className={classNames(
+        "absolute h-[100svh] w-full tablet:w-auto tablet:h-auto tablet:rounded bg-base drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 tablet:max-w-[50ch] max-w-full",
+        {
+          "opacity-0": !(isInitialized || isInitializedProp),
+          "opacity-100": isInitialized || isInitializedProp,
+        }
+      )}
+      style={{
+        left: draggedPosition.left,
+        top: draggedPosition.top,
+      }}
+    >
+      <div
+        ref={ref}
+        className="relative flex justify-center px-2 py-2 text-primary"
+      >
+        <AlignJustify
+          size={16}
+          className="hidden w-full cursor-grab tablet:block"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onMouseDown();
+          }}
+        />
+        <button
+          className="absolute top-0 right-0 px-4 py-2 focus:outline-none focus-visible:outline-highlight"
+          onClick={onClose}
+        >
+          <X size={16} />
+        </button>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function useDrag({
+  position: initPosition,
+}: {
+  position?: { left: number; top: number };
+}) {
+  const [position, setPosition] = useState({ left: 0, top: 0 });
+  useEffect(() => {
+    if (initPosition) {
+      setPosition({
+        left:
+          initPosition.left -
+          (ref?.current?.getBoundingClientRect()?.width || 0) / 2,
+        top: initPosition.top - 16,
+      });
+    }
+  }, [initPosition]);
+
+  const [mouseDown, setMouseDown] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const onMouseUp = () => {
+      setMouseDown(false);
+    };
+    const onMouseMove = (e: MouseEvent) => {
+      if (mouseDown) {
+        e.preventDefault();
+        e.stopPropagation();
+        const top =
+          -((ref?.current?.getBoundingClientRect()?.height || 0) / 2) +
+          +e.pageY;
+
+        setPosition({
+          left:
+            -((ref?.current?.getBoundingClientRect()?.width || 0) / 2) +
+            e.pageX,
+          top: top < 0 ? 0 : top,
+        });
+      }
+    };
+
+    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener("mousemove", onMouseMove);
+    return () => {
+      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener("mousemove", onMouseMove);
+    };
+  }, [mouseDown]);
+
+  // TODO: rename hook from useDrag to usePosition or something since we also check for screen width here?
+  useEffect(() => {
+    const onResize = () => {
+      if (window.screen.width < 640) {
+        setPosition({
+          left: 0,
+          top: 0,
+        });
+      }
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+  const handleMouseDown = () => setMouseDown(true);
+  const isInitialized = !!ref?.current?.getBoundingClientRect()?.width;
+  return [position, isInitialized, ref, handleMouseDown] as const;
+}

package/src/components/forms/Form.tsx

@@ -0,0 +1,122 @@
+import { RichText } from "@valbuild/core";
+import { LexicalEditor } from "lexical";
+import { useEffect, useState } from "react";
+import { RichTextEditor } from "../RichTextEditor/RichTextEditor";
+import { FormContainer } from "./FormContainer";
+import { ImageForm, ImageData } from "./ImageForm";
+import { TextData, TextForm } from "./TextForm";
+
+export type Inputs = {
+  [path: string]:
+    | { status: "requested" }
+    | {
+        status: "completed";
+        type: "text";
+        data: TextData;
+      }
+    | { status: "completed"; type: "image"; data: ImageData }
+    | { status: "completed"; type: "richtext"; data: RichText };
+};
+
+export type FormProps = {
+  onSubmit: (nextInputs: Inputs) => void;
+  inputs: Inputs;
+};
+
+export function Form({ onSubmit, inputs }: FormProps): React.ReactElement {
+  const [currentInputs, setCurrentInputs] = useState<Inputs>();
+  const [richTextEditor, setRichTextEditor] = useState<{
+    [path: string]: LexicalEditor;
+  }>();
+
+  useEffect(() => {
+    setCurrentInputs(inputs);
+  }, [inputs]);
+
+  return (
+    <FormContainer
+      onSubmit={() => {
+        if (currentInputs) {
+          onSubmit(
+            Object.fromEntries(
+              Object.entries(currentInputs).map(([path, input]) => {
+                if (input.status === "completed" && input.type === "richtext") {
+                  if (!richTextEditor) {
+                    throw Error(
+                      "Cannot save rich text - editor not initialized"
+                    );
+                  }
+                  return [
+                    path,
+                    {
+                      status: "completed",
+                      type: "richtext",
+                      data: richTextEditor[path].getEditorState().toJSON()
+                        ?.root,
+                    },
+                  ];
+                }
+                return [path, input];
+              })
+            )
+          );
+        }
+      }}
+    >
+      {currentInputs &&
+        Object.entries(currentInputs).map(([path, input]) => (
+          <div key={path}>
+            {input.status === "requested" && (
+              <div className="p-2 text-center text-primary">Loading...</div>
+            )}
+            {input.status === "completed" && input.type === "image" && (
+              <ImageForm
+                name={path}
+                data={input.data}
+                onChange={(data) => {
+                  if (data.value) {
+                    setCurrentInputs({
+                      ...currentInputs,
+                      [path]: {
+                        status: "completed",
+                        type: "image",
+                        data: data.value,
+                      },
+                    });
+                  }
+                }}
+                error={null}
+              />
+            )}
+            {input.status === "completed" && input.type === "text" && (
+              <TextForm
+                name={path}
+                text={input.data}
+                onChange={(data) => {
+                  setCurrentInputs({
+                    ...currentInputs,
+                    [path]: {
+                      status: "completed",
+                      type: "text",
+                      data: data,
+                    },
+                  });
+                }}
+              />
+            )}
+            {input.status === "completed" && input.type === "richtext" && (
+              <RichTextEditor
+                richtext={input.data}
+                onEditor={(editor) => {
+                  setRichTextEditor({
+                    ...richTextEditor,
+                    [path]: editor,
+                  });
+                }}
+              />
+            )}
+          </div>
+        ))}
+    </FormContainer>
+  );
+}

package/src/components/forms/FormContainer.tsx

@@ -0,0 +1,24 @@
+import { PrimaryButton } from "../Button";
+
+export function FormContainer({
+  children,
+  onSubmit,
+}: {
+  children: React.ReactNode;
+  onSubmit: () => void;
+}) {
+  return (
+    <form
+      className="flex flex-col justify-between w-full px-4 py-2"
+      onSubmit={(ev) => {
+        ev.preventDefault();
+        onSubmit();
+      }}
+    >
+      {children}
+      <div className="flex justify-end">
+        <PrimaryButton>Save</PrimaryButton>
+      </div>
+    </form>
+  );
+}

package/src/components/forms/ImageForm.tsx

@@ -0,0 +1,195 @@
+import { useEffect, useState } from "react";
+import { UploadCloud } from "react-feather";
+import { ErrorText } from "../ErrorText";
+
+type Error = "invalid-file" | "file-too-large";
+export type ImageData =
+  | {
+      src: string;
+      addMetadata: boolean;
+      metadata?: { width: number; height: number; sha256: string };
+    }
+  | {
+      url: string;
+      metadata?: { width: number; height: number; sha256: string };
+    }
+  | null;
+export type ImageInputProps = {
+  name: string;
+  data: ImageData;
+  maxSize?: number;
+  error: Error | null;
+  onChange: (
+    result: { error: null; value: ImageData } | { error: Error; value: null }
+  ) => void;
+};
+
+const textEncoder = new TextEncoder();
+// TODO: handle hashes some other way
+const getSHA256Hash = async (bits: Uint8Array) => {
+  const hashBuffer = await window.crypto.subtle.digest("SHA-256", bits);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hash = hashArray
+    .map((item) => item.toString(16).padStart(2, "0"))
+    .join("");
+  return hash;
+};
+
+export function ImageForm({
+  name,
+  data: data,
+  maxSize,
+  error,
+  onChange,
+}: ImageInputProps) {
+  const [currentData, setCurrentData] = useState<ImageData>(null);
+  useEffect(() => {
+    setCurrentData(data);
+  }, [data]);
+  const [currentError, setCurrentError] = useState<Error | null>(null);
+  useEffect(() => {
+    setCurrentError(error);
+  }, [data]);
+
+  // TODO: we should update the Input type - we should never have a url here?
+  const src =
+    (currentData &&
+      (("src" in currentData && currentData.src) ||
+        ("url" in currentData && currentData.url))) ||
+    undefined;
+
+  return (
+    <div className="w-full py-2 max-w-[90vw] object-contain">
+      <label htmlFor={name}>
+        <div className="flex items-center justify-center w-full h-full min-h-[200px] cursor-pointer">
+          {currentData !== null && (
+            <img className="object-contain max-h-[300px]" src={src} />
+          )}
+          {!src && <UploadCloud size={24} className="text-primary" />}
+        </div>
+        <input
+          hidden
+          type="file"
+          id={name}
+          name={name}
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (file) {
+              if (maxSize && file.size > maxSize) {
+                onChange({ error: "file-too-large", value: null });
+                return;
+              }
+              const reader = new FileReader();
+              reader.addEventListener("load", () => {
+                const result = reader.result;
+                if (typeof result === "string") {
+                  const image = new Image();
+                  image.onload = async () => {
+                    const nextSource = {
+                      src: result,
+                      metadata: {
+                        width: image.naturalWidth,
+                        height: image.naturalHeight,
+                        sha256: await getSHA256Hash(textEncoder.encode(result)),
+                      },
+                      addMetadata: !currentData?.metadata,
+                    };
+                    setCurrentData(nextSource);
+                    setCurrentError(null);
+                    onChange({
+                      error: null,
+                      value: nextSource,
+                    });
+                  };
+                  image.src = result;
+                } else {
+                  onChange({ error: "invalid-file", value: null });
+                }
+              });
+              reader.readAsDataURL(file);
+            }
+          }}
+        />
+      </label>
+      {currentData &&
+        (!currentData.metadata ||
+          typeof currentData.metadata.height === "undefined" ||
+          typeof currentData.metadata.width === "undefined" ||
+          typeof currentData.metadata.sha256 === "undefined") && (
+          <ErrorText>
+            <div className="">
+              <div>Validation failed: missing metadata</div>
+              <button
+                className="px-4 py-2 border border-dark-gray"
+                onClick={async (ev) => {
+                  ev.preventDefault();
+
+                  const image = new Image();
+                  image.onload = async () => {
+                    const nextSource = {
+                      src: image.src,
+                      metadata: {
+                        width: image.naturalWidth,
+                        height: image.naturalHeight,
+                        sha256: await getSHA256Hash(
+                          textEncoder.encode(image.src)
+                        ),
+                      },
+                      addMetadata: !currentData?.metadata,
+                    };
+                    setCurrentData(nextSource);
+                    setCurrentError(null);
+                    onChange({
+                      error: null,
+                      value: nextSource,
+                    });
+                  };
+
+                  if ("url" in currentData) {
+                    const src = await fetch(currentData.url)
+                      .then((response) => response.blob())
+                      .then((blob) => {
+                        return new Promise<string>((resolve, reject) => {
+                          const reader = new FileReader();
+                          reader.onload = function () {
+                            if (typeof this.result !== "string") {
+                              return reject(
+                                Error(
+                                  `Could not read file from url: ${currentData.url}`
+                                )
+                              );
+                            }
+                            resolve(this.result);
+                          }; // <--- `this.result` contains a base64 data URI
+                          reader.readAsDataURL(blob);
+                        });
+                      });
+                    image.src = src;
+                  } else {
+                    image.src = currentData.src;
+                  }
+                }}
+              >
+                Fix
+              </button>
+            </div>
+          </ErrorText>
+        )}
+      {currentData?.metadata && (
+        <div className="ml-auto text-primary">
+          Dimensions: {currentData.metadata.width}x{currentData.metadata.height}
+        </div>
+      )}
+      {currentError && <ImageError error={currentError} />}
+    </div>
+  );
+}
+
+function ImageError({ error }: { error: Error }): React.ReactElement | null {
+  if (error === "invalid-file") {
+    return <ErrorText>Invalid file</ErrorText>;
+  } else if (error === "file-too-large") {
+    return <ErrorText>File is too large</ErrorText>;
+  }
+  return null;
+}

package/src/components/forms/TextForm.tsx

@@ -0,0 +1,22 @@
+export type TextData = string;
+export type TextInputProps = {
+  name: string;
+  text: TextData;
+  onChange: (value: string) => void;
+};
+
+export function TextForm({ name, text, onChange }: TextInputProps) {
+  return (
+    <div
+      className="w-full py-2 grow-wrap"
+      data-replicated-value={text} /* see grow-wrap */
+    >
+      <textarea
+        name={name}
+        className="w-full p-2 border outline-none bg-fill text-primary border-border focus-visible:border-highlight"
+        defaultValue={text}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  );
+}

package/src/exports.ts

@@ -0,0 +1,3 @@
+export { RichTextEditor } from "./components/RichTextEditor/RichTextEditor";
+export { ValOverlay } from "./components/ValOverlay";
+export { type Inputs } from "./components/forms/Form";