tinywidgets 1.1.2 → 1.1.4

package/README.md

@@ -15,6 +15,35 @@ TinyWidgets uses [React](https://react.dev/) for DOM manipulation, [Vanilla-Extr
 
 But, just to be clear - that doesn't mean you need to use Vanilla-Extract, Lucide, or Tinybase in the apps you build with these widgets. You can set arbitrary class names (from Tailwind, for example!) on all components if you like.
 
+## Meet the family
+
+TinyTick is part of a group of small libraries designed to help make rich client and local-first apps easier to build. Check out the others!
+
+<p>
+  <a href='https://tinybase.org' target='_blank'>
+    <img width="48" src="https://tinybase.org/favicon.svg" />
+    <br/>
+    <b>TinyBase</b>
+  </a>
+  <br />The reactive data store for local-first apps.<br />
+</p>
+
+<p>
+    <img width="48" src="https://tinywidgets.org/favicon.svg" />
+    <br/>
+    <b>TinyWidgets</b>
+  <br />A collection of tiny, reusable, UI components.<br />
+</p>
+
+<p>
+  <a href='https://tinytick.org' target='_blank'>
+  <img width="48" src="https://tinytick.org/favicon.svg" />
+  <br />
+  <b>TinyTick</b>
+  </a>
+  <br />A tiny but very useful task orchestrator.<br />
+</p>
+
 ## Help out!
 
 This project was created because [I](https://github.com/jamesgpearce) want to be able to build lots of local-first apps quickly and without the overhead of all the app boilerplate each time.

package/eslint.config.js

@@ -0,0 +1,186 @@
+import jsLint from '@eslint/js';
+import importLint from 'eslint-plugin-import';
+import reactLint from 'eslint-plugin-react';
+import hooksLint from 'eslint-plugin-react-hooks';
+import {globalIgnores} from 'eslint/config';
+import globals from 'globals';
+import tsLint from 'typescript-eslint';
+
+export default tsLint.config(
+  globalIgnores([
+    'eslint.config.js',
+    'docs/**/*',
+    'dist/**/*',
+    'tmp/**/*',
+    'site/extras/*',
+    '**/node_modules/**/*',
+  ]),
+
+  jsLint.configs.recommended,
+  importLint.flatConfigs.recommended,
+  reactLint.configs.flat.recommended,
+  reactLint.configs.flat['jsx-runtime'],
+  hooksLint.configs['recommended-latest'],
+  tsLint.configs.recommended,
+
+  {
+    settings: {
+      react: {version: 'detect'},
+      'import/resolver': {node: {extensions: ['.js', '.jsx', '.ts', '.tsx']}},
+      'import/core-modules': ['expo-sqlite'],
+    },
+
+    languageOptions: {globals: {...globals.node, ...globals.browser}},
+
+    rules: {
+      'no-var': 2,
+      'no-console': 2,
+      'object-curly-spacing': [2, 'never'],
+      indent: 0,
+      'no-empty': [2, {allowEmptyCatch: true}],
+      'linebreak-style': [2, 'unix'],
+      'space-infix-ops': 2,
+      quotes: [2, 'single', {allowTemplateLiterals: true}],
+      semi: [2, 'always'],
+      'sort-keys': 0,
+      'no-multiple-empty-lines': [2, {max: 1}],
+      'sort-imports': 0,
+      'max-len': [
+        2,
+        {
+          code: 80,
+          ignorePattern:
+            '^(\\s+\\* )?(imports?|exports?|\\} from|(.+ as .+))\\W.*',
+          ignoreUrls: true,
+        },
+      ],
+      'comma-dangle': [
+        2,
+        {
+          arrays: 'always-multiline',
+          objects: 'always-multiline',
+          imports: 'always-multiline',
+          exports: 'always-multiline',
+          functions: 'always-multiline',
+        },
+      ],
+      'import/no-unresolved': [
+        2,
+        {
+          ignore: [
+            '^\\./generated/client$',
+            '^custom-remote-handlers$',
+            '^electric-sql/(client/model|notifiers|wa-sqlite)$',
+            '^cloudflare:workers$',
+            'eslint/config',
+            'typescript-eslint',
+          ],
+        },
+      ],
+
+      // --
+
+      '@typescript-eslint/unified-signatures': 0,
+      '@typescript-eslint/no-invalid-void-type': 0,
+      '@typescript-eslint/no-dynamic-delete': 0,
+      '@typescript-eslint/no-var-requires': 0,
+      '@typescript-eslint/no-explicit-any': 0,
+      '@typescript-eslint/no-unused-vars': [
+        2,
+        {argsIgnorePattern: '^_.*', varsIgnorePattern: '^(_.*|React)'},
+      ],
+
+      // --
+
+      'jsx-quotes': [2, 'prefer-double'],
+
+      'react/button-has-type': 0,
+      'react/destructuring-assignment': 0,
+      'react/display-name': 0,
+      'react/forbid-component-props': 0,
+      'react/jsx-boolean-value': 0,
+      'react/jsx-filename-extension': 0,
+      'react/jsx-first-prop-new-line': [2, 'multiline'],
+      'react/jsx-indent-props': [2, 2],
+      'react/jsx-indent': 0,
+      'react/jsx-max-depth': [2, {max: 5}],
+      'react/jsx-max-props-per-line': [2, {maximum: 1, when: 'multiline'}],
+      'react/jsx-newline': 0,
+      'react/jsx-no-literals': 0,
+      'react/jsx-one-expression-per-line': 0,
+      'react/jsx-props-no-spreading': 0,
+      'react/jsx-sort-props': 0,
+      'react/no-arrow-function-lifecycle': 2,
+      'react/no-find-dom-node': 0,
+      'react/no-multi-comp': [2, {ignoreStateless: true}],
+      'react/no-set-state': 0,
+      'react/no-unsafe': 2,
+      'react/prop-types': 2,
+      'react/require-default-props': 0,
+      'react/sort-comp': 0,
+      'react/jsx-handler-names': [
+        2,
+        {eventHandlerPrefix: '_handle', eventHandlerPropPrefix: 'on'},
+      ],
+      'react/function-component-definition': [
+        2,
+        {
+          namedComponents: 'arrow-function',
+          unnamedComponents: 'arrow-function',
+        },
+      ],
+      'react/jsx-no-useless-fragment': 2,
+
+      // --
+
+      'react-hooks/exhaustive-deps': 2,
+      'react-hooks/rules-of-hooks': 2,
+    },
+  },
+
+  {
+    files: ['src/@types/**/*.js'],
+    settings: {jsdoc: {mode: 'typescript', contexts: ['any']}},
+    rules: {
+      'jsdoc/check-tag-names': [
+        2,
+        {definedTags: ['category', 'packageDocumentation']},
+      ],
+      'jsdoc/no-restricted-syntax': [
+        2,
+        {
+          contexts: [
+            {
+              comment:
+                // eslint-disable-next-line max-len
+                'JsdocBlock:not(:has(JsdocTag[tag=/category|packageDocumentation/]))',
+              message: 'Every non-module block requires a @category tag',
+            },
+            {
+              comment: 'JsdocBlock:not(:has(JsdocTag[tag=since]))',
+              message: 'Every block requires a @since tag',
+            },
+            {
+              comment:
+                'JsdocBlock:has(JsdocTag[tag=since] ~ JsdocTag[tag=since])',
+              message: 'Every block must have only one @since tag',
+            },
+          ],
+        },
+      ],
+      'jsdoc/require-jsdoc': 2,
+      'jsdoc/require-description': 2,
+      'jsdoc/require-description-complete-sentence': 2,
+      'jsdoc/require-returns-description': 2,
+      'jsdoc/no-blank-blocks': 2,
+      'jsdoc/require-param-type': 0,
+      'jsdoc/require-returns-type': 0,
+      'jsdoc/check-param-names': 0,
+    },
+  },
+
+  {
+    files: ['eslint.config.js'],
+    extends: [tsLint.configs.disableTypeChecked],
+  },
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",
@@ -16,31 +16,31 @@
   ],
   "type": "module",
   "scripts": {
-    "prePublishPackage": "eslint . && cspell --quiet . && tsc && cp ../README.md ./README.md"
+    "prePublishPackage": "prettier -l . && eslint . && cspell --quiet . && tsc && cp ../README.md ./README.md"
   },
   "devDependencies": {
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
-    "cspell": "^8.16.1",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "prettier": "^3.4.2",
-    "typescript": "^5.7.2"
+    "@types/react": "^19.0.12",
+    "cspell": "^8.18.1",
+    "eslint": "^9.23.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2"
   },
   "exports": {
     ".": "./src/index.ts",
     "./css": "./src/index.css.ts"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.16.1",
-    "lucide-react": "^0.468.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tinybase": "^5.4.2"
+    "@eslint/js": "^9.23.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@vanilla-extract/css": "^1.17.1",
+    "eslint-plugin-import": "^2.31.0",
+    "globals": "^16.0.0",
+    "lucide-react": "^0.485.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tinybase": "^6.0.0",
+    "typescript-eslint": "^8.28.0"
   }
-}
+}

package/src/common/functions.tsx

@@ -1,6 +1,6 @@
-import React, {type ComponentType, type ReactNode} from 'react';
-import type {StyleRule} from '@vanilla-extract/css';
 import {screens} from '../css/screens';
+import type {StyleRule} from '@vanilla-extract/css';
+import React, {type ComponentType, type ReactNode} from 'react';
 
 /**
  * The `classNames` function returns a concatenated list of class names,

package/src/components/App/index.css.ts

@@ -1,6 +1,6 @@
-import {dimensions, dimensionsClass} from '../../css/dimensions.css.ts';
-import {colors} from '../../css/colors.css.ts';
 import {large} from '../../common/functions.tsx';
+import {colors} from '../../css/colors.css.ts';
+import {dimensions, dimensionsClass} from '../../css/dimensions.css.ts';
 import {style} from '@vanilla-extract/css';
 
 export const app = style([dimensionsClass, {color: colors.foreground}]);

package/src/components/App/index.tsx

@@ -1,5 +1,6 @@
-import * as UiReact from 'tinybase/ui-react/with-schemas';
-import type {ComponentType, ReactNode} from 'react';
+import {classNames, renderComponentOrNode} from '../../common/functions.tsx';
+import {codeDark, codeLight} from '../../css/code.css.ts';
+import {colorsDark, colorsLight} from '../../css/colors.css.ts';
 import {
   LocalStore,
   useDark,
@@ -7,7 +8,6 @@ import {
   useLocalStoreIsReady,
   useToggleDarkChoiceCallback,
 } from '../../stores/LocalStore.tsx';
-import {Menu, Moon, Sun, SunMoon, X} from 'lucide-react';
 import {RouteStore, useRouteStoreIsReady} from '../../stores/RouteStore.tsx';
 import {
   SessionStore,
@@ -15,6 +15,7 @@ import {
   useSideNavIsOpen,
   useToggleSideNavIsOpenCallback,
 } from '../../stores/SessionStore.tsx';
+import {Button} from '../Button/index.tsx';
 import {
   app,
   appLayout,
@@ -27,12 +28,11 @@ import {
   title,
   topNav,
 } from './index.css.ts';
-import {classNames, renderComponentOrNode} from '../../common/functions.tsx';
-import {codeDark, codeLight} from '../../css/code.css.ts';
-import {colorsDark, colorsLight} from '../../css/colors.css.ts';
-import {Button} from '../Button/index.tsx';
-import {OptionalSchemas} from 'tinybase/with-schemas';
+import {Menu, Moon, Sun, SunMoon, X} from 'lucide-react';
+import type {ComponentType, ReactNode} from 'react';
 import React from 'react';
+import * as UiReact from 'tinybase/ui-react/with-schemas';
+import type {OptionalSchemas} from 'tinybase/with-schemas';
 
 const {Provider} = UiReact as UiReact.WithSchemas<OptionalSchemas>;
 

package/src/components/Button/index.css.ts

@@ -1,6 +1,6 @@
-import {style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
+import {style, styleVariants} from '@vanilla-extract/css';
 
 export const button = style({
   display: 'inline-flex',

package/src/components/Button/index.tsx

@@ -1,5 +1,5 @@
-import type {ComponentType, ReactNode, Ref} from 'react';
-import React, {forwardRef, useCallback} from 'react';
+import {classNames, renderComponentOrNode} from '../../common/functions.tsx';
+import {iconSize} from '../../css/dimensions.css.ts';
 import {
   button,
   buttonVariants,
@@ -7,8 +7,8 @@ import {
   titleStyle,
   titleStyleRight,
 } from './index.css.ts';
-import {classNames, renderComponentOrNode} from '../../common/functions.tsx';
-import {iconSize} from '../../css/dimensions.css.ts';
+import type {ComponentType, ReactNode, Ref} from 'react';
+import React, {forwardRef, useCallback} from 'react';
 
 /**
  * The `Button` component displays an button, with a number of common variants.

package/src/components/Card/index.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import type {ReactNode} from 'react';
-import {card} from './index.css';
 import {classNames} from '../../common/functions';
+import {card} from './index.css';
+import type {ReactNode} from 'react';
+import React from 'react';
 
 /**
  * The `Card` component displays a simple rectangular container.

package/src/components/Code/index.css.ts

@@ -1,7 +1,7 @@
-import {globalStyle, style} from '@vanilla-extract/css';
 import {code} from '../../css/code.css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
+import {globalStyle, style} from '@vanilla-extract/css';
 
 export const pre = style({
   padding: dimensions.padding,

package/src/components/Code/index.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable max-len */
-import React from 'react';
 import {classNames} from '../../common/functions.tsx';
 import {pre} from './index.css.ts';
+import React from 'react';
 
 /**
  * The `Code` component displays a block of pre-formatted code, and uses PrismJS
@@ -81,11 +80,10 @@ export const Code = ({
    */
   readonly className?: string;
 }) => {
-  const prism = globalThis.Prism;
+  const prism = (globalThis as any).Prism;
   return (
     <pre className={classNames(pre, className)}>
       <code
-        // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{
           __html: (prism
             ? prism.highlight(code, prism.languages?.[language], language)

package/src/components/Collapsible/index.tsx

@@ -1,6 +1,9 @@
-import {ChevronDown, ChevronRight} from 'lucide-react';
-import type {ComponentType, ReactNode} from 'react';
-import React, {useCallback, useRef, useState} from 'react';
+import {classNames} from '../../common/functions.tsx';
+import {
+  useCollapsibleIsOpen,
+  useSetCollapsibleIsOpenCallback,
+} from '../../stores/SessionStore.tsx';
+import {Button} from '../Button/index.tsx';
 import {
   button,
   buttonOpen,
@@ -8,12 +11,9 @@ import {
   collapsibleOpen,
   content,
 } from './index.css.ts';
-import {
-  useCollapsibleIsOpen,
-  useSetCollapsibleIsOpenCallback,
-} from '../../stores/SessionStore.tsx';
-import {Button} from '../Button/index.tsx';
-import {classNames} from '../../common/functions.tsx';
+import {ChevronDown, ChevronRight} from 'lucide-react';
+import type {ComponentType, ReactNode} from 'react';
+import React, {useCallback, useRef, useState} from 'react';
 
 /**
  * The `Collapsible` component displays a titled box that can be expanded or
@@ -105,7 +105,7 @@ export const Collapsible = ({
   const setIsOpen = id ? setStoredIsOpen : setStateIsOpen;
 
   const [render, setRender] = useState(isOpen);
-  const timer = useRef<ReturnType<typeof setTimeout>>();
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   const toggle = useCallback(() => {
     setIsOpen(!isOpen);

package/src/components/Detail/index.tsx

@@ -1,7 +1,7 @@
+import {classNames} from '../../common/functions';
 import {detailCell, detailRow, detailTable} from './index.css';
-import React from 'react';
 import type {ReactNode} from 'react';
-import {classNames} from '../../common/functions';
+import React from 'react';
 
 /**
  * The `Detail` component displays a set of key-value pairs in a two-column

package/src/components/Hr/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import {classNames} from '../../common/functions';
 import {hr} from './index.css';
+import React from 'react';
 
 /**
  * The `Hr` component displays a styled horizontal rule.
@@ -21,6 +21,4 @@ export const Hr = ({
    * An extra CSS class name for the component.
    */
   readonly className?: string;
-}) => {
-  return <hr className={classNames(hr, className)} />;
-};
+}) => <hr className={classNames(hr, className)} />;

package/src/components/Image/index.css.ts

@@ -1,6 +1,6 @@
-import {style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
+import {style, styleVariants} from '@vanilla-extract/css';
 
 export const image = style({
   display: 'inline-block',

package/src/components/Image/index.tsx

@@ -1,6 +1,6 @@
-import React, {useCallback} from 'react';
-import {clickable, image, imageVariants} from './index.css.ts';
 import {classNames} from '../../common/functions.tsx';
+import {clickable, image, imageVariants} from './index.css.ts';
+import React, {useCallback} from 'react';
 
 /**
  * The `Image` component displays an image, with a number of common variants.

package/src/components/Metric/index.tsx

@@ -1,8 +1,8 @@
-import type {ComponentType, ReactNode} from 'react';
 import {classNames, renderComponentOrNode} from '../../common/functions';
+import {iconSize} from '../../css/dimensions.css';
 import {metric, metricLabel, metricNumber} from './index.css';
+import type {ComponentType, ReactNode} from 'react';
 import React from 'react';
-import {iconSize} from '../../css/dimensions.css';
 
 /**
  * The `Metric` component displays a metric as a prominent numerical value with

package/src/components/Row/index.css.ts

@@ -1,6 +1,6 @@
-import {style, styleVariants} from '@vanilla-extract/css';
-import {dimensions} from '../../css/dimensions.css.ts';
 import {notLarge} from '../../common/functions.tsx';
+import {dimensions} from '../../css/dimensions.css.ts';
+import {style, styleVariants} from '@vanilla-extract/css';
 
 export const row = style({
   display: 'grid',

package/src/components/Row/index.tsx

@@ -1,7 +1,7 @@
+import {classNames} from '../../common/functions';
 import {row, rowVariants} from './index.css';
-import React from 'react';
 import type {ReactNode} from 'react';
-import {classNames} from '../../common/functions';
+import React from 'react';
 
 /**
  * The `Row` component displays a row of 'cell' components, with a number of

package/src/components/Summary/index.css.ts

@@ -1,5 +1,5 @@
-import {dimensions} from '../../css/dimensions.css.ts';
 import {notLarge} from '../../common/functions.tsx';
+import {dimensions} from '../../css/dimensions.css.ts';
 import {style} from '@vanilla-extract/css';
 
 export const summary = style({

package/src/components/Summary/index.tsx

@@ -1,8 +1,8 @@
-import type {ComponentType, ReactNode} from 'react';
-import {image, summary} from './index.css';
+import {classNames} from '../../common/functions';
 import {Image} from '../Image';
+import {image, summary} from './index.css';
+import type {ComponentType, ReactNode} from 'react';
 import React from 'react';
-import {classNames} from '../../common/functions';
 
 /**
  * The `Summary` component displays an image on the left, and other content

package/src/components/Tag/index.css.ts

@@ -1,5 +1,5 @@
-import {style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
+import {style, styleVariants} from '@vanilla-extract/css';
 
 export const tag = style({
   display: 'flex',

package/src/components/Tag/index.tsx

@@ -1,6 +1,6 @@
-import type {ComponentType, ReactNode} from 'react';
 import {classNames, renderComponentOrNode} from '../../common/functions';
 import {tag, tagIcon, tagVariants} from './index.css';
+import type {ComponentType, ReactNode} from 'react';
 import React from 'react';
 
 /**

package/src/components/TasksProvider/index.tsx

@@ -1,9 +1,3 @@
-import * as UiReact from 'tinybase/ui-react/with-schemas';
-import {
-  Id,
-  Store as StoreWithSchemas,
-  createStore,
-} from 'tinybase/with-schemas';
 import React, {
   ReactNode,
   createContext,
@@ -12,14 +6,17 @@ import React, {
   useEffect,
   useRef,
 } from 'react';
+import type {Store} from 'tinybase';
+import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';
+import type {Persister} from 'tinybase/persisters/with-schemas';
 import {
   Provider as UiReactProvider,
   useStore,
   useStores,
 } from 'tinybase/ui-react';
-import {Persister} from 'tinybase/persisters/with-schemas';
-import {Store} from 'tinybase';
-import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';
+import * as UiReact from 'tinybase/ui-react/with-schemas';
+import type {Id, Store as StoreWithSchemas} from 'tinybase/with-schemas';
+import {createStore} from 'tinybase/with-schemas';
 
 export type Task =
   | ((
@@ -261,7 +258,7 @@ export const TasksProvider = ({
   const pendingAddedJobs = useRef<
     [taskId: string, arg?: string, storeId?: string][]
   >([]);
-  const activePersister = useRef<Persister<Schemas> | undefined>();
+  const activePersister = useRef<Persister<Schemas> | undefined>(undefined);
 
   const tasksStore = useCreateStore(() =>
     createStore().setSchema(TABLES_SCHEMA, VALUES_SCHEMA),

package/src/css/code.css.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import {createTheme, createThemeContract} from '@vanilla-extract/css';
 
 /**

package/src/css/global.css.ts

@@ -1,5 +1,5 @@
-import {globalStyle} from '@vanilla-extract/css';
 import {small} from '../common/functions';
+import {globalStyle} from '@vanilla-extract/css';
 
 globalStyle('*', {
   margin: 0,

package/src/stores/LocalStore.tsx

@@ -1,8 +1,8 @@
-import * as UiReact from 'tinybase/ui-react/with-schemas';
 import {CHANGE, READY, READY_SCHEMA} from './common';
-import {type NoTablesSchema, createStore} from 'tinybase/with-schemas';
 import {useCallback, useEffect} from 'react';
 import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';
+import * as UiReact from 'tinybase/ui-react/with-schemas';
+import {type NoTablesSchema, createStore} from 'tinybase/with-schemas';
 
 const PREFERS_DARK = matchMedia?.('(prefers-color-scheme: dark)');
 

package/src/stores/RouteStore.tsx

@@ -1,7 +1,7 @@
-import * as UiReact from 'tinybase/ui-react/with-schemas';
-import {type NoTablesSchema, createStore} from 'tinybase/with-schemas';
 import {READY, READY_SCHEMA} from './common';
 import {createCustomPersister} from 'tinybase/persisters/with-schemas';
+import * as UiReact from 'tinybase/ui-react/with-schemas';
+import {type NoTablesSchema, createStore} from 'tinybase/with-schemas';
 
 const ROUTE_STORE = 'tinywidgets/Route';
 const ROUTE = 'route';

package/src/stores/SessionStore.tsx

@@ -1,6 +1,6 @@
-import * as UiReact from 'tinybase/ui-react/with-schemas';
 import {READY, READY_SCHEMA} from './common';
 import {createSessionPersister} from 'tinybase/persisters/persister-browser/with-schemas';
+import * as UiReact from 'tinybase/ui-react/with-schemas';
 import {createStore} from 'tinybase/with-schemas';
 
 const SESSION_STORE = 'tinywidgets/Session';

package/.eslintrc.json

@@ -1,92 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react", "react-hooks", "react-refresh"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/all",
-    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
-  "env": {"browser": true, "es6": true, "node": true},
-  "globals": {"page": true, "browser": true, "context": true},
-  "parserOptions": {
-    "ecmaVersion": 7,
-    "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
-      "globalReturn": true,
-      "jsx": true
-    },
-    "sourceType": "module"
-  },
-  "settings": {"react": {"version": "18.3.0"}},
-  "rules": {
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/no-var-requires": 0,
-    "@typescript-eslint/no-unused-vars": [
-      2,
-      {"argsIgnorePattern": "^_.*", "varsIgnorePattern": "^_.*"}
-    ],
-    "max-len": [2, {"code": 80, "ignorePattern": "^(im|ex)ports?\\W.*"}],
-    "no-var": 2,
-    "no-console": 2,
-    "object-curly-spacing": [2, "never"],
-    "comma-dangle": [
-      2,
-      {
-        "arrays": "always-multiline",
-        "objects": "always-multiline",
-        "imports": "always-multiline",
-        "exports": "always-multiline",
-        "functions": "always-multiline"
-      }
-    ],
-    "indent": 0,
-    "no-empty": [2, {"allowEmptyCatch": true}],
-    "linebreak-style": [2, "unix"],
-    "space-infix-ops": 2,
-    "quotes": [2, "single", {"allowTemplateLiterals": true}],
-    "semi": [2, "always"],
-    "sort-keys": 0,
-    "sort-imports": 2,
-    "no-multiple-empty-lines": [2, {"max": 1}],
-    "react/function-component-definition": [
-      2,
-      {
-        "namedComponents": "arrow-function",
-        "unnamedComponents": "arrow-function"
-      }
-    ],
-    "react/no-multi-comp": [2, {"ignoreStateless": true}],
-    "react/no-find-dom-node": 0,
-    "react/no-set-state": 0,
-    "react/no-unsafe": 2,
-    "jsx-quotes": [2, "prefer-double"],
-    "react-hooks/exhaustive-deps": 2,
-    "react-hooks/rules-of-hooks": 2,
-    "react/destructuring-assignment": 0,
-    "react/display-name": 0,
-    "react/jsx-boolean-value": 0,
-    "react/jsx-filename-extension": 0,
-    "react/jsx-first-prop-new-line": [2, "multiline"],
-    "react/jsx-handler-names": [
-      2,
-      {"eventHandlerPrefix": "_handle", "eventHandlerPropPrefix": "on"}
-    ],
-    "react/jsx-indent": 0,
-    "react/jsx-indent-props": [2, 2],
-    "react/jsx-max-depth": [2, {"max": 5}],
-    "react/jsx-max-props-per-line": [2, {"maximum": 1, "when": "multiline"}],
-    "react/jsx-newline": 0,
-    "react/jsx-no-literals": 0,
-    "react/jsx-one-expression-per-line": 0,
-    "react/jsx-props-no-spreading": 0,
-    "react/jsx-sort-props": 0,
-    "react/require-default-props": 0,
-    "react/sort-comp": 0,
-    "react/forbid-component-props": 0,
-    "react/button-has-type": 0,
-    "react/no-array-index-key": 0
-  }
-}