@arcanewizards/sigil 0.1.0

package/dist/frontend/controls/index.d.ts

@@ -0,0 +1,168 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode, CSSProperties, FC, ComponentProps, InputHTMLAttributes, MutableRefObject } from 'react';
+import { TooltipProps } from '../tooltip.js';
+import { PressableOnClickListener } from '../input.js';
+import { DialogProps } from '../dialogs.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SigilColor } from '../styling.js';
+import 'zod';
+
+type ControlPosition = 'row' | 'label' | 'first' | 'second' | 'both' | 'all' | 'extra';
+declare const clsControlPosition: (position?: ControlPosition) => "control-grid-pos-row" | "control-grid-pos-label" | "control-grid-pos-first" | "control-grid-pos-second" | "control-grid-pos-both" | "control-grid-pos-all" | "control-grid-pos-extra" | undefined;
+declare const clsControlSubgridPosition: (position: ControlPosition, subgrid?: boolean) => "col-[1/span_1]" | "col-[2/span_1]" | "col-[3/span_1]" | undefined;
+declare const controlPositionClass: (position?: ControlPosition) => "control-grid-pos-row" | "control-grid-pos-label" | "control-grid-pos-first" | "control-grid-pos-second" | "control-grid-pos-both" | "control-grid-pos-all" | "control-grid-pos-extra" | undefined;
+
+declare const CONTROL_BUTTON_VAR_SUFFIX: {
+    readonly bg: "bg";
+    readonly bgHover: "bg-hover";
+    readonly bgActive: "bg-active";
+    readonly fg: "fg";
+    readonly fgHover: "fg-hover";
+    readonly fgActive: "fg-active";
+    readonly border: "border";
+    readonly borderHover: "border-hover";
+    readonly borderActive: "border-active";
+};
+declare const controlButtonColorVariable: (property: keyof typeof CONTROL_BUTTON_VAR_SUFFIX) => string;
+declare const controlButtonColorVariables: (usage: Record<keyof typeof CONTROL_BUTTON_VAR_SUFFIX, string>) => CSSProperties;
+type ControlButtonVariant = 'standard' | 'border' | 'large' | 'table-row' | 'toolbar' | 'titlebar' | 'properties';
+type ControlButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'onClick' | 'title'> & {
+    onClick: PressableOnClickListener;
+    variant: ControlButtonVariant;
+    active?: boolean;
+    title?: ReactNode;
+    tooltipSide?: TooltipProps['side'];
+    position?: ControlPosition;
+} & ({
+    children: ReactNode;
+    icon?: string;
+} | {
+    children?: undefined;
+    icon: string;
+});
+type ControlButtonFrameProps = Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'title'> & {
+    children?: ReactNode;
+    icon?: string;
+    variant?: ControlButtonVariant;
+    active?: boolean;
+    touching?: boolean;
+    title?: ReactNode;
+    tooltipSide?: TooltipProps['side'];
+    position?: ControlPosition;
+};
+declare const clsControlButton: ({ variant, active, touching, position, className, }: Pick<ControlButtonFrameProps, "variant" | "active" | "touching" | "position" | "className">) => string;
+declare const ControlButton: react.ForwardRefExoticComponent<ControlButtonProps & react.RefAttributes<HTMLButtonElement>>;
+type CheckboxControlButtonProps = Omit<ControlButtonProps, 'children' | 'icon'> & {
+    label?: string;
+};
+declare const CheckboxControlButton: react.ForwardRefExoticComponent<Omit<ControlButtonProps, "children" | "icon"> & {
+    label?: string;
+} & react.RefAttributes<HTMLButtonElement>>;
+type LongPressableControlButtonProps = Omit<ControlButtonFrameProps, 'icon' | 'onClick' | 'touching'> & {
+    children: ReactNode;
+    onPress: () => void;
+    onRelease: () => void;
+};
+declare const LongPressableControlButton: react.ForwardRefExoticComponent<Omit<ControlButtonFrameProps, "onClick" | "touching" | "icon"> & {
+    children: ReactNode;
+    onPress: () => void;
+    onRelease: () => void;
+} & react.RefAttributes<HTMLButtonElement>>;
+type ControlButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
+    position?: ControlPosition;
+};
+declare const ControlButtonGroup: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    position?: ControlPosition;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type ControlParagraphMode = 'error' | 'success' | 'warning';
+type ControlParagraphProps = ComponentPropsWithoutRef<'p'> & {
+    position?: ControlPosition;
+    mode?: ControlParagraphMode;
+};
+declare const ControlParagraph: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    position?: ControlPosition;
+    mode?: ControlParagraphMode;
+} & react.RefAttributes<HTMLParagraphElement>>;
+type ControlLabelProps = ComponentPropsWithoutRef<'div'> & {
+    subgrid?: boolean;
+    position?: ControlPosition;
+    disabled?: boolean;
+    nonMicro?: boolean;
+};
+declare const ControlLabel: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    subgrid?: boolean;
+    position?: ControlPosition;
+    disabled?: boolean;
+    nonMicro?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+type ControlDetailsProps = ComponentPropsWithoutRef<'div'> & {
+    position?: ControlPosition;
+    align?: 'start' | 'center' | 'end';
+};
+declare const ControlDetails: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    position?: ControlPosition;
+    align?: "start" | "center" | "end";
+} & react.RefAttributes<HTMLDivElement>>;
+type InputSpanningTitleProps = ComponentPropsWithoutRef<'div'> & {
+    position?: ControlPosition;
+};
+declare const InputSpanningTitle: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    position?: ControlPosition;
+} & react.RefAttributes<HTMLDivElement>>;
+
+declare const ControlDialogButtons: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+type ControlDialogProps = Omit<DialogProps, 'variant'> & {
+    large?: boolean;
+};
+declare const ControlDialog: FC<ControlDialogProps>;
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'ref' | 'onChange'> & {
+    value: string | null;
+    disabled?: boolean;
+    onChange: (value: string, enterPressed: boolean) => void;
+    inputRef?: MutableRefObject<HTMLInputElement | null>;
+};
+declare const InputWithDelayedPropagation: FC<InputProps>;
+type ControlInputProps = ComponentProps<typeof InputWithDelayedPropagation> & {
+    position?: ControlPosition;
+    subgrid?: boolean;
+    nonMicro?: boolean;
+};
+declare const ControlInput: FC<ControlInputProps>;
+type ControlPercentProps = Omit<ControlInputProps, 'className'> & {
+    className?: string;
+};
+declare const ControlPercent: FC<ControlPercentProps>;
+
+type SelectOption<T> = {
+    label: string;
+    value: T;
+    /**
+     * Set to true to indicate that when selected,
+     * the select should look active.
+     */
+    active?: boolean;
+};
+type SelectProps<T extends string | null> = {
+    options: SelectOption<T>[];
+    value: T | '';
+    onChange: (value: T) => void;
+    triggerText?: (option: SelectOption<T>) => ReactNode;
+    triggerButton?: (option: null | SelectOption<T>) => ReactNode;
+    option?: (option: SelectOption<T>) => ReactNode;
+    variant: ControlButtonVariant;
+    position?: ControlPosition;
+    disabled?: boolean;
+    tooltip?: string;
+    placeholder?: ReactNode;
+    triggerClassName?: string;
+};
+declare const ControlSelect: <T extends string | null>({ options, value, onChange, triggerText, triggerButton, option, variant, position, disabled, tooltip, placeholder, triggerClassName: className, }: SelectProps<T>) => react_jsx_runtime.JSX.Element;
+type ControlColorSelectProps = {
+    color: SigilColor | '';
+    onChange: (color: SigilColor) => void;
+} & Pick<SelectProps<SigilColor>, 'variant' | 'position' | 'disabled' | 'tooltip' | 'placeholder'>;
+declare const ControlColorSelect: ({ color, onChange, variant, position, disabled, placeholder, ...props }: ControlColorSelectProps) => react_jsx_runtime.JSX.Element;
+
+export { CheckboxControlButton, type CheckboxControlButtonProps, ControlButton, ControlButtonGroup, type ControlButtonGroupProps, type ControlButtonProps, type ControlButtonVariant, ControlColorSelect, ControlDetails, type ControlDetailsProps, ControlDialog, ControlDialogButtons, ControlInput, type ControlInputProps, ControlLabel, type ControlLabelProps, ControlParagraph, type ControlParagraphMode, type ControlParagraphProps, ControlPercent, type ControlPercentProps, type ControlPosition, ControlSelect, InputSpanningTitle, type InputSpanningTitleProps, InputWithDelayedPropagation, LongPressableControlButton, type LongPressableControlButtonProps, type SelectOption, clsControlButton, clsControlPosition, clsControlSubgridPosition, controlButtonColorVariable, controlButtonColorVariables, controlPositionClass };

package/dist/frontend/controls/index.js

@@ -0,0 +1,49 @@
+import {
+  CheckboxControlButton,
+  ControlButton,
+  ControlButtonGroup,
+  ControlColorSelect,
+  ControlDetails,
+  ControlDialog,
+  ControlDialogButtons,
+  ControlInput,
+  ControlLabel,
+  ControlParagraph,
+  ControlPercent,
+  ControlSelect,
+  InputSpanningTitle,
+  InputWithDelayedPropagation,
+  LongPressableControlButton,
+  clsControlButton,
+  clsControlPosition,
+  clsControlSubgridPosition,
+  controlButtonColorVariable,
+  controlButtonColorVariables,
+  controlPositionClass
+} from "../../chunk-XAK7WC3D.js";
+import "../../chunk-BIY5HAXP.js";
+import "../../chunk-4PMRDURG.js";
+import "../../chunk-H4U4Z4GM.js";
+export {
+  CheckboxControlButton,
+  ControlButton,
+  ControlButtonGroup,
+  ControlColorSelect,
+  ControlDetails,
+  ControlDialog,
+  ControlDialogButtons,
+  ControlInput,
+  ControlLabel,
+  ControlParagraph,
+  ControlPercent,
+  ControlSelect,
+  InputSpanningTitle,
+  InputWithDelayedPropagation,
+  LongPressableControlButton,
+  clsControlButton,
+  clsControlPosition,
+  clsControlSubgridPosition,
+  controlButtonColorVariable,
+  controlButtonColorVariables,
+  controlPositionClass
+};

package/dist/frontend/dialogs.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+var _chunkMXDDIFIOcjs = require('../chunk-MXDDIFIO.cjs');
+require('../chunk-PEARNJ5G.cjs');
+require('../chunk-RI33QVOD.cjs');
+require('../chunk-5DRI7C4U.cjs');
+
+
+
+
+
+
+exports.Dialog = _chunkMXDDIFIOcjs.Dialog; exports.DialogButtons = _chunkMXDDIFIOcjs.DialogButtons; exports.DialogContext = _chunkMXDDIFIOcjs.DialogContext; exports.DialogProvider = _chunkMXDDIFIOcjs.DialogProvider; exports.DialogTitle = _chunkMXDDIFIOcjs.DialogTitle;

package/dist/frontend/dialogs.d.cts

@@ -0,0 +1,36 @@
+import * as react from 'react';
+import { FC, ReactNode, ComponentPropsWithoutRef } from 'react';
+
+type DialogComponent = (close: () => void) => ReactNode;
+type DialogVariant = 'dark' | 'light' | 'light-compact' | 'dark-compact';
+type DialogOptions = {
+    closable?: boolean;
+    title?: string | ReactNode;
+    variant?: DialogVariant;
+};
+type CreateDialog = (dialog: DialogComponent, opts?: DialogOptions) => void;
+type DisplayMessage = (message: string | ReactNode, title?: string | ReactNode) => void;
+type DisplayError = (message: string | ReactNode, title?: string | ReactNode) => void;
+declare const DialogContext: react.Context<{
+    createDialog: CreateDialog;
+    displayMessage: DisplayMessage;
+    displayError: DisplayError;
+}>;
+type DialogTitleProps = ComponentPropsWithoutRef<'div'> & {
+    variant?: DialogVariant;
+};
+declare const DialogTitle: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    variant?: DialogVariant;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const DialogButtons: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type DialogProps = DialogOptions & {
+    children: ReactNode;
+    dialogClosed: () => void;
+};
+declare const Dialog: FC<DialogProps>;
+type DialogProviderProps = {
+    children: ReactNode;
+};
+declare const DialogProvider: FC<DialogProviderProps>;
+
+export { Dialog, DialogButtons, type DialogComponent, DialogContext, type DialogProps, DialogProvider, DialogTitle, type DialogTitleProps, type DialogVariant };

package/dist/frontend/dialogs.d.ts

@@ -0,0 +1,36 @@
+import * as react from 'react';
+import { FC, ReactNode, ComponentPropsWithoutRef } from 'react';
+
+type DialogComponent = (close: () => void) => ReactNode;
+type DialogVariant = 'dark' | 'light' | 'light-compact' | 'dark-compact';
+type DialogOptions = {
+    closable?: boolean;
+    title?: string | ReactNode;
+    variant?: DialogVariant;
+};
+type CreateDialog = (dialog: DialogComponent, opts?: DialogOptions) => void;
+type DisplayMessage = (message: string | ReactNode, title?: string | ReactNode) => void;
+type DisplayError = (message: string | ReactNode, title?: string | ReactNode) => void;
+declare const DialogContext: react.Context<{
+    createDialog: CreateDialog;
+    displayMessage: DisplayMessage;
+    displayError: DisplayError;
+}>;
+type DialogTitleProps = ComponentPropsWithoutRef<'div'> & {
+    variant?: DialogVariant;
+};
+declare const DialogTitle: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    variant?: DialogVariant;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const DialogButtons: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type DialogProps = DialogOptions & {
+    children: ReactNode;
+    dialogClosed: () => void;
+};
+declare const Dialog: FC<DialogProps>;
+type DialogProviderProps = {
+    children: ReactNode;
+};
+declare const DialogProvider: FC<DialogProviderProps>;
+
+export { Dialog, DialogButtons, type DialogComponent, DialogContext, type DialogProps, DialogProvider, DialogTitle, type DialogTitleProps, type DialogVariant };

package/dist/frontend/dialogs.js

@@ -0,0 +1,17 @@
+import {
+  Dialog,
+  DialogButtons,
+  DialogContext,
+  DialogProvider,
+  DialogTitle
+} from "../chunk-XAK7WC3D.js";
+import "../chunk-BIY5HAXP.js";
+import "../chunk-4PMRDURG.js";
+import "../chunk-H4U4Z4GM.js";
+export {
+  Dialog,
+  DialogButtons,
+  DialogContext,
+  DialogProvider,
+  DialogTitle
+};

package/dist/frontend/input.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _chunkRI33QVODcjs = require('../chunk-RI33QVOD.cjs');
+
+
+
+exports.useLongPressable = _chunkRI33QVODcjs.useLongPressable; exports.usePressable = _chunkRI33QVODcjs.usePressable;

package/dist/frontend/input.d.cts

@@ -0,0 +1,33 @@
+type KeyboardBinding = {
+    key: string;
+    modifiers?: {
+        ctrlOrMetaKey?: boolean;
+        shiftKey?: boolean;
+    };
+};
+type RegisteredBinding = [KeyboardBinding, ...KeyboardBinding[]];
+type PressableOnClickListener = (event: React.MouseEvent<unknown> | React.TouchEvent<unknown>) => unknown;
+declare const usePressable: (click: PressableOnClickListener) => {
+    touching: boolean;
+    handlers: {
+        onClick: React.MouseEventHandler<unknown>;
+        onTouchStart: React.TouchEventHandler<unknown>;
+        onTouchMove: React.TouchEventHandler<unknown>;
+        onTouchEnd: React.TouchEventHandler<unknown>;
+    };
+};
+declare const useLongPressable: ({ onPress, onRelease, }: {
+    onPress: () => unknown;
+    onRelease: () => unknown;
+}) => {
+    touching: boolean;
+    handlers: {
+        onMouseDown: React.MouseEventHandler<unknown>;
+        onMouseUp: React.MouseEventHandler<unknown>;
+        onTouchStart: React.TouchEventHandler<unknown>;
+        onTouchMove: React.TouchEventHandler<unknown>;
+        onTouchEnd: React.TouchEventHandler<unknown>;
+    };
+};
+
+export { type KeyboardBinding, type PressableOnClickListener, type RegisteredBinding, useLongPressable, usePressable };

package/dist/frontend/input.d.ts

@@ -0,0 +1,33 @@
+type KeyboardBinding = {
+    key: string;
+    modifiers?: {
+        ctrlOrMetaKey?: boolean;
+        shiftKey?: boolean;
+    };
+};
+type RegisteredBinding = [KeyboardBinding, ...KeyboardBinding[]];
+type PressableOnClickListener = (event: React.MouseEvent<unknown> | React.TouchEvent<unknown>) => unknown;
+declare const usePressable: (click: PressableOnClickListener) => {
+    touching: boolean;
+    handlers: {
+        onClick: React.MouseEventHandler<unknown>;
+        onTouchStart: React.TouchEventHandler<unknown>;
+        onTouchMove: React.TouchEventHandler<unknown>;
+        onTouchEnd: React.TouchEventHandler<unknown>;
+    };
+};
+declare const useLongPressable: ({ onPress, onRelease, }: {
+    onPress: () => unknown;
+    onRelease: () => unknown;
+}) => {
+    touching: boolean;
+    handlers: {
+        onMouseDown: React.MouseEventHandler<unknown>;
+        onMouseUp: React.MouseEventHandler<unknown>;
+        onTouchStart: React.TouchEventHandler<unknown>;
+        onTouchMove: React.TouchEventHandler<unknown>;
+        onTouchEnd: React.TouchEventHandler<unknown>;
+    };
+};
+
+export { type KeyboardBinding, type PressableOnClickListener, type RegisteredBinding, useLongPressable, usePressable };

package/dist/frontend/input.js

@@ -0,0 +1,8 @@
+import {
+  useLongPressable,
+  usePressable
+} from "../chunk-4PMRDURG.js";
+export {
+  useLongPressable,
+  usePressable
+};

package/dist/frontend/preferences.cjs

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/frontend/preferences.ts
+var _react = require('react');
+var createBrowserPreferencesHook = (def) => () => {
+  const [preferences, setPreference] = _react.useState.call(void 0, () => {
+    const stored = window.localStorage.getItem(def.key);
+    if (stored) {
+      try {
+        return def.zodType.parse(JSON.parse(stored));
+      } catch (err) {
+        console.log("Failed to parse browser settings, using defaults.", err);
+      }
+    }
+    return def.defaultValue;
+  });
+  const updateBrowserPrefs = (change) => {
+    const newValue = JSON.stringify(change(preferences));
+    window.localStorage.setItem(def.key, newValue);
+    window.dispatchEvent(
+      new StorageEvent("storage", {
+        key: def.key,
+        newValue
+      })
+    );
+  };
+  _react.useEffect.call(void 0, () => {
+    const onStorageChange = (event) => {
+      if (event.key === def.key) {
+        const newValue = event.newValue;
+        if (newValue) {
+          try {
+            setPreference(def.zodType.parse(JSON.parse(newValue)));
+          } catch (err) {
+            console.log(
+              "Failed to parse browser settings from storage event, ignoring.",
+              err
+            );
+          }
+        }
+      }
+    };
+    window.addEventListener("storage", onStorageChange);
+    return () => {
+      window.removeEventListener("storage", onStorageChange);
+    };
+  }, []);
+  return {
+    preferences,
+    updateBrowserPrefs,
+    defaultPreferences: def.defaultValue
+  };
+};
+
+
+exports.createBrowserPreferencesHook = createBrowserPreferencesHook;

package/dist/frontend/preferences.d.cts

@@ -0,0 +1,14 @@
+import z from 'zod';
+
+type BrowserPreferencesDefinition<T> = {
+    key: string;
+    zodType: z.ZodType<T>;
+    defaultValue: T;
+};
+declare const createBrowserPreferencesHook: <T>(def: BrowserPreferencesDefinition<T>) => () => {
+    preferences: T;
+    updateBrowserPrefs: (change: (current: T) => T) => void;
+    defaultPreferences: T;
+};
+
+export { type BrowserPreferencesDefinition, createBrowserPreferencesHook };

package/dist/frontend/preferences.d.ts

@@ -0,0 +1,14 @@
+import z from 'zod';
+
+type BrowserPreferencesDefinition<T> = {
+    key: string;
+    zodType: z.ZodType<T>;
+    defaultValue: T;
+};
+declare const createBrowserPreferencesHook: <T>(def: BrowserPreferencesDefinition<T>) => () => {
+    preferences: T;
+    updateBrowserPrefs: (change: (current: T) => T) => void;
+    defaultPreferences: T;
+};
+
+export { type BrowserPreferencesDefinition, createBrowserPreferencesHook };

package/dist/frontend/preferences.js

@@ -0,0 +1,54 @@
+// src/frontend/preferences.ts
+import { useEffect, useState } from "react";
+var createBrowserPreferencesHook = (def) => () => {
+  const [preferences, setPreference] = useState(() => {
+    const stored = window.localStorage.getItem(def.key);
+    if (stored) {
+      try {
+        return def.zodType.parse(JSON.parse(stored));
+      } catch (err) {
+        console.log("Failed to parse browser settings, using defaults.", err);
+      }
+    }
+    return def.defaultValue;
+  });
+  const updateBrowserPrefs = (change) => {
+    const newValue = JSON.stringify(change(preferences));
+    window.localStorage.setItem(def.key, newValue);
+    window.dispatchEvent(
+      new StorageEvent("storage", {
+        key: def.key,
+        newValue
+      })
+    );
+  };
+  useEffect(() => {
+    const onStorageChange = (event) => {
+      if (event.key === def.key) {
+        const newValue = event.newValue;
+        if (newValue) {
+          try {
+            setPreference(def.zodType.parse(JSON.parse(newValue)));
+          } catch (err) {
+            console.log(
+              "Failed to parse browser settings from storage event, ignoring.",
+              err
+            );
+          }
+        }
+      }
+    };
+    window.addEventListener("storage", onStorageChange);
+    return () => {
+      window.removeEventListener("storage", onStorageChange);
+    };
+  }, []);
+  return {
+    preferences,
+    updateBrowserPrefs,
+    defaultPreferences: def.defaultValue
+  };
+};
+export {
+  createBrowserPreferencesHook
+};