@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/{selectAll/selectAll.ts → select-all/select-all.ts}

@@ -4,8 +4,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 import { LOCALE } from "../locale/locale.ts";
 import { slotView } from "../slot/slot.ts";
 
-// VIEW
-
 /** Configuration for rendering a select-all head with `view`. */
 export type ViewConfig<Message> = Readonly<{
   /** Unique in the document: the ids of the box's name and of its count are made from it.
@@ -30,7 +28,10 @@ export type ViewConfig<Message> = Readonly<{
  * is unavailable (`aria-disabled`), as there is nothing to select, and keeps its place in the
  * keyboard.
  */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const { id, total, selected, onToggle, actions = [] } = config;
 
   return UiCheckbox.view(
@@ -50,7 +51,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
               [
                 h.button(groups.checkbox),
                 h.span([...groups.label, h.Class("sr-only")], ["Select all"]),
-              ],
+              ]
             ),
             h.div(
               [h.Class("grow")],
@@ -59,14 +60,14 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
                   [...groups.description, h.Class("bulk-count")],
                   [
                     `${selected.toLocaleString(LOCALE)} of ${total.toLocaleString(LOCALE)} selected`,
-                  ],
+                  ]
                 ),
-              ],
+              ]
             ),
             ...slotView("span", "bulk-acts", actions, h),
-          ],
+          ]
         ),
     },
-    h,
+    h
   );
 };

package/src/{selectField → select-field}/index.ts

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

package/src/{selectField/selectField.ts → select-field/select-field.ts}

@@ -4,8 +4,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { controlAttributes, errorView, helpView } from "../field/field.ts";
 
-// VIEW
-
 /** One choice in a `SelectField`. */
 export type SelectOption = Readonly<{
   value: string;
@@ -19,7 +17,7 @@ export type SelectGroup = Readonly<{
   /** Tells groups apart when two share a label. */
   key: string;
   label: string;
-  options: ReadonlyArray<SelectOption>;
+  options: readonly SelectOption[];
 }>;
 
 /** Configuration for rendering a select field with `view`. */
@@ -41,7 +39,8 @@ export type ViewConfig<Message> = Readonly<{
   isRequired?: boolean;
 }>;
 
-const isGroup = (entry: SelectOption | SelectGroup): entry is SelectGroup => "options" in entry;
+const isGroup = (entry: SelectOption | SelectGroup): entry is SelectGroup =>
+  "options" in entry;
 
 const optionView =
   <Message>(h: HtmlBuilder<Message>) =>
@@ -55,7 +54,7 @@ const entryView =
       ? h.keyed("optgroup")(
           entry.key,
           [h.Attribute("label", entry.label)],
-          Array.map(entry.options, optionView(h)),
+          Array.map(entry.options, optionView(h))
         )
       : optionView(h)(entry);
 
@@ -63,8 +62,20 @@ const entryView =
  *  the select, the help line describes it (`aria-describedby`), an `error` sets
  *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
  *  The stylesheet draws the box, the caret and the picker. */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
-  const { id, label, value, onChange, options, help, error, isRequired = false } = config;
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
+  const {
+    id,
+    label,
+    value,
+    onChange,
+    options,
+    help,
+    error,
+    isRequired = false,
+  } = config;
 
   return UiSelect.view(
     {
@@ -79,14 +90,17 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
           [
             h.label(groups.label, [label]),
             h.select(
-              [...groups.select, ...controlAttributes(id, error, help, isRequired, h)],
-              Array.map(options, entryView(h)),
+              [
+                ...groups.select,
+                ...controlAttributes(id, error, help, isRequired, h),
+              ],
+              Array.map(options, entryView(h))
             ),
             ...errorView(id, error, h),
             ...helpView(help, groups.description, h),
-          ],
+          ]
         ),
     },
-    h,
+    h
   );
 };

package/src/sheet/index.ts

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

package/src/sheet/sheet.ts

@@ -2,8 +2,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { slotView } from "../slot/slot.ts";
 
-// VIEW
-
 /** Configuration for rendering a sheet with `view`. */
 export type ViewConfig = Readonly<{
   /** The page's `h1`, in sans at the reading scale. */
@@ -19,7 +17,10 @@ export type ViewConfig = Readonly<{
 /** An authored page, an `<article>` under its `h1` on its own sheet of paper, framed as a
  *  panel is: the one place the system slows to reading pace. It stands in a panel's place,
  *  never inside one, so its `h1` opens the page instead of following a panel's `h2`. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { title, byline = [], actions = [], body } = config;
 
   return h.article(
@@ -27,10 +28,13 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
     [
       h.div(
         [h.Class("sheet-head")],
-        [h.h1([h.Class("sheet-title")], [title]), ...slotView("div", "sheet-acts", actions, h)],
+        [
+          h.h1([h.Class("sheet-title")], [title]),
+          ...slotView("div", "sheet-acts", actions, h),
+        ]
       ),
       ...slotView("p", "byline", byline, h),
       ...body,
-    ],
+    ]
   );
 };

package/src/skip-link/index.ts

@@ -0,0 +1 @@
+export { ScrollToFragment, view } from "./skip-link.ts";

package/src/{skipLink/skipLink.ts → skip-link/skip-link.ts}

@@ -4,14 +4,11 @@ import * as Dom from "foldkit/dom";
 import type { Html, HtmlBuilder } from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
 
-// MESSAGE
-
 /** What `ScrollToFragment` reports. An application that runs it puts
  *  `CompletedScrollToFragment: {}` in its own Message union, which this tag matches. */
 export const Message = defineMessageUnion({ CompletedScrollToFragment: {} });
-export type Message = typeof Message.Type;
 
-// VIEW
+export type Message = typeof Message.Type;
 
 /**
  * The first thing in the page: a link to the main landmark (`#main`, as Deck, Stage and Wall render it), hidden until it holds the
@@ -22,16 +19,10 @@ export type Message = typeof Message.Type;
 export const view = <Message>(h: HtmlBuilder<Message>): Html =>
   h.a([h.Href("#main"), h.Class("skip")], ["Skip to content"]);
 
-// FOCUS
-
-/** Moves focus to the element a fragment names, making it focusable when it is not;
- *  `ScrollToFragment` runs it. */
 export const focusFragment = (fragment: string): Effect.Effect<void> =>
-  Effect.suspend(() => Dom.focus(`#${CSS.escape(fragment)}`, { makeFocusable: true })).pipe(
-    Effect.ignore,
-  );
-
-// COMMAND
+  Effect.suspend(() =>
+    Dom.focus(`#${CSS.escape(fragment)}`, { makeFocusable: true })
+  ).pipe(Effect.ignore);
 
 /**
  * What a followed link does without an application in the way, for the application's URL
@@ -46,11 +37,14 @@ export const ScrollToFragment = Command.define("ScrollToFragment", {
   messages: [Message.CompletedScrollToFragment],
   execute: ({ maybeFragment }) =>
     Option.match(maybeFragment, {
-      onNone: () => Effect.sync(() => window.scrollTo(0, 0)),
+      onNone: () =>
+        Effect.sync(() => {
+          window.scrollTo(0, 0);
+        }),
       onSome: (fragment) =>
         Dom.scrollIntoView(`#${CSS.escape(fragment)}`).pipe(
           Effect.ignore,
-          Effect.andThen(focusFragment(fragment)),
+          Effect.andThen(focusFragment(fragment))
         ),
     }).pipe(Effect.as(Message.CompletedScrollToFragment())),
 });

package/src/slot/slot.ts

@@ -3,19 +3,18 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import type { Attributes } from "../attributes/attributes.ts";
 
-/** The elements a slot is wrapped in. */
 type SlotTag = "div" | "span" | "p" | "dd" | "ul";
 
-/** An optional slot in its one element, `tag.slotClass`, to spread among its siblings: nothing
- *  while the slot is empty, so an unused slot leaves no box, gap or rule behind. */
 export const slotView = <Message>(
   tag: SlotTag,
   slotClass: string,
   slot: ReadonlyArray<Html | string>,
   h: HtmlBuilder<Message>,
-  attributes: Attributes<Message> = [],
-): ReadonlyArray<Html> =>
+  attributes: Attributes<Message> = []
+): readonly Html[] =>
   Array.match(slot, {
     onEmpty: () => [],
-    onNonEmpty: (content) => [h[tag]([...attributes, h.Class(slotClass)], content)],
+    onNonEmpty: (content) => [
+      h[tag]([...attributes, h.Class(slotClass)], content),
+    ],
   });

package/src/sortable/index.ts

@@ -11,4 +11,5 @@ export {
   update,
   view,
 } from "./sortable.ts";
+
 export type { InitConfig, ItemRender, Layout, ViewInputs } from "./sortable.ts";