Function Inspector

src/ui-react-inspector/index.tsx:11–43

({
  position = 'right',
  open = false,
  hue = 270,
}: InspectorProps)

import {Panel} from './Panel.tsx';

export const Inspector = ({
  position = 'right',
  open = false,
  hue = 270,
}: InspectorProps) => {
  const s = useCreateStore(createStore); // The inspector's Store throughout.

  useCreatePersister(
    s,
    (s) => createSessionPersister(s, UNIQUE_ID),
    undefined,
    async (persister) => {
      await persister.load([
        {},
        {
          position: getInitialPosition(position),
          open: !!open,
        },
      ]);
      await persister.startAutoSave();
    },
  );

  return (
    <>
      <aside id={UNIQUE_ID} style={{'--hue': hue} as CSSProperties}>
        <Nub s={s} />
        <Panel s={s} />
      </aside>
      <style>{APP_STYLESHEET}</style>
    </>
  );
};