react-iframe-bridge 1.0.0 → 2.0.0

package/lib/types/db.d.ts

@@ -39,6 +39,10 @@ export interface SampleEntry {
 }
 export interface SampleEntryContent {
     general: {
+        title?: string;
+        name?: Array<{
+            value: string;
+        }>;
         mf: string;
         mw: number;
         em: number;
@@ -76,3 +80,4 @@ export interface SampleEntrySpectraNmr {
         filename: string;
     };
 }
+//# sourceMappingURL=db.d.ts.map

package/lib/types/db.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"db.d.ts","sourceRoot":"","sources":["../../src/types/db.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC7C,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,aAAa,CAAC;IACnB,KAAK,EAAE,QAAQ,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,KAAK,CAAC;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QAChC,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,OAAO,EAAE,MAAM,CAAC;QAChB,GAAG,EAAE;YACH,KAAK,EAAE,MAAM,CAAC;YACd,WAAW,EAAE,MAAM,CAAC;YACpB,KAAK,EAAE,MAAM,EAAE,CAAC;SACjB,CAAC;KACH,CAAC;IACF,UAAU,EAAE;QACV,GAAG,EAAE,KAAK,CAAC;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KAC/B,CAAC;IACF,OAAO,EAAE;QACP,GAAG,EAAE,qBAAqB,EAAE,CAAC;KAC9B,CAAC;CACH;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH"}

package/lib/types/db.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=db.js.map

package/lib/types/db.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"db.js","sourceRoot":"","sources":["../../src/types/db.ts"],"names":[],"mappings":""}

package/lib/types/util.d.ts

@@ -4,3 +4,4 @@ export type ActionType<Action, Payload = void> = Payload extends void ? {
     type: Action;
     payload: Payload;
 };
+//# sourceMappingURL=util.d.ts.map

package/lib/types/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/types/util.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,IAAI,OAAO,SAAS,IAAI,GACjE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC"}

package/lib/types/util.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=util.js.map

package/lib/types/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/types/util.ts"],"names":[],"mappings":""}

package/{lib-cjs/utils/localStorage.d.ts → lib/utils/local_storage.d.ts}

@@ -1,3 +1,4 @@
 declare let getItem: (key: string) => unknown | null;
 declare let setItem: (key: string, value: unknown) => void;
 export { getItem, setItem };
+//# sourceMappingURL=local_storage.d.ts.map

package/lib/utils/local_storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"local_storage.d.ts","sourceRoot":"","sources":["../../src/utils/local_storage.ts"],"names":[],"mappings":"AAcA,QAAA,IAAI,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;AAC7C,QAAA,IAAI,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAmBnD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/lib/utils/{localStorage.js → local_storage.js}

@@ -30,3 +30,4 @@ else {
     };
 }
 export { getItem, setItem };
+//# sourceMappingURL=local_storage.js.map

package/lib/utils/local_storage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"local_storage.js","sourceRoot":"","sources":["../../src/utils/local_storage.ts"],"names":[],"mappings":"AAAA,mEAAmE;AAEnE;;;;GAIG;AACH,SAAS,SAAS,CAAC,GAAW;IAC5B,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;IAC1D,CAAC;IACD,OAAO,uBAAuB,GAAG,EAAE,CAAC;AACtC,CAAC;AAED,IAAI,OAAwC,CAAC;AAC7C,IAAI,OAA8C,CAAC;AAEnD,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE,CAAC;IACxC,OAAO,GAAG,SAAS,OAAO,CAAC,GAAW;QACpC,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;QACnD,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QACxB,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,OAAO,GAAG,CAAC,GAAW,EAAE,KAAc,EAAE,EAAE,CACxC,YAAY,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;AAChE,CAAC;KAAM,CAAC;IACN,6DAA6D;IAC7D,OAAO,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,IAAI,CAAC;IAChC,6DAA6D;IAC7D,OAAO,GAAG,CAAC,GAAW,EAAE,KAAc,EAAQ,EAAE;QAC9C,OAAO;IACT,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "react-iframe-bridge",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "React hooks and components to work with iframe-bridge.",
-  "main": "lib-cjs/index.js",
-  "module": "lib/index.js",
+  "type": "module",
+  "exports": "./lib/index.js",
   "files": [
     "lib",
-    "lib-cjs"
+    "src"
   ],
   "scripts": {
     "check-types": "tsc --noEmit",
-    "compile": "tsc && tsc -p tsconfig.cjs.json",
+    "compile": "tsc",
     "eslint": "eslint .",
     "eslint-fix": "npm run eslint -- --fix",
     "prepack": "npm run compile",
@@ -28,12 +28,12 @@
   },
   "homepage": "https://github.com/zakodium-oss/react-iframe-bridge#readme",
   "dependencies": {
-    "clsx": "^2.1.1",
-    "iframe-bridge": "^2.0.0",
+    "iframe-bridge": "^3.0.1",
     "immer": "^10.1.1",
     "rest-on-couch-client": "^5.3.1"
   },
   "devDependencies": {
+    "@types/node": "^22.15.21",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "eslint": "^9.27.0",

package/src/components/error_page.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+
+interface ErrorPageProps {
+  title: string;
+  subtitle: string;
+  children?: ReactNode;
+}
+
+export default function ErrorPage(props: ErrorPageProps) {
+  return (
+    <div style={{ maxWidth: '56rem', margin: 'auto' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          paddingInline: '0.5rem',
+          paddingTop: '1rem',
+        }}
+      >
+        <div style={{ minWidth: 0 }}>
+          <h1
+            style={{
+              fontSize: '3rem',
+              fontWeight: 'bold',
+              marginTop: '4rem',
+              color: '#1c398e',
+            }}
+          >
+            {props.title}
+          </h1>
+          <h2 style={{ marginTop: '4rem', fontSize: '1.125rem' }}>
+            {props.subtitle}
+          </h2>
+          <div style={{ marginTop: '1rem' }}>{props.children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/home/home.tsx

@@ -0,0 +1,98 @@
+import { useEffect } from 'react';
+
+import { HomeContextProvider, useHomeDispatchContext } from './home_context.js';
+import HomeHeader from './home_header.js';
+import HomeIframe from './home_iframe.js';
+import HomeNoSample from './home_no_sample.js';
+import HomeSamples from './home_samples.js';
+
+export interface HomeProps {
+  /**
+   * URL of the rest-on-couch instance.
+   * @default 'http://localhost:3000/api/fake-roc'
+   */
+  rocUrl?: string;
+  /**
+   * Name of the rest-on-couch database.
+   * @default 'eln'
+   */
+  database?: string;
+  /**
+   * Base url loaded by the iframe
+   */
+  baseUrl?: string;
+  /**
+   * Default path the iframe should load, if no path is found in local storage
+   */
+  defaultPath?: string;
+  /**
+   * Opt out of selecting a sample / selecting no sample before loading the iframe.
+   * The sample selection UI will be hidden and the iframe will automatically load without a selected sample.
+   */
+  noSampleSelection?: boolean;
+}
+
+export function Home(props: HomeProps) {
+  const { baseUrl, noSampleSelection, rocUrl, database, defaultPath } = props;
+  return (
+    <HomeContextProvider
+      rocUrl={rocUrl}
+      database={database}
+      defaultPath={defaultPath}
+    >
+      <HomeInternal noSampleSelection={noSampleSelection} baseUrl={baseUrl} />
+    </HomeContextProvider>
+  );
+}
+
+function HomeInternal(props: Pick<HomeProps, 'baseUrl' | 'noSampleSelection'>) {
+  const homeDispatch = useHomeDispatchContext();
+  useEffect(() => {
+    if (props.noSampleSelection) {
+      homeDispatch({
+        type: 'OPEN_NO_SAMPLE',
+      });
+    }
+  }, [props.noSampleSelection, homeDispatch]);
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100vw',
+        height: '100vh',
+      }}
+    >
+      <HomeHeader />
+      <div
+        style={{
+          marginTop: '0.5rem',
+          display: 'flex',
+          minHeight: 0,
+          flex: 1,
+          flexDirection: 'row',
+          borderTop: '1px solid #d1d5dc',
+        }}
+      >
+        {!props.noSampleSelection && (
+          <div
+            style={{
+              display: 'flex',
+              width: '12rem',
+              flexDirection: 'column',
+              gap: '0.75rem',
+              overflow: 'auto',
+              borderRight: '1px solid #d1d5dc',
+              paddingInline: '0.5rem',
+              paddingTop: '1rem',
+            }}
+          >
+            <HomeNoSample />
+            <HomeSamples />
+          </div>
+        )}
+        <HomeIframe baseUrl={props.baseUrl} />
+      </div>
+    </div>
+  );
+}

package/src/components/home/home_context.tsx

@@ -0,0 +1,101 @@
+import { produce } from 'immer';
+import type { Dispatch, ReactNode, Reducer } from 'react';
+import { createContext, useContext, useReducer } from 'react';
+
+import { RocProvider } from '../../contexts/roc.js';
+import { useSaveToLocalStorage } from '../../hooks/local_storage.js';
+import type { ActionType } from '../../types/util.js';
+import { getItem } from '../../utils/local_storage.js';
+
+interface HomeContextType {
+  rocUrl: string;
+  database: string;
+  iframePath: string;
+  iframeMode: 'closed' | 'sample' | 'no-sample';
+  selectedSample: string | null;
+}
+
+function getInitialHomeContext(
+  config: Pick<
+    HomeContextProviderProps,
+    'rocUrl' | 'database' | 'defaultPath'
+  > = {},
+): HomeContextType {
+  const {
+    rocUrl = 'http://localhost:3000/api/fake-roc',
+    database = 'eln',
+    defaultPath = '/dev/base-page',
+  } = config;
+  return {
+    rocUrl,
+    database,
+    iframePath: (getItem('dev-home-iframe-path') as string) || defaultPath,
+    iframeMode: 'closed',
+    selectedSample: null,
+  };
+}
+
+type HomeContextAction =
+  | ActionType<'SELECT_SAMPLE', string>
+  | ActionType<'OPEN_NO_SAMPLE'>
+  | ActionType<'SET_IFRAME_PAGE', string>;
+
+const homeReducer: Reducer<HomeContextType, HomeContextAction> = produce(
+  (state: HomeContextType, action: HomeContextAction) => {
+    switch (action.type) {
+      case 'OPEN_NO_SAMPLE':
+        state.iframeMode = 'no-sample';
+        state.selectedSample = null;
+        break;
+      case 'SELECT_SAMPLE':
+        state.iframeMode = 'sample';
+        state.selectedSample = action.payload;
+        break;
+      case 'SET_IFRAME_PAGE':
+        state.iframePath = action.payload;
+        break;
+      default:
+        throw new Error('unreachable');
+    }
+  },
+);
+
+const homeContext = createContext(getInitialHomeContext());
+const homeDispatchContext = createContext<Dispatch<HomeContextAction>>(() => {
+  // noop
+});
+
+interface HomeContextProviderProps {
+  children: ReactNode;
+  rocUrl?: string;
+  database?: string;
+  defaultPath?: string;
+}
+
+export function HomeContextProvider(props: HomeContextProviderProps) {
+  const { children, ...initial } = props;
+  const [homeState, dispatch] = useReducer(
+    homeReducer,
+    initial,
+    getInitialHomeContext,
+  );
+  useSaveToLocalStorage('dev-home-iframe-path', homeState.iframePath);
+
+  return (
+    <homeContext.Provider value={homeState}>
+      <homeDispatchContext.Provider value={dispatch}>
+        <RocProvider url={homeState.rocUrl} database={homeState.database}>
+          {children}
+        </RocProvider>
+      </homeDispatchContext.Provider>
+    </homeContext.Provider>
+  );
+}
+
+export function useHomeContext() {
+  return useContext(homeContext);
+}
+
+export function useHomeDispatchContext() {
+  return useContext(homeDispatchContext);
+}

package/src/components/home/home_header.tsx

@@ -0,0 +1,29 @@
+import Input from '../input.js';
+
+import { useHomeContext, useHomeDispatchContext } from './home_context.js';
+
+export default function HomeHeader() {
+  const { rocUrl, database, iframePath } = useHomeContext();
+  const dispatch = useHomeDispatchContext();
+  return (
+    <header
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '1rem',
+        padding: '0.5rem',
+      }}
+    >
+      <Input name="rocUrl" style={{ flex: 1 }} value={rocUrl} readOnly />
+      <Input name="database" value={database} readOnly />
+      <Input
+        name="iframe-page"
+        value={iframePath}
+        style={{ flex: 1 }}
+        onChange={(event) => {
+          dispatch({ type: 'SET_IFRAME_PAGE', payload: event.target.value });
+        }}
+      />
+    </header>
+  );
+}

package/src/components/home/home_iframe.tsx

@@ -0,0 +1,73 @@
+// https://github.com/import-js/eslint-plugin-import/issues/1810
+
+import { postMessage, registerHandler } from 'iframe-bridge/main';
+import { useEffect, useState } from 'react';
+
+import { useHomeContext } from './home_context.js';
+
+interface AdminMessage {
+  type: 'admin.connect';
+  windowID: number;
+}
+
+interface HomeIframeProps {
+  baseUrl?: string;
+}
+
+export default function HomeIframe(props: HomeIframeProps) {
+  const { baseUrl } = props;
+  const { database, iframePath, rocUrl, selectedSample, iframeMode } =
+    useHomeContext();
+
+  const [windowId, setWindowId] = useState<number>();
+
+  useEffect(() => {
+    registerHandler('admin', (message: AdminMessage) => {
+      switch (message.type) {
+        case 'admin.connect': {
+          setWindowId(message.windowID);
+          break;
+        }
+        default:
+          throw new Error('unreachable');
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (windowId === undefined) return;
+    postMessage(
+      'tab.data',
+      {
+        couchDB: {
+          url: rocUrl,
+          database,
+        },
+        uuid: selectedSample,
+      },
+      windowId,
+    );
+  }, [windowId, database, rocUrl, selectedSample]);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {iframeMode !== 'closed' ? (
+        <iframe
+          key={selectedSample}
+          allowFullScreen
+          src={`${baseUrl || ''}${iframePath}`}
+          style={{ width: '100%', height: '100%' }}
+        />
+      ) : (
+        <div>Please select something</div>
+      )}
+    </div>
+  );
+}

package/src/components/home/home_no_sample.tsx

@@ -0,0 +1,16 @@
+import { useHomeContext, useHomeDispatchContext } from './home_context.js';
+import HomeSelector from './home_selector.js';
+
+export default function HomeNoSample() {
+  const { iframeMode } = useHomeContext();
+  const dispatch = useHomeDispatchContext();
+  return (
+    <div>
+      <HomeSelector
+        onClick={() => dispatch({ type: 'OPEN_NO_SAMPLE' })}
+        selected={iframeMode === 'no-sample'}
+        text="No sample"
+      />
+    </div>
+  );
+}

package/src/components/home/home_samples.tsx

@@ -0,0 +1,62 @@
+import type { RocQueryResult } from '../../hooks/use_roc_query.js';
+import { useRocQuery } from '../../hooks/use_roc_query.js';
+import type { TocEntry } from '../../types/db.js';
+import Spinner from '../spinner.js';
+
+import { useHomeContext, useHomeDispatchContext } from './home_context.js';
+import HomeSelector from './home_selector.js';
+
+export default function HomeSamples() {
+  const { loading, error, result } = useRocQuery<TocEntry>('sample_toc');
+  if (error) {
+    throw error;
+  }
+  return (
+    <>
+      <h1
+        style={{
+          marginBottom: '1rem',
+          textAlign: 'center',
+          fontSize: '1.125rem',
+          fontWeight: 'bold',
+        }}
+      >
+        Sample TOC
+      </h1>
+      <div style={{ flex: 1 }}>
+        {loading || !result ? <Loading /> : <SampleToc samples={result} />}
+      </div>
+    </>
+  );
+}
+
+function SampleToc(props: { samples: Array<RocQueryResult<TocEntry>> }) {
+  const { selectedSample } = useHomeContext();
+  const dispatch = useHomeDispatchContext();
+  function selectSample(id: string) {
+    dispatch({ type: 'SELECT_SAMPLE', payload: id });
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+      {props.samples.map((sample) => (
+        <HomeSelector
+          key={sample.id}
+          selected={sample.id === selectedSample}
+          text={sample.value.reference}
+          onClick={() => selectSample(sample.id)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function Loading() {
+  return (
+    <div
+      style={{ marginTop: '2rem', display: 'flex', justifyContent: 'center' }}
+    >
+      <Spinner style={{ width: '2rem', height: '2rem', color: '#6a7282' }} />
+    </div>
+  );
+}

package/src/components/home/home_selector.tsx

@@ -0,0 +1,23 @@
+import type { CSSProperties } from 'react';
+
+export default function HomeSelector(props: {
+  selected: boolean;
+  onClick: () => void;
+  text: string;
+}) {
+  const style: CSSProperties = {
+    padding: '0.25rem',
+    border: '1px solid #99a1af',
+    borderRadius: '0.25rem',
+    cursor: 'pointer',
+  };
+  if (props.selected) {
+    style.backgroundColor = '#f3f4f6';
+    style.boxShadow = 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)';
+  }
+  return (
+    <div style={style} onClick={props.onClick}>
+      {props.text}
+    </div>
+  );
+}

package/src/components/input.tsx

@@ -0,0 +1,31 @@
+import type { ChangeEvent, CSSProperties } from 'react';
+
+interface InputProps {
+  name: string;
+  style?: CSSProperties;
+  value: string;
+  readOnly?: boolean;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function Input(props: InputProps) {
+  return (
+    <input
+      name={props.name}
+      type="text"
+      style={{
+        appearance: 'none',
+        border: '1px solid #4a5565',
+        backgroundColor: 'white',
+        paddingInline: '0.75rem',
+        paddingBlock: '0.5rem',
+        fontSize: '1rem',
+        lineHeight: 1,
+        ...props.style,
+      }}
+      value={props.value}
+      readOnly={props.readOnly}
+      onChange={props.onChange}
+    />
+  );
+}

package/src/components/loading_full.tsx

@@ -0,0 +1,19 @@
+import Spinner from './spinner.js';
+
+export default function LoadingFull() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Spinner
+        style={{ width: '2.5rem', height: '2.5rem', color: '#6a7282' }}
+      />
+    </div>
+  );
+}

package/src/components/spinner.tsx

@@ -0,0 +1,44 @@
+import type { CSSProperties } from 'react';
+import { useEffect, useRef } from 'react';
+
+export interface SpinnerProps {
+  style?: CSSProperties;
+}
+
+export default function Spinner(props: SpinnerProps) {
+  // Trick to spin the element without defining keyframes.
+  const style: CSSProperties = {
+    transform: 'rotate(0deg)',
+    transition: 'transform 60s linear',
+    ...props.style,
+  };
+  const ref = useRef<SVGSVGElement>(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    ref.current.style.transform = 'rotate(36000deg)';
+  }, []);
+
+  return (
+    <svg
+      ref={ref}
+      style={style}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        opacity="25%"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        opacity="75%"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}