open-index/open-npm huggingface dataset:
npm package: @focus4/collections
Description: Focus v4, collections module
Author: damien.frikha@kleegroup.com
Latest version: 12.10.5

# `@focus4/collections`

[![npm version](https://badge.fury.io/js/@focus4%2Fcollections.svg)](https://badge.fury.io/js/@focus4%2Fcollections)

Module contenant les composants de listes et de recherche avancée, potentiellement basés sur les stores du module `store`.
npm package: @focus4/core
Description: Focus v4, core module
Author: damien.frikha@kleegroup.com
Latest version: 12.10.5

# `@focus4/core`

[![npm version](https://badge.fury.io/js/@focus4%2Fcore.svg)](https://badge.fury.io/js/@focus4%2Fcore)

Module contenant les fonctionnalités de base de Focus :

- Gestion des requêtes
- Gestion des traductions
- Router
npm package: @focus4/entities
Description: Focus v4, entities module
Author: damien.frikha@kleegroup.com
Latest version: 12.10.0

# `@focus4/entities`

[![npm version](https://badge.fury.io/js/@focus4%2Fentities.svg)](https://badge.fury.io/js/@focus4%2Fentities)

Module contenant les utilitaires pour définir des entités métier. Ne contient pas de dépendances au reste de Focus
npm package: @focus4/form-toolbox
Description: Focus v4, form-toolbox module
Author: damien.frikha@kleegroup.com
Latest version: 12.10.5

# `@focus4/form-toolbox`

[![npm version](https://badge.fury.io/js/@focus4%2Fform-toolbox.svg)](https://badge.fury.io/js/@focus4%2Fform-toolbox)

Module contenant les composants de formulaires par défaut, basés sur le module `toolbox`.
npm package: @focus4/forms
Description: Focus v4, forms module
Author: damien.frikha@kleegroup.com
Latest version: 12.10.5

# `@focus4/forms`

[![npm version](https://badge.fury.io/js/@focus4%2Fforms.svg)](https://badge.fury.io/js/@focus4%2Fforms)

Module contenant les composants et utilitaires de base pour créer des forumlaires React, basées sur les stores du module `store`.
npm package: @focus4/layout
Description: Focus v4, layout module
Author: damien.frikha@kleegroup.com
Latest version: 12.10.5

# `@focus4/layout`

[![npm version](https://badge.fury.io/js/@focus4%2Flayout.svg)](https://badge.fury.io/js/@focus4%2Flayout)

Module contenant les composants de mise en page.
npm package: @focus4/stores
Description: Focus v4, stores module
Author: damien.frikha@kleegroup.com
Latest version: 12.10.5

# `@focus4/stores`

[![npm version](https://badge.fury.io/js/@focus4%2Fstores.svg)](https://badge.fury.io/js/@focus4%2Fstores)

Module contenant la gestion des stores de formulaires, de collections et de référence.
npm package: @focus4/styling
Description: Focus v4, styling module
Author: damien.frikha@kleegroup.com
Latest version: 12.10.0

# `@focus4/styling`

[![npm version](https://badge.fury.io/js/@focus4%2Fstyling.svg)](https://badge.fury.io/js/@focus4%2Fstyling)

Module contenant le système de CSS utilisé par les composants de Focus.
npm package: @focus4/tooling
Description: Focus v4, tooling module
Author: damien.frikha@kleegroup.com
Latest version: 12.10.0

# `@focus4/tooling`

[![npm version](https://badge.fury.io/js/@focus4%2Ftooling.svg)](https://badge.fury.io/js/@focus4%2Ftooling)

Le module `@focus4/tooling` est lui aussi un méta-package qui contient l'ensemble des outils nécessaires pour packager une application Focus.
En particulier, il inclut [Vite](https://vitejs.dev) et [Oxlint](https://oxc.rs/docs/guide/usage/linter.html) et des configs par défaut à étendre pour ces outils.

De plus, il contient l'outil de génération de types CSS ainsi qu'un utilitaire pour faciliter l'installation et les montées de versions des modules de Focus.
Cet outil s'utilise via la commande `npx focus4 install` ou `npx focus4 update` (les deux commandes sont identiques), et parcourera votre
`package.json` pour récupérer la version la plus récente de chaque module Focus et de ses peer dependencies (React et MobX).
npm package: @focus8/expo-intent-broadcaster
Description: Expo module for broadcasting intents to other apps on Android.
Author: Focus8 AS
Latest version: 0.1.0

# expo-intent-broadcaster

A module for sending intent broadcast on Android devices

# API documentation

- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/intent-broadcaster/)
- [Documentation for the main branch](https://docs.expo.dev/versions/unversioned/sdk/intent-broadcaster/)

# Installation in managed Expo projects

For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects &mdash; it is likely to be included in an upcoming Expo SDK release.

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.

### Add the package to your npm dependencies

```
npm install expo-intent-broadcaster
```

### Configure for Android

# Contributing

Contributions are very welcome! Please refer to guidelines described in the [contributing guide](https://github.com/expo/expo#contributing).
npm package: @focusd/api
Description: Focusd API client library
Author: Focusd Team
Latest version: 1.0.8

# @focusd/api

Focusd API client library with protobuf definitions and TypeScript types.

## Installation

```bash
npm install @focusd/api
```

## Usage

### TypeScript/JavaScript - Import custom types

```typescript
import { Session, Application, Classification, AuthProvider } from '@focusd/api';

// Create a session
const session: Session = {
  name: "Work Session",
  duration: { seconds: 3600, nanos: 0 },
  started_at: { seconds: Date.now() / 1000, nanos: 0 }
};

// Create an application
const app: Application = {
  name: "VS Code",
  title: "Visual Studio Code",
  bundle_id: "com.microsoft.VSCode",
  url: "file:///path/to/project",
  classification: Classification.CLASSIFICATION_PRODUCTIVITY,
  categories: ["development", "coding"]
};
```

### Import protobuf-generated types (advanced)

```javascript
// API types only
import { AskLLMRequest, AskLLMResponse } from '@focusd/api/api';

// Engine types only  
import { Session, Application, EngineService } from '@focusd/api/engine';
```

## Available Types

### Custom TypeScript Types
- `Session` - Focus session with optional id, timestamps, and duration
- `Application` - Application information with classification and categories
- `Classification` - Application classification enum (NEUTRAL, PRODUCTIVITY, DISTRUCTION)
- `AuthProvider` - Authentication provider enum (GITHUB, GOOGLE, APPLE)
- `FocusStartRequest` - Start focus session request
- `FocusStartResponse` - Start focus session response
- `FocusCheckRequest` - Check focus status request
- `FocusCheckResponse` - Check focus status response
- `FocusStatusResponse` - Focus status response
- `AuthStartRequest` - Start auth request
- `AuthRedirectURLRequest` - Auth redirect request
- `AuthRedirectURLResponse` - Auth redirect response

### Protobuf-Generated Types (Advanced)
- `AskLLMRequest` - Request for LLM queries
- `AskLLMResponse` - Response from LLM queries
- `AuthRedirectURLRequest` - Authentication redirect request
- `AuthRedirectURLResponse` - Authentication redirect response
- `LLMProviderType` - LLM provider type enum
- `APIService` - API service definition
- `EngineService` - Engine service definition
npm package: @focusinlab/ratio
Description: Hook and HOC component to keep scale of components.
Author: focus-in-lab
Latest version: 1.0.2

# ratio

> Hook and HOC component to keep scale of components.

[![NPM](https://img.shields.io/npm/v/ratio.svg)](https://www.npmjs.com/package/ratio) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @focusinlab/ratio
```

## Usage

```jsx
import React, { Component } from 'react'

import withRatio from 'ratio'

const MyDivA = () => <div>Div 1</div>
const DivWithRatioA = withRatio({ ratio: '1x1', className: 'mydiv' })(MyDivA)

class Example extends Component {
  render() {
    return <DivWithRatioA />
  }
}
```

## License

MIT © [focus-in-lab](https://github.com/focus-in-lab)
npm package: @focusinlab/react-hoc-withratio
Description: React HOC to maintain ratio aspect in components using react-hook-useratio
Author: focus-in-lab
Latest version: 1.0.0

# @focusinlab/react-hoc-withratio

> React HOC to maintain ratio aspect in components using react-hook-useratio

[![NPM](https://img.shields.io/npm/v/@focusinlab/react-hoc-withratio.svg)](https://www.npmjs.com/package/@focusinlab/react-hoc-withratio) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @focusinlab/react-hoc-withratio
```

## Usage

```tsx
import React, { Ref } from 'react'
import styled, { css } from 'styled-components'
import { withRatio } from '@focusinlab/react-hoc-withratio'

const StyledTopic = styled.span`
  color: #282c34;
`
const StyledHeader = styled.span`
  color: cornflowerblue;
`
const StyledBaseTile = css`
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-direction: column;
`
const StyledDivTile = styled.div`
  ${StyledBaseTile};
  cursor: pointer;
`

interface ICodeTileProps {
  header: string
  topic: string
  ratio?: string
}

const CodeTile = React.forwardRef(
  ({ header, topic, ...rest }: ICodeTileProps, ref) => {
    return (
      <StyledDivTile {...rest} ref={ref as Ref<any>}>
        <StyledHeader>{header}</StyledHeader>
        <StyledTopic>{topic}</StyledTopic>
      </StyledDivTile>
    )
  }
)

const App = () => {
  const CodeWithRatio2x1 = withRatio(CodeTile)
  const CodeWithRatio1x1 = withRatio(CodeTile)
  return (
    <div>
      <CodeWithRatio2x1 ratio='2x1' header='header 2x1' topic='topic 2x1' />
      <CodeWithRatio1x1 header='header 1x1' topic='topic 1x1' />
      <CodeTile header='code tile header' topic='topic content' />
    </div>
  )
}

export default App

```

## License

MIT © [focus-in-lab](https://github.com/focus-in-lab)
npm package: @focusinlab/react-hook-useratio
Description: Custom hook to calculate aspect and assign height.
Author: focus-in-lab
Latest version: 1.0.1

# useratio

> Custom React hook to calculate aspect and assign height.

[![NPM](https://img.shields.io/npm/v/@focusinlab/react-hook-useratio.svg)](https://www.npmjs.com/package/@focusinlab/react-hook-useratio) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @focusinlab/react-hook-useratio
```

## Usage

```jsx
import * as React from 'react'

import { useRatio } from '@focusinlab/react-hook-useratio'

const Example = ({ children }) => {
  const ref = useRef(null)
  const { height } = useRatio(1, 1, ref)
  useEffect(() => {
    if (ref.current) {
      ref.current.style.height = height + 'px'
    }
  }, [height, ref])

  return (
    <div
      ref={ref}
      onClick={() => console.log('clicked!')}
      style={{
        color: '#333',
        display: 'flex',
        boxSizing: 'border-box',
        alignItems: 'center',
        justifyContent: 'center',
        appearance: 'button',
        width: '100%'
      }}
    >
      {children}
    </div>
  )
}
```

## License

MIT © [focus-in-lab](https://github.com/focus-in-lab)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @focusinlab/tile
Description: Customizable aspect ratio component
Author: focus-in-lab
Latest version: 3.0.0

# tile

> Tile customizable basic component

[![NPM](https://img.shields.io/npm/v/@focusinlab/tile.svg)](https://www.npmjs.com/package/@focusinlab/tile) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @focusinlab/tile
```

## Props:

| Attribute  | Required | Type                                         | Default |
| ---------- | -------- | -------------------------------------------- | ------- |
| children   | Yes      | React Element | string                       |         |
| as         | No       | String                                       | div     |
| ratio      | No       | "cube","cubeDouble", "cubeFull", "rectangle" | "cube"  |

## Usage

```javascript

const BlueTile = () => {
  return (
    <Tile
      ratio='cube'
      data-test-id="my-blue-tile"
    >
      <label className="foo">click me</label>
    </Tile>
  )
}
```

Creating an "anchor" box

```javascript
const ClickableTile = () => {
  return (
    <Tile
      ratio='cube'
      type='a'
      onClick={clickHandler}
      data-test-id="my-clickable-tile"
    >
      <label className="foo">click me</label>
    </Tile>
  )
}
```

## License

MIT © [focus-in-lab](https://github.com/focus-in-lab)
npm package: @focuson-nw/cod
Description: A command line tool to help with the code on demand
Latest version: 2.0.37

# Code on Demand CLI

This is a cli tool to help with the [Code On Demand project](https://www.npmjs.com/package/@focuson-nw/codeondemand). 
It transpiles normal react components suitable for use as code on demand components

# Installing
```shell
npm i --global  @focuson-nw/cod
```

To validate it worked: the following should give a 'usage message'
```shell
cod
```

# Commands
Currently there is only `cod build`

## cod build

```shell
Options:
  -src, --source <source>             directory having components to build (default: "src/render")
  -dsrc, --datasource <datasource>    directory having JSON data (default: "src/json")
  -dest, --destination <destination>  directory for saving files after build (default: "public/created")
  -d, --debug                         If specified some commands output more information about how they are working
                                      (default: false)
  -f, --force                         To create destination directory if not found
```
* The components to be transpiled should be in the `--source` directory.
* Any json files that will be used to load and display the componets are in the `--datasource` directory
* The created files are put in the `--destination directory`

## json syntax

If you have a file in src/render called 'Game.tsx' then the following will be replaced by the correct details for the Game component
```json
{
  "_links":  {
    "game1": {"href": "created/gameJson1.json"}
  },
  "_render": {"_self": "#Game/render#"}
}
```
npm package: @focuson-nw/forms
Description: Allows us to define data that is stored in a database, or perhaps an api
Latest version: 2.0.37

# @focuson-nw/forms

* [Release notes](https://github.com/focuson-ts/focuson/blob/master/RELEASES.md)
* [A cookbook of 'howtos' Cookbook](cookbooks/index.md)
* [Example code](https://github.com/focuson-ts/focuson/tree/master/modules/forms/src/example)
* [Training materials - ppt](https://docs.google.com/presentation/d/e/2PACX-1vQaJOECJbjQZynmzieigICB_6GAgz8E_BaVzLwnnfmzunhyXcVADL1cHNKs3COjVmoM9eQmejy0y27b/pub?start=false&loop=false&delayms=3000)
* [Training materials - git](https://github.com/focuson-ts/training)

## Summary
This is a 'low code' mechanism for generating the apis and the react components for a website from a declarative representation.
Unlike most low code solutions it does not rely on a gui, but instead uses a text based representation leveraging 
the existing skills of developers with text based tools such as their IDE and version control systems

It is mostly suited for things like 'Forms'. So simple crud, displaying status, maintenance screens and so on. It is unsuited 
for sexy customer facing guis: much more business to employee.

The tools that are easily to use in making guis are:
* Easy access to any data source
  * clever data source 'stiching' (so some data from one source, another elsewhere)
* Validation
* Messaging to user (apis report issues, middle tier issues...etc). A simple and robust (suitable for B<=>E not B<=>C) mechanism for such issues
* Retreiving and modifying data in a database. 
* The Auto generated React gui uses the restful api
* Simple pages and model pages are both straightforwards

Importantly it is entirely data driven and extensible by injection of code. There is no  'make a skeleton and edit'.
npm package: @focuson-nw/lenstest
Description: Tests the lens defined in @focuson-nw/lens, the state defined in @focuson-nw/state, and the fetchers in @focuson-nw/fetcher
Latest version: 2.0.37

This project holds the tests for

* [@focuson-nw/lens: Easy - perhaps even beautiful - code for editing deep immutable objects](modules/lens/README.md)
* [@focuson-nw/state: State management for projects (including React) using the lens in the above project](modules/state/README.md)
 
They have been moved here to keep the main projects small
npm package: @focuson-nw/rest
Description: This allows for declarative 'rest actions'. Get/Update/Create... 
Latest version: 2.0.37

# @focuson-nw/rest

Higher level libraries in @focuson need to communicate with the backend. This provides the mechanisms to get 'restful' 
access to them. Specifically the low level code to process `RestCommands`


## RestCommand

To assist debugging, logging and testing (and simplify code) we separate end point access into 'what do I want to do' 
(restCommands) from 'how do I want to do it'. This allows us to process the rest commands in many ways

## State and RestCommands

If in the state we place a list of rest of commands then the `rest()` function will process those commands.
npm package: @focuson/cod
Description: A command line tool to help with the code on demand
Latest version: 1.44.1

# Code on Demand CLI

This is a cli tool to help with the [Code On Demand project](https://www.npmjs.com/package/@focuson/codeondemand). 
It transpiles normal react components suitable for use as code on demand components

# Installing
```shell
npm i --global  @focuson/cod
```

To validate it worked: the following should give a 'usage message'
```shell
cod
```

# Commands
Currently there is only `cod build`

## cod build

```shell
Options:
  -src, --source <source>             directory having components to build (default: "src/render")
  -dsrc, --datasource <datasource>    directory having JSON data (default: "src/json")
  -dest, --destination <destination>  directory for saving files after build (default: "public/created")
  -d, --debug                         If specified some commands output more information about how they are working
                                      (default: false)
  -f, --force                         To create destination directory if not found
```
* The components to be transpiled should be in the `--source` directory.
* Any json files that will be used to load and display the componets are in the `--datasource` directory
* The created files are put in the `--destination directory`

## json syntax

If you have a file in src/render called 'Game.tsx' then the following will be replaced by the correct details for the Game component
```json
{
  "_links":  {
    "game1": {"href": "created/gameJson1.json"}
  },
  "_render": {"_self": "#Game/render#"}
}
```
npm package: @focuson/forms
Description: Allows us to define data that is stored in a database, or perhaps an api
Latest version: 1.44.3

# @focuson/forms

* [Release notes](https://github.com/focuson-ts/focuson/blob/master/RELEASES.md)
* [A cookbook of 'howtos' Cookbook](cookbooks/index.md)
* [Example code](https://github.com/focuson-ts/focuson/tree/master/modules/forms/src/example)
* [Training materials - ppt](https://docs.google.com/presentation/d/e/2PACX-1vQaJOECJbjQZynmzieigICB_6GAgz8E_BaVzLwnnfmzunhyXcVADL1cHNKs3COjVmoM9eQmejy0y27b/pub?start=false&loop=false&delayms=3000)
* [Training materials - git](https://github.com/focuson-ts/training)

## Summary
This is a 'low code' mechanism for generating the apis and the react components for a website from a declarative representation.
Unlike most low code solutions it does not rely on a gui, but instead uses a text based representation leveraging 
the existing skills of developers with text based tools such as their IDE and version control systems

It is mostly suited for things like 'Forms'. So simple crud, displaying status, maintenance screens and so on. It is unsuited 
for sexy customer facing guis: much more business to employee.

The tools that are easily to use in making guis are:
* Easy access to any data source
  * clever data source 'stiching' (so some data from one source, another elsewhere)
* Validation
* Messaging to user (apis report issues, middle tier issues...etc). A simple and robust (suitable for B<=>E not B<=>C) mechanism for such issues
* Retreiving and modifying data in a database. 
* The Auto generated React gui uses the restful api
* Simple pages and model pages are both straightforwards

Importantly it is entirely data driven and extensible by injection of code. There is no  'make a skeleton and edit'.
npm package: @focuson/lenstest
Description: Tests the lens defined in @focuson/lens, the state defined in @focuson/state, and the fetchers in @focuson/fetcher
Latest version: 1.44.3

This project holds the tests for

* [@focuson/lens: Easy - perhaps even beautiful - code for editing deep immutable objects](modules/lens/README.md)
* [@focuson/state: State management for projects (including React) using the lens in the above project](modules/state/README.md)
 
They have been moved here to keep the main projects small
npm package: @focuson/nonfunctionals
Description: A library that allows wrapping of functions and kleislis with non functional capablities
Latest version: 1.44.3

This project allows the wrapping of functions and kleislis (approx: a function that returns a promise) with
non functional capabilities

There are two main exports
* NonFunctionalsForFunction 
* NonFunctionalsForPromiseFunctions

Each is a facard to the capablities that can use used.

At the moment this is just a play project
npm package: @focuson/pages
Description: Used when we want a simple many page application
Latest version: 1.44.3

Many applications are not so complex that they need a sophisticated paging system

Here we just have the idea of 'pages' and that there is a single page displayed at once.

# Features

* Pages can have messages on them: from other pages, from actions, or from apis
* Loading of pages is important
* Pages might just be 'show this api result' (i.e. 'show customer account details'). Here the state for the page is just from an api
   * This is such a common situation it has 'simpler configuration'
* Pages can also have 'some of the state from the api, some local'. A good example here is a search page with a search query and the results of the search
* Pages need to get their data from the backend, and some fetchers are provided that integrate smoothly with the pages

## Current Page
We have a component that displays the current selected page. There is always a current selected page (even if it is an 'empty page')

The current page is stored in the state as a 
```typescript
export interface PageSelection<Details> {
  pageName: keyof Details,
  firstTime?: boolean
}
```
First time is set to true when the page changes, and reset to undefined when the 'processing of the first page' has been completed. 

Note the details: that is an object that has keys (page name) and values. It's for page configuration. This interface knows 
nothing other than the details has legal page names as keys. 

In many places we use PageSelection<any> just to avoid threading that Details through the application

```typescript
export interface HasPageSelection<Details> {
  pageSelection: PageSelection<Details>
}
function pageSelectionlens<S extends HasPageSelection<any>, Details> (): Lens<S, PageSelection<Details>>{}
```
These are useful when the main state has the page selection as a `HasPageSelection`

## Modal Pages
It is quite common to want 'popup' a modal page over the top of another page. This is very easy to do

## Page configuration
npm package: @focuson/redux
Description: The tools needed to bind to redux, doesn't actually have a version of redux
Latest version: 1.23.16

# Embedding into redux applications

When we embed ourselves into redux applications

* Redux
  * Initialisation
  * We need a selector to extract our state
  * We need a dispatcher to send state changes to
  * We need a reducer that updates the state
* Page management
  * We need to be able to display our pages
  * We need other people to be able to select our page
  * We need to select other people's pages
  
## Initialisation

We need our starting state to be initiated. Things like messages/etc. Debug state... 

## Selector

* We need to get our 'common ids' out of the redux state
    * These are information such as 'customer id', 'account id', 'application id'... etc
    * They could change at any time. We need a local copy in our state
    * So... we need some optioneering here
      * Do we point our common lens at redux. We just use names for them, so we can centralise this
      * Do we copy into our state every time? This is quite simple and the default
      * Whatever we do we should 'information hide' it... check the design of the common lens...
* Messages
  * Probably we are just using simple messages. Check if there is an existing message structure

## Dispatcher

* We just send 'our new state' which gets embedded back into the main.
  * Note that at this point we will put things like common ids in the global state. This should be fine and allows performance optimisation in the selector

## Reducer

* Pretty much just a lens... takes our new state, stuffs it in the global

## Display  pages

* Our 'SelectedPage' is almost what we need
  * Might need a ReduxPage

##Select our page

* We need a React component to select our pages (one per team probably)

## Select other people's page

* We will need to find out how to do this, and then make a Depedency injection point for it.

# Multiple teams
* We will have multiple teams making our components. We need to make sure we know how we can work with multiple teams stuff...
* We could merge code bases (easy but dangerous)
* We could have a separate <SelectedPage> for each ... this feels the best... Because javascript is quite good at name spaces..
* Experimentation will be needed

# Observations

So the only awkward bit is
npm package: @focuson/rest
Description: This allows for declarative 'rest actions'. Get/Update/Create... 
Latest version: 1.44.3

# @focuson/rest

Higher level libraries in @focuson need to communicate with the backend. This provides the mechanisms to get 'restful' 
access to them. Specifically the low level code to process `RestCommands`


## RestCommand

To assist debugging, logging and testing (and simplify code) we separate end point access into 'what do I want to do' 
(restCommands) from 'how do I want to do it'. This allows us to process the rest commands in many ways

## State and RestCommands

If in the state we place a list of rest of commands then the `rest()` function will process those commands.
npm package: @focuson/view
Description: Used when we want to view data from one or more APIs.
Latest version: 0.2.31

# State fetch

A common pattern in GUIs is 'showing the data revealed by an API'. For example we might show the data in shopping site,
or show account data about customers.

When doing this typically there is a navigation area which determines what is being looked at, and then multiple
places that show information about what is being looked at. Each time the state is changed a decision needs to be made
about whether to get more information from the backing API(s).

The strategy adopted is to have a 'tag' field in the state which describes the type of the display being shown. This tag
is linked to a set of functions that allow `state-fetcch` to decide when to load state information.

# Key Concepts

## State
This uses the state defined in the project [@focus-on/state](https://www.npmjs.com/package/@focuson/state). The state
is a javascript object with one or more lens focused on different parts of it which allows it to be 'modified' using the
usual 'immutable' meaning of modified (i.e. copied and the copy updated)

## View
The `state` will have (names all configurable - the following is just the normal names)
* A `view` field that holds a string defining the current view. It is used as a key into the ViewState
* A `mainItem` that is either undefined or the current mainItem the view is focused on
* A `selectionState` that holds information allowing the mainItem to be fetched (e.g. one or more ids)

## View state

Given the name of a view, the view state defines
* How to display it
* How to fetch it from the back end
* How to work out whether it needs to be fetched

## Parent Views

Some views depend on parents, and the parent data has to be loaded first. For instance if we are displaying an item in a collection there could
be a view for the collection which should be loaded before the item is loaded.

This is handled using `parentView`

## setJsonUsingView

This is the helper method that makes it all work. This controls the rendering.


## Generics in View

View store has the signature `ViewStore<State, Element>`. `State` is the javascript object that defines the state the view will be looking at. `Element` will 
usually be a JSX.Element, but is defined as a generic to avoid binding to any specific library. Thus you can use this with any version of react

## Displaying the view

The `@focuson/view-components`  project has the `MainView` component. It is bound to a particular version of react, but you can just copy 
it if you want a different version.
npm package: @focusring/horn-wasm
Description: WebAssembly build of the Horn PDF/UA accessibility checker
Latest version: 0.2.1

<p align="center">
  <picture>
    <source media="(prefers-color-scheme: light)" srcset="../docs/public/horn-dark.svg" />
    <source media="(prefers-color-scheme: dark)" srcset="../docs/public/horn-light.svg" />
    <img src="../docs/public/horn-dark.svg" alt="Horn logo" width="360" height="138" />
  </picture>
</p>

# Horn WASM

WebAssembly build of [Horn](https://github.com/focusring/horn), the open-source PDF/UA accessibility checker based on the Matterhorn Protocol.

Exposes a single `validate(name, data)` function that takes a filename and raw PDF bytes, returning the full Horn report as a JavaScript object.

## Build

```sh
wasm-pack build horn-wasm --target web
```

The output is written to `horn-wasm/pkg/`.

## Usage

```js
import init, { validate } from './pkg/horn_wasm.js'

await init()

const buffer = await file.arrayBuffer()
const report = validate(file.name, new Uint8Array(buffer))
```

## License

MIT