@uniflowed/web 0.34.0 → 0.36.0

package/cookie.js

@@ -31,10 +31,10 @@ import * as React from "@uniflowed/react";
 /** How a cookie is written, in the browser. */
 export type CookieOptions = {
   /** Seconds until it expires. Absent means a session cookie. */
-  readonly maxAge?: number,
-  readonly path?: string,
+  readonly maxAge?  : number,
+  readonly path?    : string,
   readonly sameSite?: "lax" | "strict" | "none",
-  readonly secure?: boolean,
+  readonly secure?  : boolean,
 };
 
 /** Where a server-rendered page's cookies are handed to the client half. */

package/head.js

@@ -36,23 +36,23 @@ import * as React from "@uniflowed/react";
 
 /** One `<meta>`, by whichever attribute names it. */
 export type Meta = {
-  readonly name?: string,
+  readonly name?    : string,
   readonly property?: string,
-  readonly content: string,
+  readonly content  : string,
 };
 
 /** One `<link>`. */
 export type Link = {
-  readonly rel: string,
-  readonly href: string,
-  readonly type?: string,
+  readonly rel   : string,
+  readonly href  : string,
+  readonly type? : string,
   readonly sizes?: string,
 };
 
 /** What a component wants in the head. */
 export type Head = {
   readonly title?: string,
-  readonly meta?: $ReadOnlyArray<Meta>,
+  readonly meta? : $ReadOnlyArray<Meta>,
   readonly links?: $ReadOnlyArray<Link>,
 };
 

package/internal/image-endpoint.js

@@ -35,7 +35,7 @@ export type ImageEndpoint = {|
  * `@uniflowed/server/image`'s.
  */
 export const IMAGE_ENDPOINT: ImageEndpoint = {
-  path: null,
-  widths: [640, 750, 828, 1080, 1200, 1440, 1920],
+  path   : null,
+  widths : [640, 750, 828, 1080, 1200, 1440, 1920],
   quality: 75,
 };

package/internal/remote-image.js

@@ -17,10 +17,10 @@ import type { ImageEndpoint } from "./image-endpoint.js";
  * `null` when the project has no endpoint, or the URL is not one it fetches.
  */
 export function remoteSources(
-  endpoint: ImageEndpoint,
-  src: string,
+  endpoint : ImageEndpoint,
+  src      : string,
   intrinsic: number,
-  quality: number,
+  quality  : number,
 ): {| readonly src: string, readonly srcSet: string |} | null {
   const path = endpoint.path;
   if (path == null) return null;
@@ -36,7 +36,7 @@ export function remoteSources(
   const rungs = widths.filter((width) => width < cover).map((width) => [width, width]);
   rungs.push([cover, Math.min(cover, intrinsic)]);
   return {
-    src: at(cover),
+    src   : at(cover),
     srcSet: rungs.map(([asked, described]) => `${at(asked)} ${described}w`).join(", "),
   };
 }

package/media.js

@@ -70,7 +70,7 @@ export type Loading = "eager" | "lazy";
 /** One alternative rendering of the same image. */
 export type Source = {
   readonly srcSet: string,
-  readonly type?: string,
+  readonly type? : string,
   readonly media?: string,
 };
 
@@ -236,20 +236,20 @@ function defaultSizes(width: number): string {
  * was written.
  */
 export component Image(
-  src: string | ImageAsset,
-  alt: string,
-  width?: number,
-  height?: number,
-  loading?: Loading,
-  priority?: boolean = false,
-  sizes?: string,
-  srcSet?: string,
+  src         : string | ImageAsset,
+  alt         : string,
+  width?      : number,
+  height?     : number,
+  loading?    : Loading,
+  priority?   : boolean = false,
+  sizes?      : string,
+  srcSet?     : string,
   placeholder?: boolean = true,
-  quality?: number,
+  quality?    : number,
   unoptimized?: boolean = false,
-  className?: string,
-  style?: { readonly [string]: string | number },
-  ...rest: ReactTypes.ElementConfig<"img">
+  className?  : string,
+  style?      : { readonly [string]: string | number },
+  ...rest     : ReactTypes.ElementConfig<"img">
 ) {
   // Refined rather than cast: `src` is a union and `typeof` narrows it, so
   // neither branch needs `any`. A cast here would be the one place in this
@@ -316,8 +316,8 @@ export component Image(
               // reader, and the browser paints over it as the real image
               // decodes instead of swapping one node for another.
               ...style,
-              backgroundImage: style?.backgroundImage ?? `url("${blur}")`,
-              backgroundSize: style?.backgroundSize ?? "cover",
+              backgroundImage   : style?.backgroundImage ?? `url("${blur}")`,
+              backgroundSize    : style?.backgroundSize ?? "cover",
               backgroundPosition: style?.backgroundPosition ?? "center",
             }
       }
@@ -386,12 +386,12 @@ export component Image(
  * mistake that only shows up in the one browser that took none of the sources.
  */
 export component Picture(
-  src: string,
-  alt: string,
-  width: number,
-  height: number,
-  sources?: $ReadOnlyArray<Source> = [],
-  loading?: Loading = "lazy",
+  src       : string,
+  alt       : string,
+  width     : number,
+  height    : number,
+  sources?  : $ReadOnlyArray<Source> = [],
+  loading?  : Loading = "lazy",
   className?: string,
 ) {
   return (
@@ -473,10 +473,10 @@ export component Picture(
  * request.
  */
 export component Font(
-  src: string | FontAsset,
-  type?: string,
+  src         : string | FontAsset,
+  type?       : string,
   crossOrigin?: "anonymous" | "use-credentials" = "anonymous",
-  preload?: boolean,
+  preload?    : boolean,
 ) {
   const asset: FontAsset | null = typeof src === "string" ? null : src;
   const url: string = typeof src === "string" ? src : src.src;
@@ -599,13 +599,13 @@ export component IconSprite(sprite: SpriteAsset) {
  * when that is what you mean.
  */
 export component Icon(
-  icon: IconAsset,
-  label?: string,
-  size?: number = 24,
-  width?: number,
-  height?: number,
+  icon      : IconAsset,
+  label?    : string,
+  size?     : number = 24,
+  width?    : number,
+  height?   : number,
   className?: string,
-  ...rest: ReactTypes.ElementConfig<"svg">
+  ...rest   : ReactTypes.ElementConfig<"svg">
 ) {
   return (
     <svg

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/web",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "description": "The primitives a web page is built from, for the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -25,8 +25,8 @@
     "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.34.0",
-    "@uniflowed/hooks": "0.34.0",
-    "@uniflowed/react": "0.34.0"
+    "@uniflowed/core": "0.36.0",
+    "@uniflowed/hooks": "0.36.0",
+    "@uniflowed/react": "0.36.0"
   }
 }

package/regions.js

@@ -45,17 +45,17 @@ const MAIN_ID: string = "uf-main";
  */
 const VISUALLY_HIDDEN = {
   position: "absolute",
-  width: "1px",
-  height: "1px",
-  margin: "-1px",
-  padding: 0,
+  width   : "1px",
+  height  : "1px",
+  margin  : "-1px",
+  padding : 0,
   overflow: "hidden",
   // Both spellings: `clip` is deprecated and still the one older screen
   // readers honour.
-  clip: "rect(0 0 0 0)",
-  clipPath: "inset(50%)",
+  clip      : "rect(0 0 0 0)",
+  clipPath  : "inset(50%)",
   whiteSpace: "nowrap",
-  border: 0,
+  border    : 0,
 };
 
 /**
@@ -73,8 +73,8 @@ const VISUALLY_HIDDEN = {
  */
 export component Announcer(
   children?: React.Node,
-  urgency?: "polite" | "assertive" = "polite",
-  atomic?: boolean = true,
+  urgency? : "polite" | "assertive" = "polite",
+  atomic?  : boolean = true,
 ) {
   return (
     <div aria-live={urgency} aria-atomic={atomic} style={VISUALLY_HIDDEN}>
@@ -122,17 +122,17 @@ export component SkipLink(children?: React.Node = "Skip to content") {
         focused
           ? {
               position: "absolute",
-              top: "0.5rem",
-              left: "0.5rem",
+              top     : "0.5rem",
+              left    : "0.5rem",
               // Above anything a page is likely to have stacked, since the
               // link has to be readable wherever it lands.
-              zIndex: 1000,
-              padding: "0.5rem 0.75rem",
+              zIndex    : 1000,
+              padding   : "0.5rem 0.75rem",
               background: "Canvas",
-              color: "CanvasText",
+              color     : "CanvasText",
               // `CanvasText` follows the reader's own light or dark setting,
               // so the link stays legible without knowing the page's theme.
-              border: "1px solid CanvasText",
+              border      : "1px solid CanvasText",
               borderRadius: "0.25rem",
             }
           : VISUALLY_HIDDEN

package/time.js

@@ -154,10 +154,10 @@ export function relative(at: TimeValue, from?: TimeValue): string {
  * would defeat the entire component.
  */
 export component Time(
-  value: TimeValue,
-  format?: TimeFormat = "iso",
-  zone?: string,
-  locale?: string,
+  value     : TimeValue,
+  format?   : TimeFormat = "iso",
+  zone?     : string,
+  locale?   : string,
   className?: string,
 ) {
   const at = asInstant(value);

package/vitals.js

@@ -95,8 +95,8 @@ export type NavigationType = "navigate" | "reload" | "back-forward" | "prerender
 export type Vital = {
   readonly name: VitalName,
   /** Milliseconds, except `CLS`, which is a unitless layout-shift score. */
-  readonly value: number,
-  readonly rating: Rating,
+  readonly value         : number,
+  readonly rating        : Rating,
   readonly navigationType: NavigationType,
 };
 
@@ -111,7 +111,7 @@ export type VitalsReporter = (vital: Vital) => void;
  * identifies the page rather than the report.
  */
 export type VitalsReport = {
-  readonly url: string,
+  readonly url   : string,
   readonly vitals: $ReadOnlyArray<Vital>,
 };
 
@@ -167,10 +167,10 @@ function defaultVitalsTarget(): string {
  */
 const THRESHOLDS: { readonly [VitalName]: { readonly good: number, readonly poor: number } } = {
   TTFB: { good: 800, poor: 1800 },
-  FCP: { good: 1800, poor: 3000 },
-  LCP: { good: 2500, poor: 4000 },
-  CLS: { good: 0.1, poor: 0.25 },
-  INP: { good: 200, poor: 500 },
+  FCP : { good: 1800, poor: 3000 },
+  LCP : { good: 2500, poor: 4000 },
+  CLS : { good: 0.1, poor: 0.25 },
+  INP : { good: 200, poor: 500 },
 };
 
 /**
@@ -210,9 +210,9 @@ const INTERACTIONS_PER_STEP: number = 50;
 /** The part of a performance entry this module reads. */
 type TimingEntry = {
   readonly entryType: string,
-  readonly name: string,
+  readonly name     : string,
   readonly startTime: number,
-  readonly duration: number,
+  readonly duration : number,
   /** `layout-shift`: how much moved. */
   readonly value?: number,
   /** `layout-shift`: whether a reader had just done something. */
@@ -237,7 +237,7 @@ type EntryList = { readonly getEntries: () => $ReadOnlyArray<TimingEntry>, ... }
 
 /** The part of a live observer this module uses. */
 type ObserverHandle = {
-  readonly observe: (options: { readonly [string]: mixed }) => mixed,
+  readonly observe   : (options: { readonly [string]: mixed }) => mixed,
   readonly disconnect: () => mixed,
   ...
 };
@@ -249,7 +249,7 @@ type ObserverHandle = {
  * page is over" are not dispatched on the same object.
  */
 type Listens = {
-  readonly addEventListener: (type: string, listener: () => mixed, options?: mixed) => mixed,
+  readonly addEventListener   : (type: string, listener: () => mixed, options?: mixed) => mixed,
   readonly removeEventListener: (type: string, listener: () => mixed, options?: mixed) => mixed,
   ...
 };
@@ -269,8 +269,8 @@ type Listens = {
  */
 type BrowserWindow = {
   readonly document: {
-    readonly visibilityState: string,
-    readonly addEventListener: (type: string, listener: () => mixed, options?: mixed) => mixed,
+    readonly visibilityState    : string,
+    readonly addEventListener   : (type: string, listener: () => mixed, options?: mixed) => mixed,
     readonly removeEventListener: (type: string, listener: () => mixed, options?: mixed) => mixed,
     ...
   },
@@ -290,7 +290,7 @@ type BrowserWindow = {
     readonly supportedEntryTypes?: $ReadOnlyArray<string>,
     ...
   },
-  readonly addEventListener: (type: string, listener: () => mixed, options?: mixed) => mixed,
+  readonly addEventListener   : (type: string, listener: () => mixed, options?: mixed) => mixed,
   readonly removeEventListener: (type: string, listener: () => mixed, options?: mixed) => mixed,
   ...
 };
@@ -335,10 +335,10 @@ function supports(win: BrowserWindow, type: string): boolean {
  * observers hand back checked.
  */
 function observeEntries(
-  win: BrowserWindow,
-  type: string,
+  win      : BrowserWindow,
+  type     : string,
   onEntries: (entries: $ReadOnlyArray<TimingEntry>) => void,
-  extra?: { readonly [string]: mixed },
+  extra?   : { readonly [string]: mixed },
 ): ObserverHandle | null {
   const Observer = win.PerformanceObserver;
   if (Observer == null || !supports(win, type)) {
@@ -730,7 +730,7 @@ export function vitalsBeacon(endpoint?: string): VitalsReporter {
         method: "POST",
         body,
         keepalive: true,
-        headers: { "content-type": "application/json" },
+        headers  : { "content-type": "application/json" },
       }).catch(noop);
     }
   };