Palette Cells that Act as Keys

The cells of the palette that are interactive and behave like keys on the palette are defined in a JSON structure given in the baby-bliss-bot repository. (Note: the links currently reference the branch where the development of this JSON structure is taking place).

The information in the JSON structure is used to:

1. Create a component that is used to render individual cells on-screen, and
2. Lay out the cells according to the row/column arrangement defined in the JSON.

Is your feature request related to a problem?

The output area, specifically, the ContentsBmwEncoding component, is a region where the symbols that the user has chosen appear as they are selected. Currently, this area is duplicated at the top of each description file containing a palette of symbols. As such, the output area is an inherent part of each palette, and they are rendered together as a single palette.

Describe the solution you'd like

In terms of the palette description files, the output area should be in its own separate file. With respect to the display, it should be a separate region on the page, independent of any other component. Finally, as users choose symbols, its contents should be updated as appropriate.

Is your feature request related to a problem?

Users will have a variety of palettes that reflect different groupings of symbols at different times. There needs to be a way to move from one palette to another, and back.

Describe the solution you'd like

Certain cells in a given palette will provide navigation to another palette layer. That is, choosing that cell will cause another palette, represented by that cell, to replace the current palette. The new palette in turn may have another such "go-to-palette" cell to use to navigate to another palette layer.

In addition, there needs to be a way to go back from the newest layer to the palette that led to it. Note that the path from one layer to another can be short, amounting to a simple there-and-back, or longer with many intervening palette layers. A "go-back" cell is a minimal feature that allows users to reverse the path one layer at a time.

Describe the bug

The preact/vite build process does not copy static data held in .json files to the dist/assets folder. If it did, the code could use fetch() to acquire the information in those files instead of using the dynamic import() function. Using fetch() would a be common way of retrieving resources whether they are local or from a remote server. In addition, thevite build process uses rollup to package the files for distribution. Rollup has a number of limitations regarding the argument of a dynamic import(). It is not transparent as to why the argument is assembled that way without knowing about these restrictions; hence, using dynamic import() is error prone.

To reproduce

N/A

Expected behavior

With the proper build setup, the build action would copy the palette .json files to a known place in the dist folder such that fetch() could be used to input their contents. Or, at least make a dynamic import() of them obvious.

Implement a content display area that does:

1. When a palette key is pressed, the content associated with the key is displayed in this area;
2. Add a "delete" button to remove the last content element from this area;
3. Add a "clear" button to clear all content from this area.