@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/{editableTitle/editableTitle.ts → editable-title/editable-title.ts}

@@ -1,5 +1,6 @@
 import { Button as UiButton } from "@foldkit/ui";
 import { Option, Schema } from "effect";
+import { constUndefined } from "effect/Function";
 import type { Html, HtmlBuilder } from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
 import { modifyFields } from "foldkit/struct";
@@ -7,18 +8,15 @@ import { defineView } from "foldkit/submodel";
 import * as Update from "foldkit/update";
 
 import { Focus } from "../focus/focus.ts";
-import * as InlineInput from "../inlineInput/inlineInput.ts";
-
-// MODEL
+import * as InlineInput from "../inline-input/inline-input.ts";
 
 /** Schema for an editable title: its id, and the inline edit while one is open. */
 export const Model = Schema.Struct({
   id: Schema.String,
   maybeEdit: Schema.Option(InlineInput.Model),
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of all Messages an editable title can produce. */
 export const Message = defineMessageUnion({
@@ -26,18 +24,16 @@ export const Message = defineMessageUnion({
   GotEditMessage: { message: InlineInput.Message },
   CompletedFocus: {},
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /** Union of OutMessages an editable title reports: save this text as the title. The edit
  *  holds until the caller reports back with `succeeded` or `failed`. */
 export const OutMessage = defineMessageUnion({
   Committed: { text: Schema.String },
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating an editable title with `init`. The `id` must be unique in the
  *  document. */
@@ -49,25 +45,23 @@ export const init = (config: InitConfig): Model => ({
   maybeEdit: Option.none(),
 });
 
-// ACCESSORS
-
 /** The title's id, unique in the document. */
 export const id = (model: Model): string => model.id;
 
 const titleId = (model: Model): string => `${model.id}-title`;
 const fieldId = (model: Model): string => `${model.id}-field`;
 
-// UPDATE
-
 type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
 
-const foldEditOutMessage = InlineInput.OutMessage.match<Update.Step<Model, Message>>({
+const foldEditOutMessage = InlineInput.OutMessage.match<
+  Update.Step<Model, Message>
+>({
   Committed: () => (model) => ({ model }),
   Ended:
     ({ how }) =>
     (model) => {
       const closed = modifyFields(model, { maybeEdit: () => Option.none() });
-      // focus goes back to the title after Enter or Escape; after Blur the reader moved it
+
       return how === "Blur"
         ? { model: closed }
         : { model: closed, commands: [Focus({ id: titleId(model) })] };
@@ -76,14 +70,15 @@ const foldEditOutMessage = InlineInput.OutMessage.match<Update.Step<Model, Messa
 
 const toOutMessage = InlineInput.OutMessage.match<OutMessage | undefined>({
   Committed: ({ text }) => OutMessage.Committed({ text }),
-  Ended: () => undefined,
+  Ended: constUndefined,
 });
 
 const editFold = {
   read: (model: Model) => model.maybeEdit,
   write: (model: Model, nextEdit: InlineInput.Model): Model =>
     modifyFields(model, { maybeEdit: () => Option.some(nextEdit) }),
-  toParentMessage: (message: InlineInput.Message) => Message.GotEditMessage({ message }),
+  toParentMessage: (message: InlineInput.Message) =>
+    Message.GotEditMessage({ message }),
   toParentOutMessage: toOutMessage,
   foldOutMessage: foldEditOutMessage,
 };
@@ -92,7 +87,8 @@ const foldEdit = Update.foldChild({ update: InlineInput.update, ...editFold });
 
 const startEdit = (model: Model): UpdateReturn =>
   Update.foldChildInit(InlineInput.init({ id: fieldId(model) }), {
-    toParentModel: (edit) => modifyFields(model, { maybeEdit: () => Option.some(edit) }),
+    toParentModel: (edit) =>
+      modifyFields(model, { maybeEdit: () => Option.some(edit) }),
     toParentMessage: (message) => Message.GotEditMessage({ message }),
   });
 
@@ -108,8 +104,6 @@ export const update = (model: Model, message: Message) =>
  *  reader had moved it. */
 export const succeeded = (model: Model): UpdateReturn =>
   Update.foldChildStep({
-    // InlineInput reports the saved item's id when its edit ends, for a field that adds one
-    // item after another; a title is one item and ignores it, so its own id stands in
     update: (edit: InlineInput.Model) => InlineInput.succeeded(edit, model.id),
     ...editFold,
   })(model);
@@ -121,31 +115,33 @@ export const failed = (model: Model, error: string): UpdateReturn =>
     ...editFold,
   })(model);
 
-// VIEW
-
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
   value: string;
 }>;
 
-const titleView = (model: Model, viewInputs: ViewInputs, h: HtmlBuilder<Message>): Html =>
+const titleView = (
+  model: Model,
+  viewInputs: ViewInputs,
+  h: HtmlBuilder<Message>
+): Html =>
   UiButton.view(
     {
       onClick: Message.ClickedTitle(),
       toView: (groups) =>
         h.button(
           [...groups.button, h.Id(titleId(model)), h.Class("title-display")],
-          [viewInputs.value],
+          [viewInputs.value]
         ),
     },
-    h,
+    h
   );
 
 const editView = (
   model: Model,
   edit: InlineInput.Model,
   viewInputs: ViewInputs,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html =>
   h.div(
     [],
@@ -158,15 +154,16 @@ const editView = (
         toParentMessage: (message) => Message.GotEditMessage({ message }),
       }),
       InlineInput.errorView(edit, h),
-    ],
+    ]
   );
 
 /** A card's 16px title that edits in place: a button whose dotted rule on hover says so. A
  *  click opens the field with the title selected; Enter saves, Escape discards, and both put
  *  focus back on the title. Leaving the field saves too, without taking focus back. */
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html =>
-  Option.match(model.maybeEdit, {
-    onNone: () => titleView(model, viewInputs, h),
-    onSome: (edit) => editView(model, edit, viewInputs, h),
-  }),
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html =>
+    Option.match(model.maybeEdit, {
+      onNone: () => titleView(model, viewInputs, h),
+      onSome: (edit) => editView(model, edit, viewInputs, h),
+    })
 );

package/src/{editableTitle → editable-title}/index.ts

@@ -8,6 +8,8 @@ export {
   succeeded,
   update,
   view,
-} from "./editableTitle.ts";
-export type { InitConfig, ViewInputs } from "./editableTitle.ts";
+} from "./editable-title.ts";
+
+export type { InitConfig, ViewInputs } from "./editable-title.ts";
+
 export { Focus } from "../focus/focus.ts";

package/src/{emptyState/emptyState.ts → empty-state/empty-state.ts}

@@ -1,8 +1,6 @@
 import { Array } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering an empty state with `view`. */
 export type ViewConfig = Readonly<{
   /** Pixel caps: what is missing (`"Nothing queued"`). */
@@ -20,7 +18,10 @@ export type ViewConfig = Readonly<{
 }>;
 
 /** What a panel says when it has nothing to show, centred where its content would be. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { title, headingLevel, body = [], actions = [] } = config;
 
   return h.div(
@@ -29,8 +30,11 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
       headingLevel === "Strong"
         ? h.strong([h.Class("empty-title")], [title])
         : h[`h${headingLevel}`]([h.Class("empty-title")], [title]),
-      ...Array.match(body, { onEmpty: () => [], onNonEmpty: (sentence) => [h.p([], sentence)] }),
+      ...Array.match(body, {
+        onEmpty: () => [],
+        onNonEmpty: (sentence) => [h.p([], sentence)],
+      }),
       ...actions,
-    ],
+    ]
   );
 };

package/src/empty-state/index.ts

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

package/src/{errorSummary/errorSummary.ts → error-summary/error-summary.ts}

@@ -20,11 +20,13 @@ export type ViewConfig = Readonly<{
   id: string;
   /** The fields that failed, one entry per control, in the order of the form. With none,
    *  nothing renders. */
-  errors: ReadonlyArray<FieldError>;
+  errors: readonly FieldError[];
 }>;
 
 const headline = (count: number): string =>
-  count === 1 ? "1 field needs attention" : `${count.toLocaleString(LOCALE)} fields need attention`;
+  count === 1
+    ? "1 field needs attention"
+    : `${count.toLocaleString(LOCALE)} fields need attention`;
 
 /**
  * Why a form was not sent, above its fields: the error Notice with a headline that counts the
@@ -41,7 +43,10 @@ const headline = (count: number): string =>
  * Each link is a fragment link to its field; a Foldkit application's fragment handler moves
  * focus there (`SkipLink.ScrollToFragment`).
  */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { id, errors } = config;
 
   return Array.match(errors, {
@@ -58,12 +63,16 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
               h.ul(
                 [],
                 Array.map(failed, ({ id: fieldId, message }) =>
-                  h.keyed("li")(fieldId, [], [h.a([h.Href(`#${fieldId}`)], [message])]),
-                ),
+                  h.keyed("li")(
+                    fieldId,
+                    [],
+                    [h.a([h.Href(`#${fieldId}`)], [message])]
+                  )
+                )
               ),
-            ],
+            ]
           ),
-        ],
+        ]
       ),
   });
 };

package/src/error-summary/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./error-summary.ts";
+
+export type { FieldError, ViewConfig } from "./error-summary.ts";

package/src/field/field.ts

@@ -1,19 +1,23 @@
 import { Input as UiInput } from "@foldkit/ui";
-import type { Attribute, Html, HtmlBuilder, TextareaAttribute } from "foldkit/html";
+import type {
+  Attribute,
+  Html,
+  HtmlBuilder,
+  TextareaAttribute,
+} from "foldkit/html";
 
 import type { Attributes } from "../attributes/attributes.ts";
 
-// ERROR
-
 const errorId = (id: string): string => `${id}-error`;
 
-/** The red sentence under a field's control that says why it failed, given an error. */
 export const errorView = <Message>(
   id: string,
   error: string | undefined,
-  h: HtmlBuilder<Message>,
-): ReadonlyArray<Html> =>
-  error === undefined ? [] : [h.p([h.Id(errorId(id)), h.Class("field-error")], [error])];
+  h: HtmlBuilder<Message>
+): readonly Html[] =>
+  error === undefined
+    ? []
+    : [h.p([h.Id(errorId(id)), h.Class("field-error")], [error])];
 
 /** Points the control at its error, then at its help line when it has one. After the
  *  `@foldkit/ui` attributes, whose `aria-describedby` names the help line alone; every
@@ -22,39 +26,35 @@ export const describedByError = <Message>(
   id: string,
   error: string | undefined,
   hasHelp: boolean,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): ReadonlyArray<TextareaAttribute<Message>> =>
   error === undefined
     ? []
-    : [h.AriaDescribedBy(hasHelp ? `${errorId(id)} ${UiInput.descriptionId(id)}` : errorId(id))];
+    : [
+        h.AriaDescribedBy(
+          hasHelp ? `${errorId(id)} ${UiInput.descriptionId(id)}` : errorId(id)
+        ),
+      ];
 
-/** A field's control, after the `@foldkit/ui` attributes: described by its error before its
- *  help line, and `aria-required` when the form is not sent without it. */
-// NOTE: @foldkit/ui gap: Input, Select and Textarea have no required option, so the wrapper
-// says it.
 export const controlAttributes = <Message>(
   id: string,
   error: string | undefined,
   help: string | undefined,
   isRequired: boolean,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): ReadonlyArray<TextareaAttribute<Message>> => [
   ...describedByError(id, error, help !== undefined, h),
   ...(isRequired ? [h.AriaRequired(true)] : []),
 ];
 
-// HELP
-
-/** The sans sentence under a field's controls, given one, with the `@foldkit/ui`
- *  `description` group that makes it describe them. */
 export const helpView = <Message>(
   help: string | undefined,
   description: ReadonlyArray<Attribute<Message>>,
-  h: HtmlBuilder<Message>,
-): ReadonlyArray<Html> =>
-  help === undefined ? [] : [h.p([...description, h.Class("field-help")], [help])];
-
-// VIEW
+  h: HtmlBuilder<Message>
+): readonly Html[] =>
+  help === undefined
+    ? []
+    : [h.p([...description, h.Class("field-help")], [help])];
 
 /** Configuration for rendering a text field with `view`. */
 export type ViewConfig<Message> = Readonly<{
@@ -89,7 +89,10 @@ export type ViewConfig<Message> = Readonly<{
  *  names the input, the help line describes it (`aria-describedby`), an `error` sets
  *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
  *  The input is boxless, a dotted baseline that turns solid ink on focus. */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const {
     id,
     label,
@@ -115,9 +118,16 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
       hasDescription: help !== undefined,
       toView: (groups) =>
         h.div(
-          [h.Class(`field${isBoxed || type === "date" ? " boxed" : ""}${isMono ? " mono" : ""}`)],
           [
-            h.label([...groups.label, ...(isLabelHidden ? [h.Class("sr-only")] : [])], [label]),
+            h.Class(
+              `field${isBoxed || type === "date" ? " boxed" : ""}${isMono ? " mono" : ""}`
+            ),
+          ],
+          [
+            h.label(
+              [...groups.label, ...(isLabelHidden ? [h.Class("sr-only")] : [])],
+              [label]
+            ),
             h.input([
               ...inputAttributes,
               ...groups.input,
@@ -125,9 +135,9 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
             ]),
             ...errorView(id, error, h),
             ...helpView(help, groups.description, h),
-          ],
+          ]
         ),
     },
-    h,
+    h
   );
 };

package/src/field/index.ts

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

package/src/{fieldGrid/fieldGrid.ts → field-grid/field-grid.ts}

@@ -1,7 +1,5 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering a field grid with `view`. */
 export type ViewConfig = Readonly<{
   /** Fields. */
@@ -9,7 +7,10 @@ export type ViewConfig = Readonly<{
 }>;
 
 /** Fields side by side while they fit, 160px at least each. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { body } = config;
 
   return h.div([h.Class("field-grid")], body);

package/src/field-grid/index.ts

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

package/src/fields/fields.ts

@@ -1,7 +1,5 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering a form's fields with `view`. */
 export type ViewConfig = Readonly<{
   body: ReadonlyArray<Html | string>;
@@ -13,11 +11,17 @@ export type ViewConfig = Readonly<{
 
 /** A form's fields, a column 14px apart (a body's gap), in one unnamed `<fieldset>` that
  *  `isBusy` disables. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { body, isBusy = false } = config;
 
   return h.fieldset(
-    [...(isBusy ? [h.Disabled(true), h.AriaBusy(true)] : []), h.Class("stack gap-m")],
-    body,
+    [
+      ...(isBusy ? [h.Disabled(true), h.AriaBusy(true)] : []),
+      h.Class("stack gap-m"),
+    ],
+    body
   );
 };

package/src/fields/index.ts

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

package/src/fieldset/fieldset.ts

@@ -3,8 +3,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { describedByError, errorView, helpView } from "../field/field.ts";
 
-// VIEW
-
 /** Configuration for rendering a fieldset with `view`. */
 export type ViewConfig = Readonly<{
   /** Unique in the document: the legend's and the help line's ids are made from it. */
@@ -25,7 +23,10 @@ export type ViewConfig = Readonly<{
 /** A group of controls under one name, built on `@foldkit/ui`'s Fieldset: a `<fieldset>`
  *  named by its `<legend>` and described by its error and its help line
  *  (`aria-describedby`). The legend turns red while a control in it is invalid. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { id, label, help, error, body } = config;
 
   return UiFieldset.view(
@@ -44,9 +45,9 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
             ...body,
             ...errorView(id, error, h),
             ...helpView(help, groups.description, h),
-          ],
+          ]
         ),
     },
-    h,
+    h
   );
 };

package/src/fieldset/index.ts

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