@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/places/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./places.ts";
+
 export type { Place, ViewConfig } from "./places.ts";

package/src/places/places.ts

@@ -5,13 +5,11 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 import { LOCALE } from "../locale/locale.ts";
 import { slotView } from "../slot/slot.ts";
 
-// VIEW
-
 /** One place in Places: a link to its address (`href`), or a button that shows it in the page
  *  (`onSelect`). */
 export type Place<Message> = PlaceContent & PlaceTarget<Message>;
 
-type PlaceContent = Readonly<{
+export type PlaceContent = Readonly<{
   /** Stable and unique among the places: the row's key, so two places that share a name stay
    *  apart. */
   id: string;
@@ -22,10 +20,10 @@ type PlaceContent = Readonly<{
   /** How many things it holds, in the pixel face at the right. */
   count?: number;
   /** A quiet IconButton after it that acts on the place itself (remove a saved filter). */
-  tools?: ReadonlyArray<Html>;
+  tools?: readonly Html[];
 }>;
 
-type PlaceTarget<Message> =
+export type PlaceTarget<Message> =
   | Readonly<{
       /** The place's address: the line is a link, so it opens in a new tab and reads as one. */
       href: string;
@@ -44,14 +42,21 @@ export type ViewConfig<Message> = Readonly<{
   places: ReadonlyArray<Place<Message>>;
 }>;
 
-const lineView = <Message>(place: Place<Message>, h: HtmlBuilder<Message>): Html => {
+const lineView = <Message>(
+  place: Place<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const { label, isCurrent = false, count } = place;
   const current = isCurrent ? [h.AriaCurrent("page")] : [];
+
   const content = [
     h.span([h.Class("place-name")], [label]),
     ...(count === undefined
       ? []
-      : [" ", h.span([h.Class("place-count")], [count.toLocaleString(LOCALE)])]),
+      : [
+          " ",
+          h.span([h.Class("place-count")], [count.toLocaleString(LOCALE)]),
+        ]),
   ];
 
   return place.href === undefined
@@ -60,7 +65,7 @@ const lineView = <Message>(place: Place<Message>, h: HtmlBuilder<Message>): Html
           onClick: place.onSelect,
           toView: (groups) => h.button([...groups.button, ...current], content),
         },
-        h,
+        h
       )
     : h.a([h.Href(place.href), ...current], content);
 };
@@ -71,17 +76,23 @@ const placeView =
     h.keyed("li")(
       place.id,
       [],
-      [lineView(place, h), ...slotView("span", "place-tools", place.tools ?? [], h)],
+      [
+        lineView(place, h),
+        ...slotView("span", "place-tools", place.tools ?? [], h),
+      ]
     );
 
 /** A column of places to go (areas, collections, saved filters), flush in a rail panel: a
  *  navigation landmark named by its label, one line each a link to the place or a button built
  *  on `@foldkit/ui`'s Button, the one you are in `aria-current="page"` and printed inverted. */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const { label, places } = config;
 
   return h.nav(
     [h.AriaLabel(label), h.Class("places")],
-    [h.ul([], Array.map(places, placeView(h)))],
+    [h.ul([], Array.map(places, placeView(h)))]
   );
 };

package/src/props-list/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./props-list.ts";
+
+export type { Prop, ViewConfig } from "./props-list.ts";

package/src/{propsList/propsList.ts → props-list/props-list.ts}

@@ -1,8 +1,6 @@
 import { Array } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** One property: its label, its value and its controls. */
 export type Prop = Readonly<{
   /** Pixel caps; unique in the list. */
@@ -16,7 +14,7 @@ export type Prop = Readonly<{
 
 /** Configuration for rendering a props list with `view`. */
 export type ViewConfig = Readonly<{
-  items: ReadonlyArray<Prop>;
+  items: readonly Prop[];
 }>;
 
 const propView =
@@ -29,10 +27,12 @@ const propView =
         h.dt([], [label]),
         h.dd([], isCode ? [h.code([], value)] : value),
         h.dd([h.Class("acts")], actions),
-      ],
+      ]
     );
 
 /** A description list: a pixel-caps label, the value, and an action column, one 34px row
  *  each. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
-  h.dl([h.Class("props")], Array.map(config.items, propView(h)));
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => h.dl([h.Class("props")], Array.map(config.items, propView(h)));

package/src/prose/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./prose.ts";
+
 export type { ViewConfig } from "./prose.ts";

package/src/prose/prose.ts

@@ -1,7 +1,5 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering prose with `view`. */
 export type ViewConfig = Readonly<{
   /** Authored elements: `p`, headings, lists, `blockquote`, `code`, tables, a Notice, or the
@@ -15,5 +13,7 @@ export type ViewConfig = Readonly<{
 
 /** Authored text at 15/1.65 sans within a 68ch measure; code and tables may run wider. It
  *  styles the plain elements it holds, so rendered Markdown needs no classes. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
-  h.div([h.Class("prose")], config.body);
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => h.div([h.Class("prose")], config.body);

package/src/query-chip/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./query-chip.ts";
+
+export type { ViewConfig } from "./query-chip.ts";

package/src/{queryChip/queryChip.ts → query-chip/query-chip.ts}

@@ -3,8 +3,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import type { Attributes } from "../attributes/attributes.ts";
 
-// VIEW
-
 /** Configuration for rendering a query chip with `view`. */
 export type ViewConfig<Message> = Readonly<{
   /** Unique in the document: the search field's id. */
@@ -21,8 +19,18 @@ export type ViewConfig<Message> = Readonly<{
 
 /** A search field shaped as a chip, built on `@foldkit/ui`'s Input: a `type="search"` field
  *  named by the chip's name, tinted while it holds a query. */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
-  const { id, label, value, onInput, placeholder, inputAttributes = [] } = config;
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
+  const {
+    id,
+    label,
+    value,
+    onInput,
+    placeholder,
+    inputAttributes = [],
+  } = config;
 
   return UiInput.view(
     {
@@ -33,13 +41,16 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
       ...(placeholder !== undefined && { placeholder }),
       toView: (groups) =>
         h.label(
-          [...groups.label, h.Class(value === "" ? "fchip query" : "fchip query live")],
+          [
+            ...groups.label,
+            h.Class(value === "" ? "fchip query" : "fchip query live"),
+          ],
           [
             h.span([h.Class("fchip-name")], [label]),
             h.input([...inputAttributes, ...groups.input]),
-          ],
+          ]
         ),
     },
-    h,
+    h
   );
 };

package/src/{radioChoices → radio-choices}/index.ts

@@ -7,5 +7,6 @@ export {
   init,
   update,
   view,
-} from "./radioChoices.ts";
-export type { InitConfig, RadioOption, ViewInputs } from "./radioChoices.ts";
+} from "./radio-choices.ts";
+
+export type { InitConfig, RadioOption, ViewInputs } from "./radio-choices.ts";

package/src/{radioChoices/radioChoices.ts → radio-choices/radio-choices.ts}

@@ -6,29 +6,26 @@ import { modifyFields } from "foldkit/struct";
 import { defineView } from "foldkit/submodel";
 import * as Update from "foldkit/update";
 
-// MODEL
-
 /** Schema for a radio choice: the `@foldkit/ui` RadioGroup it is built on, which keeps where
  *  keyboard focus is. The selected value is the parent's, passed in as `selectedValue`. */
 export const Model = Schema.Struct({ radioGroup: UiRadioGroup.Model });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of all Messages a radio choice can produce. */
 export const Message = defineMessageUnion({
   GotRadioGroupMessage: { message: UiRadioGroup.Message },
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /** Union of OutMessages a radio choice reports to its parent: an option was chosen, by a
  *  click anywhere on it, Space, or an arrow key. The parent stores `value`. */
-export const OutMessage = defineMessageUnion({ Selected: { value: Schema.String } });
-export type OutMessage = typeof OutMessage.Type;
+export const OutMessage = defineMessageUnion({
+  Selected: { value: Schema.String },
+});
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating a radio choice with `init`. The `id` must be unique in the
  *  document. */
@@ -39,18 +36,12 @@ export const init = (config: InitConfig): Model => ({
   radioGroup: UiRadioGroup.init({ id: config.id }),
 });
 
-// ACCESSORS
-
 /** The radio choice's id, unique in the document. */
 export const id = (model: Model): string => model.radioGroup.id;
 
-// NOTE: @foldkit/ui gap: RadioGroup's `optionId` is private, so its id format is held here,
-// the one place that writes it.
 /** The id of the group's first option, where a link to the group lands (an ErrorSummary's). */
 export const firstOptionId = (model: Model): string => `${id(model)}-option-0`;
 
-// UPDATE
-
 const RadioGroup = UiRadioGroup.create();
 
 const foldRadioGroup = Update.foldChild({
@@ -58,7 +49,8 @@ const foldRadioGroup = Update.foldChild({
   read: (model: Model) => Option.some(model.radioGroup),
   write: (model: Model, nextRadioGroup: UiRadioGroup.Model) =>
     modifyFields(model, { radioGroup: () => nextRadioGroup }),
-  toParentMessage: (message: UiRadioGroup.Message) => Message.GotRadioGroupMessage({ message }),
+  toParentMessage: (message: UiRadioGroup.Message) =>
+    Message.GotRadioGroupMessage({ message }),
   toParentOutMessage: UiRadioGroup.OutMessage.match<OutMessage>({
     Selected: ({ value }) => OutMessage.Selected({ value }),
   }),
@@ -66,21 +58,26 @@ const foldRadioGroup = Update.foldChild({
 
 /** Processes a radio choice Message and returns the next Model, Commands and OutMessage. */
 export const update = (model: Model, message: Message) =>
-  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(message, {
-    GotRadioGroupMessage: ({ message: radioGroupMessage }) =>
-      foldRadioGroup(model, radioGroupMessage),
-  });
-
-// VIEW
+  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(
+    message,
+    {
+      GotRadioGroupMessage: ({ message: radioGroupMessage }) =>
+        foldRadioGroup(model, radioGroupMessage),
+    }
+  );
 
 /** One option: its value, its name in pixel caps, and an optional sans note under it. */
-export type RadioOption = Readonly<{ value: string; label: string; note?: string }>;
+export type RadioOption = Readonly<{
+  value: string;
+  label: string;
+  note?: string;
+}>;
 
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
   /** Names the group for screen readers; a Fieldset around it says it on the page. */
   label: string;
-  options: ReadonlyArray<RadioOption>;
+  options: readonly RadioOption[];
   /** The parent's selection. */
   selectedValue: Option.Option<string>;
   /** The group is `aria-invalid` and its marks and names turn red; say why in its
@@ -95,44 +92,61 @@ export type ViewInputs = Readonly<{
  * One stop for Tab, and the arrows move the selection. Its mark is a diamond, so a single
  * choice reads apart from a checkbox.
  */
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const { label, options, selectedValue, isInvalid = false } = viewInputs;
-
-  const optionView = (option: RadioOption, info: UiRadioGroup.OptionInfo): Html =>
-    h.keyed("button")(
-      info.value,
-      [...info.option, h.Class("choice")],
-      [
-        h.span([h.Class("choice-box")]),
-        h.span(
-          [],
-          [
-            h.span([...info.label, h.Class("choice-name")], [option.label]),
-            ...(option.note === undefined
-              ? []
-              : [h.span([...info.description, h.Class("choice-note")], [option.note])]),
-          ],
-        ),
-      ],
-    );
-
-  return h.submodel({
-    slotId: id(model),
-    model: model.radioGroup,
-    view: RadioGroup.view,
-    viewInputs: {
-      options: Array.map(options, ({ value }) => value),
-      selectedValue,
-      ariaLabel: label,
-      orientation: "Vertical",
-      hasOptionDescription: (value) =>
-        Array.some(options, (option) => option.value === value && option.note !== undefined),
-      toView: (render) =>
-        h.div(
-          [...render.group, ...(isInvalid ? [h.AriaInvalid(true)] : []), h.Class("choices")],
-          Array.zipWith(options, render.options, optionView),
-        ),
-    },
-    toParentMessage: (message) => Message.GotRadioGroupMessage({ message }),
-  });
-});
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const { label, options, selectedValue, isInvalid = false } = viewInputs;
+
+    const optionView = (
+      option: RadioOption,
+      info: UiRadioGroup.OptionInfo
+    ): Html =>
+      h.keyed("button")(
+        info.value,
+        [...info.option, h.Class("choice")],
+        [
+          h.span([h.Class("choice-box")]),
+          h.span(
+            [],
+            [
+              h.span([...info.label, h.Class("choice-name")], [option.label]),
+              ...(option.note === undefined
+                ? []
+                : [
+                    h.span(
+                      [...info.description, h.Class("choice-note")],
+                      [option.note]
+                    ),
+                  ]),
+            ]
+          ),
+        ]
+      );
+
+    return h.submodel({
+      slotId: id(model),
+      model: model.radioGroup,
+      view: RadioGroup.view,
+      viewInputs: {
+        options: Array.map(options, ({ value }) => value),
+        selectedValue,
+        ariaLabel: label,
+        orientation: "Vertical",
+        hasOptionDescription: (value) =>
+          Array.some(
+            options,
+            (option) => option.value === value && option.note !== undefined
+          ),
+        toView: (render) =>
+          h.div(
+            [
+              ...render.group,
+              ...(isInvalid ? [h.AriaInvalid(true)] : []),
+              h.Class("choices"),
+            ],
+            Array.zipWith(options, render.options, optionView)
+          ),
+      },
+      toParentMessage: (message) => Message.GotRadioGroupMessage({ message }),
+    });
+  }
+);

package/src/rail/index.ts

@@ -15,4 +15,5 @@ export {
   update,
   view,
 } from "./rail.ts";
+
 export type { InitConfig, ViewInputs } from "./rail.ts";