@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/glyph/index.ts

@@ -1,4 +1,7 @@
 export { view } from "./glyph.ts";
+
 export type { ViewConfig } from "./glyph.ts";
+
 export { glyphFamilies, glyphs } from "./glyphs.ts";
+
 export type { Cell, GlyphName } from "./glyphs.ts";

package/src/group/group.ts

@@ -1,7 +1,5 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering a group with `view`. */
 export type ViewConfig = Readonly<{
   body: ReadonlyArray<Html | string>;
@@ -9,7 +7,10 @@ export type ViewConfig = Readonly<{
 
 /** One line of components at the small gap, centred on each other, that never wraps: a name and its chip, a
  *  pair of buttons. When the line might not fit, use a Wrap. */
-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("group gap-s")], body);

package/src/group/index.ts

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

package/src/history/history.ts

@@ -1,11 +1,10 @@
 import { Array, Schema } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** How the columns sit. `Versions`: a narrow who column, for a version log. `Checks`: a wider
  *  one, for a log of readings. */
 export const Variant = Schema.Literals(["Versions", "Checks"]);
+
 export type Variant = typeof Variant.Type;
 
 /** One entry in the log. */
@@ -29,7 +28,7 @@ export type Entry = Readonly<{
 export type ViewConfig = Readonly<{
   /** Newest first. Page an endless log with a control under the list (`"older activity"`)
    *  that asks the caller for the next page, and an EmptyState once nothing is left. */
-  entries: ReadonlyArray<Entry>;
+  entries: readonly Entry[];
   variant?: Variant;
   /** Each entry in full on two lines: when and who, then what, wrapping as long as it runs.
    *  For an activity log whose words matter more than a tidy column. */
@@ -43,29 +42,38 @@ const entryView =
   (entry: Entry): Html =>
     h.keyed("li")(
       entry.id,
-      entry.isCurrent === true ? [h.AriaCurrent("true"), h.Class("current")] : [],
+      entry.isCurrent === true
+        ? [h.AriaCurrent("true"), h.Class("current")]
+        : [],
       [
         h.span([h.Class("v tnum")], entry.at),
-        ...(entry.who === undefined ? [] : [h.span([h.Class("who")], entry.who)]),
+        ...(entry.who === undefined
+          ? []
+          : [h.span([h.Class("who")], entry.who)]),
         entry.isFailed === true
           ? h.span(
               [h.Class("what failed")],
-              [...entry.what, h.span([h.Class("sr-only")], [" (failed)"])],
+              [...entry.what, h.span([h.Class("sr-only")], [" (failed)"])]
             )
           : h.span([h.Class("what")], entry.what),
         ...(entry.actions ?? []),
-      ],
+      ]
     );
 
 /** A ruled log, in an ordered list: when, who, what, and the controls for each entry. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { entries, variant = "Versions", isWrapped = false, label } = config;
 
   return h.ol(
     [
       ...(label === undefined ? [] : [h.AriaLabel(label)]),
-      h.Class(`history-list${variant === "Checks" ? " checks" : ""}${isWrapped ? " wrapped" : ""}`),
+      h.Class(
+        `history-list${variant === "Checks" ? " checks" : ""}${isWrapped ? " wrapped" : ""}`
+      ),
     ],
-    Array.map(entries, entryView(h)),
+    Array.map(entries, entryView(h))
   );
 };

package/src/history/index.ts

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

package/src/{iconButton/iconButton.ts → icon-button/icon-button.ts}

@@ -5,9 +5,7 @@ import type { Attributes } from "../attributes/attributes.ts";
 import type { KeyHintConfig } from "../button/button.ts";
 import * as Glyph from "../glyph/glyph.ts";
 import type { GlyphName } from "../glyph/glyphs.ts";
-import { keyLabel } from "../keyHint/keyLabel.ts";
-
-// VIEW
+import { keyLabel } from "../key-hint/key-label.ts";
 
 /** Configuration for rendering an icon button with `view`. */
 export type ViewConfig<Message> = Readonly<{
@@ -28,7 +26,10 @@ export type ViewConfig<Message> = Readonly<{
 
 /** A bare glyph button, 24px square. Its label is its accessible name and its tip, and its
  *  key, where it has one, prints in the tip after the label. */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const {
     glyph,
     label,
@@ -52,12 +53,17 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
             h.DataAttribute("tip", label),
             ...(keyHint === undefined
               ? []
-              : [h.DataAttribute("tip-key", keyLabel(keyHint.keys, keyHint.platform))]),
+              : [
+                  h.DataAttribute(
+                    "tip-key",
+                    keyLabel(keyHint.keys, keyHint.platform)
+                  ),
+                ]),
             h.Class(isQuiet ? "iconbtn quiet" : "iconbtn"),
           ],
-          [Glyph.view({ name: glyph }, h)],
+          [Glyph.view({ name: glyph }, h)]
         ),
     },
-    h,
+    h
   );
 };

package/src/icon-button/index.ts

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

package/src/identity/identity.ts

@@ -3,8 +3,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 import * as Monogram from "../monogram/monogram.ts";
 import { slotView } from "../slot/slot.ts";
 
-// VIEW
-
 /** Configuration for rendering an identity with `view`. */
 export type ViewConfig = Readonly<{
   /** Whose: a person, a client, a provider, a source. */
@@ -21,7 +19,10 @@ export type ViewConfig = Readonly<{
 
 /** Who or what something is: its monogram beside its name in the sans, and a meta line.
  *  Screen readers hear the name once: the monogram beside it is hidden from them. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { label, letters, drawing, meta = [], isLarge = false } = config;
 
   return h.div(
@@ -35,12 +36,12 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
           isLarge,
           isDecorative: true,
         },
-        h,
+        h
       ),
       h.span(
         [h.Class("identity-text")],
-        [h.strong([], [label]), ...slotView("span", "meta", meta, h)],
+        [h.strong([], [label]), ...slotView("span", "meta", meta, h)]
       ),
-    ],
+    ]
   );
 };

package/src/identity/index.ts

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

package/src/{imageFrame/imageFrame.ts → image-frame/image-frame.ts}

@@ -8,13 +8,12 @@ import * as Glyph from "../glyph/glyph.ts";
 import * as Media from "../media/media.ts";
 import * as Notice from "../notice/notice.ts";
 
-// BROKEN
-
 /** The Message `DetectBrokenImage` reports before the view maps it to the caller's
  *  `onBroken`. */
 export const Message = defineMessageUnion({
   CompletedDetectBrokenImage: {},
 });
+
 export type Message = typeof Message.Type;
 
 /** Reports a picture that cannot load: one whose error comes after it mounts, and one that
@@ -22,26 +21,38 @@ export type Message = typeof Message.Type;
 export const DetectBrokenImage = Mount.define("DetectBrokenImage", {
   messages: [Message.CompletedDetectBrokenImage],
   execute: ({ element }) =>
-    Effect.callback<typeof Message.CompletedDetectBrokenImage.Type>((resume) => {
-      const isAlreadyBroken =
-        element instanceof HTMLImageElement && element.complete && element.naturalWidth === 0;
+    Effect.callback<typeof Message.CompletedDetectBrokenImage.Type>(
+      (resume) => {
+        const isAlreadyBroken =
+          element instanceof HTMLImageElement &&
+          element.complete &&
+          element.naturalWidth === 0;
 
-      if (isAlreadyBroken) {
-        resume(Effect.succeed(Message.CompletedDetectBrokenImage()));
-        return;
-      }
+        if (isAlreadyBroken) {
+          resume(Effect.succeed(Message.CompletedDetectBrokenImage()));
 
-      const onError = (): void => resume(Effect.succeed(Message.CompletedDetectBrokenImage()));
-      element.addEventListener("error", onError, { once: true });
-      return Effect.sync(() => element.removeEventListener("error", onError));
-    }),
-});
+          return;
+        }
+
+        const onError = (): void => {
+          resume(Effect.succeed(Message.CompletedDetectBrokenImage()));
+        };
+
+        element.addEventListener("error", onError, { once: true });
 
-// VIEW
+        return Effect.sync(() => {
+          element.removeEventListener("error", onError);
+        });
+      }
+    ),
+});
 
 const WAIT_GLYPH_SIZE = 24;
 
-const HELD_CLASS: Record<Media.Held, string> = { Loading: "waiting", Broken: "broken" };
+const HELD_CLASS: Record<Media.Held, string> = {
+  Loading: "waiting",
+  Broken: "broken",
+};
 
 /** Configuration for rendering an image frame with `view`. */
 export type ViewConfig<Message> = Readonly<{
@@ -76,7 +87,10 @@ export type ViewConfig<Message> = Readonly<{
  * frame turns red and says so in an alert with the alt text. It sits at rest, in a panel or in
  * prose: no print shadow. Lazy and decoded off the main thread unless `isEager`.
  */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const {
     src,
     alt,
@@ -88,6 +102,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
     onBroken,
     onRetry,
   } = config;
+
   const isBroken = held === "Broken";
 
   const imageView = h.img([
@@ -112,11 +127,16 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
           actions:
             onRetry === undefined
               ? []
-              : [Button.view({ label: "retry", isSmall: true, onClick: onRetry }, h)],
+              : [
+                  Button.view(
+                    { label: "retry", isSmall: true, onClick: onRetry },
+                    h
+                  ),
+                ],
         },
-        h,
+        h
       ),
-    ],
+    ]
   );
 
   return h.figure(
@@ -130,14 +150,12 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
         [
           h.span(
             [h.Class("image-wait"), h.AriaHidden(true)],
-            [Glyph.view({ name: "image", size: WAIT_GLYPH_SIZE }, h)],
+            [Glyph.view({ name: "image", size: WAIT_GLYPH_SIZE }, h)]
           ),
-          // NOTE: a broken frame drops its picture, so a retry is a new element and the
-          // browser asks for the picture again.
           ...(isBroken ? [brokenView] : [imageView]),
-        ],
+        ]
       ),
       ...Media.captionView(caption, credit, h),
-    ],
+    ]
   );
 };

package/src/image-frame/index.ts

@@ -0,0 +1,3 @@
+export { DetectBrokenImage, view } from "./image-frame.ts";
+
+export type { ViewConfig } from "./image-frame.ts";

package/src/index.ts

@@ -1,99 +1,197 @@
 export * as Announcer from "./announcer/index.ts";
-export * as AudioFrame from "./audioFrame/index.ts";
+
+export * as AudioFrame from "./audio-frame/index.ts";
+
 export * as Banner from "./banner/index.ts";
-export * as BarChart from "./barChart/index.ts";
+
+export * as BarChart from "./bar-chart/index.ts";
+
 export * as Bench from "./bench/index.ts";
+
 export * as Board from "./board/index.ts";
+
 export * as Button from "./button/index.ts";
+
 export * as Card from "./card/index.ts";
+
 export * as Chip from "./chip/index.ts";
+
 export * as Choice from "./choice/index.ts";
+
 export * as Choices from "./choices/index.ts";
-export * as CodeEditor from "./codeEditor/index.ts";
-export * as CodeSurface from "./codeSurface/index.ts";
-export * as CommandPalette from "./commandPalette/index.ts";
-export * as ConfirmDialog from "./confirmDialog/index.ts";
-export * as ContextMenu from "./contextMenu/index.ts";
-export * as CopyButton from "./copyButton/index.ts";
+
+export * as CodeEditor from "./code-editor/index.ts";
+
+export * as CodeSurface from "./code-surface/index.ts";
+
+export * as CommandPalette from "./command-palette/index.ts";
+
+export * as ConfirmDialog from "./confirm-dialog/index.ts";
+
+export * as ContextMenu from "./context-menu/index.ts";
+
+export * as CopyButton from "./copy-button/index.ts";
+
 export * as Crumbs from "./crumbs/index.ts";
+
 export * as Deck from "./deck/index.ts";
+
 export * as Dialog from "./dialog/index.ts";
+
 export * as Disclosure from "./disclosure/index.ts";
-export * as DropZone from "./dropZone/index.ts";
-export * as EditableTitle from "./editableTitle/index.ts";
-export * as EmptyState from "./emptyState/index.ts";
-export * as ErrorSummary from "./errorSummary/index.ts";
+
+export * as DropZone from "./drop-zone/index.ts";
+
+export * as EditableTitle from "./editable-title/index.ts";
+
+export * as EmptyState from "./empty-state/index.ts";
+
+export * as ErrorSummary from "./error-summary/index.ts";
+
 export * as Field from "./field/index.ts";
-export * as FieldGrid from "./fieldGrid/index.ts";
+
+export * as FieldGrid from "./field-grid/index.ts";
+
 export * as Fields from "./fields/index.ts";
+
 export * as Fieldset from "./fieldset/index.ts";
-export * as FileTree from "./fileTree/index.ts";
-export * as FilterChip from "./filterChip/index.ts";
-export * as FilterStrip from "./filterStrip/index.ts";
-export * as FlashWord from "./flashWord/index.ts";
+
+export * as FileTree from "./file-tree/index.ts";
+
+export * as FilterChip from "./filter-chip/index.ts";
+
+export * as FilterStrip from "./filter-strip/index.ts";
+
+export * as FlashWord from "./flash-word/index.ts";
+
 export * as Focus from "./focus/index.ts";
+
 export * as Format from "./format/index.ts";
+
 export * as Glyph from "./glyph/index.ts";
+
 export * as Group from "./group/index.ts";
+
 export * as History from "./history/index.ts";
-export * as IconButton from "./iconButton/index.ts";
+
+export * as IconButton from "./icon-button/index.ts";
+
 export * as Identity from "./identity/index.ts";
-export * as ImageFrame from "./imageFrame/index.ts";
-export * as InlineInput from "./inlineInput/index.ts";
-export * as KeyHelp from "./keyHelp/index.ts";
-export * as KeyHint from "./keyHint/index.ts";
+
+export * as ImageFrame from "./image-frame/index.ts";
+
+export * as InlineInput from "./inline-input/index.ts";
+
+export * as KeyHelp from "./key-help/index.ts";
+
+export * as KeyHint from "./key-hint/index.ts";
+
 export * as Keymap from "./keymap/index.ts";
-export * as LineChart from "./lineChart/index.ts";
-export * as LineDiff from "./lineDiff/index.ts";
-export * as LinkButton from "./linkButton/index.ts";
-export * as LinkState from "./linkState/index.ts";
-export * as LiveRegion from "./liveRegion/index.ts";
+
+export * as LineChart from "./line-chart/index.ts";
+
+export * as LineDiff from "./line-diff/index.ts";
+
+export * as LinkButton from "./link-button/index.ts";
+
+export * as LinkState from "./link-state/index.ts";
+
+export * as LiveRegion from "./live-region/index.ts";
+
 export * as Loading from "./loading/index.ts";
+
 export * as Mark from "./mark/index.ts";
+
 export * as Media from "./media/index.ts";
+
 export * as Menu from "./menu/index.ts";
+
 export * as Meter from "./meter/index.ts";
+
 export * as Monogram from "./monogram/index.ts";
-export * as NavStrip from "./navStrip/index.ts";
+
+export * as NavStrip from "./nav-strip/index.ts";
+
 export * as Notice from "./notice/index.ts";
+
 export * as Outcome from "./outcome/index.ts";
-export * as PageHead from "./pageHead/index.ts";
+
+export * as PageHead from "./page-head/index.ts";
+
 export * as Panel from "./panel/index.ts";
-export * as PasswordField from "./passwordField/index.ts";
+
+export * as PasswordField from "./password-field/index.ts";
+
 export * as Places from "./places/index.ts";
-export * as PropsList from "./propsList/index.ts";
+
+export * as PropsList from "./props-list/index.ts";
+
 export * as Prose from "./prose/index.ts";
-export * as QueryChip from "./queryChip/index.ts";
-export * as RadioChoices from "./radioChoices/index.ts";
+
+export * as QueryChip from "./query-chip/index.ts";
+
+export * as RadioChoices from "./radio-choices/index.ts";
+
 export * as Rail from "./rail/index.ts";
+
 export * as Reel from "./reel/index.ts";
+
 export * as Remote from "./remote/index.ts";
+
 export * as Rows from "./rows/index.ts";
+
 export * as Scheme from "./scheme/index.ts";
+
 export * as Secret from "./secret/index.ts";
+
 export * as Segmented from "./segmented/index.ts";
-export * as SelectAll from "./selectAll/index.ts";
-export * as SelectField from "./selectField/index.ts";
+
+export * as SelectAll from "./select-all/index.ts";
+
+export * as SelectField from "./select-field/index.ts";
+
 export * as Sheet from "./sheet/index.ts";
-export * as SkipLink from "./skipLink/index.ts";
+
+export * as SkipLink from "./skip-link/index.ts";
+
 export * as Sortable from "./sortable/index.ts";
+
 export * as Stack from "./stack/index.ts";
+
 export * as Stage from "./stage/index.ts";
+
 export * as Stat from "./stat/index.ts";
-export * as StatusBar from "./statusBar/index.ts";
+
+export * as StatusBar from "./status-bar/index.ts";
+
 export * as Table from "./table/index.ts";
+
 export * as Tabs from "./tabs/index.ts";
+
 export * as Tag from "./tag/index.ts";
-export * as TextareaField from "./textareaField/index.ts";
-export * as TextButton from "./textButton/index.ts";
+
+export * as TextareaField from "./textarea-field/index.ts";
+
+export * as TextButton from "./text-button/index.ts";
+
 export * as Time from "./time/index.ts";
+
 export * as Tips from "./tips/index.ts";
+
 export * as Toast from "./toast/index.ts";
+
 export * as Toc from "./toc/index.ts";
+
 export * as Toolbar from "./toolbar/index.ts";
-export * as TopBar from "./topBar/index.ts";
-export * as VideoFrame from "./videoFrame/index.ts";
+
+export * as TopBar from "./top-bar/index.ts";
+
+export * as VideoFrame from "./video-frame/index.ts";
+
 export * as Wall from "./wall/index.ts";
+
 export * as Window from "./window/index.ts";
+
 export * as Wordmark from "./wordmark/index.ts";
+
 export * as Wrap from "./wrap/index.ts";

package/src/{inlineInput → inline-input}/index.ts

@@ -12,5 +12,6 @@ export {
   succeeded,
   update,
   view,
-} from "./inlineInput.ts";
-export type { InitConfig, Size, ViewInputs } from "./inlineInput.ts";
+} from "./inline-input.ts";
+
+export type { InitConfig, Size, ViewInputs } from "./inline-input.ts";