@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.0

package/dist/menu/item.d.ts

@@ -0,0 +1,236 @@
+import { KeyHintConfig } from "../button/button.js";
+import { Data } from "effect";
+/** One entry in a menu. Build them with `action`, `radio`, `check`, `link` and `group`. */
+export type Item = Data.TaggedEnum<{
+  /** An action (`role="menuitem"`): choosing it reports `Selected` with its id and closes the
+   *  slip. */
+  Action: {
+    readonly id: string;
+    readonly label: string;
+    /** The key that does the same, printed at the right. */
+    readonly keyHint?: KeyHintConfig;
+    /** Visible but not possible now (`aria-disabled`): it prints muted, the arrows still stop
+     *  on it (the ARIA menu pattern), and choosing it does nothing. */
+    readonly isDisabled?: boolean;
+  };
+  /** One choice among its siblings (`role="menuitemradio"`, `aria-checked`): a palette, an
+   *  area, a layout. The checked one prints inverted. Choosing it reports `Selected` and
+   *  closes the slip; the parent moves the check. Put a set of them in a `group`. */
+  Radio: {
+    readonly id: string;
+    readonly label: string;
+    readonly isChecked: boolean;
+  };
+  /** A setting that toggles (`role="menuitemcheckbox"`, `aria-checked`): choosing it reports
+   *  `Toggled` and keeps the slip open; the parent flips the value it keeps. */
+  Check: {
+    readonly id: string;
+    readonly label: string;
+    readonly isChecked: boolean;
+  };
+  /** A place to go: a real link (`<a role="menuitem">`), so a new tab can open it. Choosing it
+   *  follows the link, closes the slip and reports `Selected`. */
+  Link: {
+    readonly id: string;
+    readonly label: string;
+    readonly href: string;
+  };
+  /** Items under a heading (`role="group"`, named by the heading): `"Appearance"` over the
+   *  palettes, `"Account"` over sign out. A set of radio items belongs in one. The label is
+   *  the group's identity in its slip: two groups there do not share one. */
+  Group: {
+    readonly label: string;
+    readonly items: readonly Entry[];
+  };
+}>;
+/** One row of a menu or of a group: any item but a group. */
+export type Entry = Exclude<Item, {
+  readonly _tag: "Group";
+}>;
+/** The constructors, guards (`$is`) and matcher (`$match`) of `Item`. */
+export declare const Item: {
+  readonly $is: <Tag extends "Action" | "Check" | "Group" | "Link" | "Radio">(tag: Tag) => (u: unknown) => u is Extract<{
+    readonly _tag: "Action";
+    readonly id: string;
+    readonly label: string;
+    readonly keyHint?: KeyHintConfig;
+    readonly isDisabled?: boolean;
+  }, {
+    readonly _tag: Tag;
+  }> | Extract<{
+    readonly _tag: "Check";
+    readonly id: string;
+    readonly label: string;
+    readonly isChecked: boolean;
+  }, {
+    readonly _tag: Tag;
+  }> | Extract<{
+    readonly _tag: "Group";
+    readonly label: string;
+    readonly items: readonly Entry[];
+  }, {
+    readonly _tag: Tag;
+  }> | Extract<{
+    readonly _tag: "Link";
+    readonly id: string;
+    readonly label: string;
+    readonly href: string;
+  }, {
+    readonly _tag: Tag;
+  }> | Extract<{
+    readonly _tag: "Radio";
+    readonly id: string;
+    readonly label: string;
+    readonly isChecked: boolean;
+  }, {
+    readonly _tag: Tag;
+  }>;
+  readonly $match: {
+    <Cases extends { readonly [Tag in "Action" | "Check" | "Group" | "Link" | "Radio"]: (args: Extract<{
+      readonly _tag: "Action";
+      readonly id: string;
+      readonly label: string;
+      readonly keyHint?: KeyHintConfig;
+      readonly isDisabled?: boolean;
+    } | {
+      readonly _tag: "Check";
+      readonly id: string;
+      readonly label: string;
+      readonly isChecked: boolean;
+    } | {
+      readonly _tag: "Group";
+      readonly label: string;
+      readonly items: readonly Entry[];
+    } | {
+      readonly _tag: "Link";
+      readonly id: string;
+      readonly label: string;
+      readonly href: string;
+    } | {
+      readonly _tag: "Radio";
+      readonly id: string;
+      readonly label: string;
+      readonly isChecked: boolean;
+    }, {
+      readonly _tag: Tag;
+    }>) => any; }>(cases: Cases): (value: {
+      readonly _tag: "Action";
+      readonly id: string;
+      readonly label: string;
+      readonly keyHint?: KeyHintConfig;
+      readonly isDisabled?: boolean;
+    } | {
+      readonly _tag: "Check";
+      readonly id: string;
+      readonly label: string;
+      readonly isChecked: boolean;
+    } | {
+      readonly _tag: "Group";
+      readonly label: string;
+      readonly items: readonly Entry[];
+    } | {
+      readonly _tag: "Link";
+      readonly id: string;
+      readonly label: string;
+      readonly href: string;
+    } | {
+      readonly _tag: "Radio";
+      readonly id: string;
+      readonly label: string;
+      readonly isChecked: boolean;
+    }) => import("effect/Unify").Unify<ReturnType<Cases["Action" | "Check" | "Group" | "Link" | "Radio"]>>;
+    <Cases extends { readonly [Tag in "Action" | "Check" | "Group" | "Link" | "Radio"]: (args: Extract<{
+      readonly _tag: "Action";
+      readonly id: string;
+      readonly label: string;
+      readonly keyHint?: KeyHintConfig;
+      readonly isDisabled?: boolean;
+    } | {
+      readonly _tag: "Check";
+      readonly id: string;
+      readonly label: string;
+      readonly isChecked: boolean;
+    } | {
+      readonly _tag: "Group";
+      readonly label: string;
+      readonly items: readonly Entry[];
+    } | {
+      readonly _tag: "Link";
+      readonly id: string;
+      readonly label: string;
+      readonly href: string;
+    } | {
+      readonly _tag: "Radio";
+      readonly id: string;
+      readonly label: string;
+      readonly isChecked: boolean;
+    }, {
+      readonly _tag: Tag;
+    }>) => any; }>(value: {
+      readonly _tag: "Action";
+      readonly id: string;
+      readonly label: string;
+      readonly keyHint?: KeyHintConfig;
+      readonly isDisabled?: boolean;
+    } | {
+      readonly _tag: "Check";
+      readonly id: string;
+      readonly label: string;
+      readonly isChecked: boolean;
+    } | {
+      readonly _tag: "Group";
+      readonly label: string;
+      readonly items: readonly Entry[];
+    } | {
+      readonly _tag: "Link";
+      readonly id: string;
+      readonly label: string;
+      readonly href: string;
+    } | {
+      readonly _tag: "Radio";
+      readonly id: string;
+      readonly label: string;
+      readonly isChecked: boolean;
+    }, cases: Cases): import("effect/Unify").Unify<ReturnType<Cases["Action" | "Check" | "Group" | "Link" | "Radio"]>>;
+  };
+  readonly Action: Data.TaggedEnum.ConstructorFrom<{
+    readonly _tag: "Action";
+    readonly id: string;
+    readonly label: string;
+    readonly keyHint?: KeyHintConfig;
+    readonly isDisabled?: boolean;
+  }, "_tag">;
+  readonly Check: Data.TaggedEnum.ConstructorFrom<{
+    readonly _tag: "Check";
+    readonly id: string;
+    readonly label: string;
+    readonly isChecked: boolean;
+  }, "_tag">;
+  readonly Group: Data.TaggedEnum.ConstructorFrom<{
+    readonly _tag: "Group";
+    readonly label: string;
+    readonly items: readonly Entry[];
+  }, "_tag">;
+  readonly Link: Data.TaggedEnum.ConstructorFrom<{
+    readonly _tag: "Link";
+    readonly id: string;
+    readonly label: string;
+    readonly href: string;
+  }, "_tag">;
+  readonly Radio: Data.TaggedEnum.ConstructorFrom<{
+    readonly _tag: "Radio";
+    readonly id: string;
+    readonly label: string;
+    readonly isChecked: boolean;
+  }, "_tag">;
+};
+/** An action item; see `Item`'s `Action`. */
+export declare const action: (config: Data.TaggedEnum.Args<Item, "Action">) => Entry;
+/** A radio item; see `Item`'s `Radio`. */
+export declare const radio: (config: Data.TaggedEnum.Args<Item, "Radio">) => Entry;
+/** A check item; see `Item`'s `Check`. */
+export declare const check: (config: Data.TaggedEnum.Args<Item, "Check">) => Entry;
+/** A link item; see `Item`'s `Link`. */
+export declare const link: (config: Data.TaggedEnum.Args<Item, "Link">) => Entry;
+/** A group of items under a heading; see `Item`'s `Group`. */
+export declare const group: (label: string, items: readonly Entry[]) => Item;

package/dist/menu/item.js

@@ -0,0 +1,19 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Data } from "effect";
+// src/menu/item.ts
+/** The constructors, guards (`$is`) and matcher (`$match`) of `Item`. */
+const Item = Data.taggedEnum();
+/** An action item; see `Item`'s `Action`. */
+const action = (config) => __foldkitBrandViewResult((Item.Action(config)), "@gjermundgaraba/pixel-paper/menu/item.js#action");
+/** A radio item; see `Item`'s `Radio`. */
+const radio = (config) => __foldkitBrandViewResult((Item.Radio(config)), "@gjermundgaraba/pixel-paper/menu/item.js#radio");
+/** A check item; see `Item`'s `Check`. */
+const check = (config) => __foldkitBrandViewResult((Item.Check(config)), "@gjermundgaraba/pixel-paper/menu/item.js#check");
+/** A link item; see `Item`'s `Link`. */
+const link = (config) => __foldkitBrandViewResult((Item.Link(config)), "@gjermundgaraba/pixel-paper/menu/item.js#link");
+/** A group of items under a heading; see `Item`'s `Group`. */
+const group = (label, items) => __foldkitBrandViewResult((Item.Group({
+	label,
+	items
+})), "@gjermundgaraba/pixel-paper/menu/item.js#group");
+export { Item, action, check, group, link, radio };

package/dist/menu/menu.d.ts

@@ -0,0 +1,206 @@
+import { GlyphName } from "../glyph/glyphs.js";
+import { Variant } from "../button/button.js";
+import { Item } from "./item.js";
+import { Effect, Option, Schema } from "effect";
+import "foldkit/command";
+import { Html } from "foldkit/html";
+import * as Mount from "foldkit/mount";
+import * as Update from "foldkit/update";
+/** Schema for a menu: its id, whether its slip is open, and which end of the slip takes
+ *  focus as it opens. One Model serves one toggle: a menu on every row of a list is a Model
+ *  per row, each with its own id, never one Model handed from row to row. */
+export declare const Model: Schema.Struct<{
+  readonly id: Schema.String;
+  readonly isOpen: Schema.Boolean;
+  readonly edge: Schema.Literals<readonly ["First", "Last"]>;
+}>;
+export type Model = typeof Model.Type;
+/** Union of all Messages a menu can produce. `LeftSlip` (focus went outside the slip),
+ *  `UnmountedSlip` (the slip left the page) and `CompletedFocus` (focus is back on the
+ *  toggle) can arrive after the menu has closed. Each must reach the Model of the menu that
+ *  sent it, where a late one changes nothing: given to another menu's Model, a late `LeftSlip`
+ *  or `UnmountedSlip` closes that one. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+  readonly ClickedToggle: {};
+  readonly PressedToggleArrow: {
+    edge: Schema.Literals<readonly ["First", "Last"]>;
+  };
+  readonly SelectedItem: {
+    id: Schema.String;
+    kind: Schema.Literals<readonly ["Action", "Radio", "Check", "Link"]>;
+  };
+  readonly PressedEscape: {};
+  readonly PressedTab: {};
+  readonly LeftSlip: {};
+  readonly UnmountedSlip: {};
+  readonly CompletedPlaceSlip: {};
+  readonly CompletedFocus: {};
+  readonly CompletedFocusEdge: {};
+}>;
+export type Message = typeof Message.Type;
+/** Union of OutMessages a menu reports. `Selected`: an action, a radio item or a link was
+ *  chosen and the slip has closed (the browser follows a link itself). `Toggled`: a check item
+ *  was chosen; the slip stays open and the parent flips the value it keeps. */
+export declare const OutMessage: import("foldkit/message").MessageUnion<{
+  readonly Selected: {
+    id: Schema.String;
+  };
+  readonly Toggled: {
+    id: Schema.String;
+  };
+}>;
+export type OutMessage = typeof OutMessage.Type;
+/** Configuration for creating a menu with `init`. The `id` must be unique in the document. */
+export type InitConfig = Readonly<{
+  id: string;
+}>;
+/** Creates a closed menu. */
+export declare const init: (config: InitConfig) => Model;
+/** The menu's id, unique in the document. */
+export declare const id: (model: Model) => string;
+/** Whether the slip is open: a parent pauses its own page keys while it is. */
+export declare const isOpen: (model: Model) => boolean;
+/** Processes a menu Message and returns the next Model, Commands and OutMessage. */
+export declare const update: (model: Model, message: Message) => Readonly<{
+  model: {
+    readonly id: string;
+    readonly isOpen: boolean;
+    readonly edge: "First" | "Last";
+  };
+  commands?: Update.Commands<{
+    readonly _tag: "CompletedFocusEdge";
+  } | {
+    readonly _tag: "ClickedToggle";
+  } | {
+    readonly _tag: "PressedEscape";
+  } | {
+    readonly _tag: "CompletedFocus";
+  } | {
+    readonly _tag: "CompletedPlaceSlip";
+  } | {
+    readonly _tag: "LeftSlip";
+  } | {
+    readonly _tag: "PressedTab";
+  } | {
+    readonly _tag: "PressedToggleArrow";
+    readonly edge: "First" | "Last";
+  } | {
+    readonly _tag: "SelectedItem";
+    readonly id: string;
+    readonly kind: "Action" | "Check" | "Link" | "Radio";
+  } | {
+    readonly _tag: "UnmountedSlip";
+  }, never>;
+  outMessage?: {
+    readonly _tag: "Selected";
+    readonly id: string;
+  } | {
+    readonly _tag: "Toggled";
+    readonly id: string;
+  };
+}>;
+/** ↓ and ↑ on the toggle open the slip on its first or last row (Enter and Space click it),
+ *  their default prevented (see `toggleKey`). In a Scene, resolve it with
+ *  `Message.PressedToggleArrow`. */
+export declare const BindToggleKeys: Mount.MountDefinitionNoArgs<"BindToggleKeys", {
+  readonly _tag: "PressedToggleArrow";
+  readonly edge: "First" | "Last";
+}>;
+/** The open slip: hung under the toggle by `@foldkit/ui`'s Anchor (portaled, into the dialog
+ *  when inside one), focus on its first or last row, and its keys (see `handleSlipKey`). It
+ *  reports `CompletedPlaceSlip` once set up; in a Scene, resolve it with that. */
+export declare const BindSlip: Mount.MountDefinitionWithArgs<"BindSlip", {
+  toggleId: Schema.String;
+  isEnd: Schema.Boolean;
+  edge: Schema.Literals<readonly ["First", "Last"]>;
+}, {
+  readonly _tag: "PressedEscape";
+} | {
+  readonly _tag: "CompletedPlaceSlip";
+} | {
+  readonly _tag: "LeftSlip";
+} | {
+  readonly _tag: "PressedTab";
+}>;
+/** Which edge of the toggle the slip hangs from. */
+export declare const Align: Schema.Literals<readonly ["Start", "End"]>;
+export type Align = typeof Align.Type;
+/** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
+export type ViewInputs = Readonly<{
+  /** The toggle's accessible name, which also names the slip. Printed as its words unless
+   *  `glyph` or `toggleContent` replaces them; then it is the toggle's `aria-label` and tip,
+   *  so start it with any words the content shows. */
+  label: string;
+  items: readonly Item[];
+  /** A glyph toggle (`iconbtn`): the glyph alone, `label` its name and tip. */
+  glyph?: GlyphName;
+  /** A glyph toggle muted until hovered: a row's `more` menu. */
+  isQuiet?: boolean;
+  /** The toggle's own content in place of `label`'s words: a glyph, the current choice's
+   *  title, a count, a caret. A small button with the menu's classes still. Markup that
+   *  carries no handlers: it is built in the application's boundary and rendered inside the
+   *  toggle, in this Submodel's. */
+  toggleContent?: ReadonlyArray<Html | string>;
+  /** The toggle's look when it is a button (`Primary` for a page's main action). */
+  variant?: Exclude<Variant, "Danger">;
+  align?: Align;
+}>;
+/**
+ * A printed slip under its toggle. The toggle is a button, built on `@foldkit/ui`'s Button,
+ * with `aria-haspopup="menu"` and `aria-expanded`; the slip is `role="menu"` named by the
+ * toggle, hung under it above the page (inside the open dialog when there is one), flipping
+ * near the window edge. Its rows
+ * take real focus: the first as it opens (the last on ↑), ↑ and ↓ move and wrap, Home and End
+ * go to the ends, a letter goes to the row it starts, and unavailable rows are stopped on.
+ * Enter, Space or a click chooses; Escape or Tab closes and puts focus back on the toggle; a
+ * click elsewhere closes it, and so does the slip leaving the page while open (the row the menu
+ * sits on is gone). Radio and check rows say `aria-checked`, a link to the current page
+ * `aria-current`. A check row keeps the slip open. The menu does not trap focus, so it
+ * hosts no live region.
+ */
+export declare const view: import("foldkit/submodel").View<{
+  readonly id: string;
+  readonly isOpen: boolean;
+  readonly edge: "First" | "Last";
+}, {
+  readonly _tag: "CompletedFocusEdge";
+} | {
+  readonly _tag: "ClickedToggle";
+} | {
+  readonly _tag: "PressedEscape";
+} | {
+  readonly _tag: "CompletedFocus";
+} | {
+  readonly _tag: "CompletedPlaceSlip";
+} | {
+  readonly _tag: "LeftSlip";
+} | {
+  readonly _tag: "PressedTab";
+} | {
+  readonly _tag: "PressedToggleArrow";
+  readonly edge: "First" | "Last";
+} | {
+  readonly _tag: "SelectedItem";
+  readonly id: string;
+  readonly kind: "Action" | "Check" | "Link" | "Radio";
+} | {
+  readonly _tag: "UnmountedSlip";
+}, Readonly<{
+  /** The toggle's accessible name, which also names the slip. Printed as its words unless
+   *  `glyph` or `toggleContent` replaces them; then it is the toggle's `aria-label` and tip,
+   *  so start it with any words the content shows. */
+  label: string;
+  items: readonly Item[];
+  /** A glyph toggle (`iconbtn`): the glyph alone, `label` its name and tip. */
+  glyph?: GlyphName;
+  /** A glyph toggle muted until hovered: a row's `more` menu. */
+  isQuiet?: boolean;
+  /** The toggle's own content in place of `label`'s words: a glyph, the current choice's
+   *  title, a count, a caret. A small button with the menu's classes still. Markup that
+   *  carries no handlers: it is built in the application's boundary and rendered inside the
+   *  toggle, in this Submodel's. */
+  toggleContent?: ReadonlyArray<Html | string>;
+  /** The toggle's look when it is a button (`Primary` for a page's main action). */
+  variant?: Exclude<Variant, "Danger">;
+  align?: Align;
+}>>;

package/dist/menu/menu.js

@@ -0,0 +1,208 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../glyph/glyph.js";
+import { lookClassName } from "../button/button.js";
+import { isPlain } from "../keys/keys.js";
+import { Focus } from "../focus/focus.js";
+import { ChoiceKind, Edge, anchorUnder, edgeSelector, rowsView, slipStream } from "./slip.js";
+import { Effect, Match, Option, Schema, pipe } from "effect";
+import * as Command from "foldkit/command";
+import { defineMessageUnion } from "foldkit/message";
+import { Button } from "@foldkit/ui";
+import * as Mount from "foldkit/mount";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Update from "foldkit/update";
+import * as Dom from "foldkit/dom";
+// src/menu/menu.ts
+/** Schema for a menu: its id, whether its slip is open, and which end of the slip takes
+*  focus as it opens. One Model serves one toggle: a menu on every row of a list is a Model
+*  per row, each with its own id, never one Model handed from row to row. */
+const Model = Schema.Struct({
+	id: Schema.String,
+	isOpen: Schema.Boolean,
+	edge: Edge
+});
+/** Union of all Messages a menu can produce. `LeftSlip` (focus went outside the slip),
+*  `UnmountedSlip` (the slip left the page) and `CompletedFocus` (focus is back on the
+*  toggle) can arrive after the menu has closed. Each must reach the Model of the menu that
+*  sent it, where a late one changes nothing: given to another menu's Model, a late `LeftSlip`
+*  or `UnmountedSlip` closes that one. */
+const Message = defineMessageUnion({
+	ClickedToggle: {},
+	PressedToggleArrow: { edge: Edge },
+	SelectedItem: {
+		id: Schema.String,
+		kind: ChoiceKind
+	},
+	PressedEscape: {},
+	PressedTab: {},
+	LeftSlip: {},
+	UnmountedSlip: {},
+	CompletedPlaceSlip: {},
+	CompletedFocus: {},
+	CompletedFocusEdge: {}
+});
+/** Union of OutMessages a menu reports. `Selected`: an action, a radio item or a link was
+*  chosen and the slip has closed (the browser follows a link itself). `Toggled`: a check item
+*  was chosen; the slip stays open and the parent flips the value it keeps. */
+const OutMessage = defineMessageUnion({
+	Selected: { id: Schema.String },
+	Toggled: { id: Schema.String }
+});
+/** Creates a closed menu. */
+const init = (config) => (__foldkitBrandViewResult(({
+	id: config.id,
+	isOpen: false,
+	edge: "First"
+}), "@gjermundgaraba/pixel-paper/menu/menu.js#init"));
+/** The menu's id, unique in the document. */
+const id = (model) => __foldkitBrandViewResult((model.id), "@gjermundgaraba/pixel-paper/menu/menu.js#id");
+/** Whether the slip is open: a parent pauses its own page keys while it is. */
+const isOpen = (model) => __foldkitBrandViewResult((model.isOpen), "@gjermundgaraba/pixel-paper/menu/menu.js#isOpen");
+const toggleId = (model) => __foldkitBrandViewResult((`${model.id}-toggle`), "@gjermundgaraba/pixel-paper/menu/menu.js#toggleId");
+const slipId = (model) => __foldkitBrandViewResult((`${model.id}-slip`), "@gjermundgaraba/pixel-paper/menu/menu.js#slipId");
+/** Moves focus to an end of the open slip (↓ or ↑ on the toggle while it is open). */
+const FocusEdge = Command.define("FocusEdge", {
+	args: {
+		slipId: Schema.String,
+		edge: Edge
+	},
+	messages: [Message.CompletedFocusEdge],
+	execute: ({ slipId: openSlipId, edge }) => __foldkitBrandViewResult((Dom.focus(`#${CSS.escape(openSlipId)} ${edgeSelector(edge)}`).pipe(Effect.ignore, Effect.as(Message.CompletedFocusEdge()))), "@gjermundgaraba/pixel-paper/menu/menu.js#execute")
+});
+const opened = (model, edge) => __foldkitBrandViewResult((modifyFields(model, {
+	isOpen: () => __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/menu/menu.js#isOpen~2"),
+	edge: () => __foldkitBrandViewResult((edge), "@gjermundgaraba/pixel-paper/menu/menu.js#edge")
+})), "@gjermundgaraba/pixel-paper/menu/menu.js#opened");
+const closed = (model) => __foldkitBrandViewResult((modifyFields(model, { isOpen: () => __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/menu/menu.js#isOpen~3") })), "@gjermundgaraba/pixel-paper/menu/menu.js#closed");
+const closedWithFocus = (model) => (__foldkitBrandViewResult(({
+	model: closed(model),
+	commands: [Focus({ id: toggleId(model) })]
+}), "@gjermundgaraba/pixel-paper/menu/menu.js#closedWithFocus"));
+/** Processes a menu Message and returns the next Model, Commands and OutMessage. */
+const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
+	ClickedToggle: () => (__foldkitBrandViewResult(({ model: model.isOpen ? closed(model) : opened(model, "First") }), "@gjermundgaraba/pixel-paper/menu/menu.js#ClickedToggle")),
+	PressedToggleArrow: ({ edge }) => __foldkitBrandViewResult((model.isOpen ? {
+		model,
+		commands: [FocusEdge({
+			slipId: slipId(model),
+			edge
+		})]
+	} : { model: opened(model, edge) }), "@gjermundgaraba/pixel-paper/menu/menu.js#PressedToggleArrow"),
+	SelectedItem: ({ id: itemId, kind }) => __foldkitBrandViewResult((kind === "Check" ? {
+		model,
+		outMessage: OutMessage.Toggled({ id: itemId })
+	} : pipe(closedWithFocus(model), Update.withOutMessage(OutMessage.Selected({ id: itemId })))), "@gjermundgaraba/pixel-paper/menu/menu.js#SelectedItem"),
+	PressedEscape: () => __foldkitBrandViewResult((closedWithFocus(model)), "@gjermundgaraba/pixel-paper/menu/menu.js#PressedEscape"),
+	PressedTab: () => __foldkitBrandViewResult((closedWithFocus(model)), "@gjermundgaraba/pixel-paper/menu/menu.js#PressedTab"),
+	LeftSlip: () => (__foldkitBrandViewResult(({ model: closed(model) }), "@gjermundgaraba/pixel-paper/menu/menu.js#LeftSlip")),
+	UnmountedSlip: () => (__foldkitBrandViewResult(({ model: closed(model) }), "@gjermundgaraba/pixel-paper/menu/menu.js#UnmountedSlip")),
+	CompletedPlaceSlip: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/menu/menu.js#CompletedPlaceSlip")),
+	CompletedFocus: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/menu/menu.js#CompletedFocus")),
+	CompletedFocusEdge: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/menu/menu.js#CompletedFocusEdge"))
+})), "@gjermundgaraba/pixel-paper/menu/menu.js#update");
+const toggleEdge = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.withReturnType(), Match.when("ArrowDown", () => __foldkitBrandViewResult((Option.some("First")), "@gjermundgaraba/pixel-paper/menu/menu.js#anonymous")), Match.when("ArrowUp", () => __foldkitBrandViewResult((Option.some("Last")), "@gjermundgaraba/pixel-paper/menu/menu.js#anonymous~2")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/menu/menu.js#anonymous~3")))), "@gjermundgaraba/pixel-paper/menu/menu.js#toggleEdge");
+const toggleKey = (event) => __foldkitBrandViewResult((event.isComposing || event.defaultPrevented || !isPlain(event) ? Option.none() : Option.map(toggleEdge(event.key), (edge) => __foldkitBrandViewResult((Message.PressedToggleArrow({ edge })), "@gjermundgaraba/pixel-paper/menu/menu.js#anonymous~4"))), "@gjermundgaraba/pixel-paper/menu/menu.js#toggleKey");
+/** ↓ and ↑ on the toggle open the slip on its first or last row (Enter and Space click it),
+*  their default prevented (see `toggleKey`). In a Scene, resolve it with
+*  `Message.PressedToggleArrow`. */
+const BindToggleKeys = Mount.defineStream("BindToggleKeys", {
+	messages: [Message.PressedToggleArrow],
+	execute: ({ element }) => __foldkitBrandViewResult((Dom.streamFromEventFilterMapPreventDefault({
+		target: element,
+		type: "keydown",
+		filterMapEvent: toggleKey
+	})), "@gjermundgaraba/pixel-paper/menu/menu.js#execute~2")
+});
+/** The open slip: hung under the toggle by `@foldkit/ui`'s Anchor (portaled, into the dialog
+*  when inside one), focus on its first or last row, and its keys (see `handleSlipKey`). It
+*  reports `CompletedPlaceSlip` once set up; in a Scene, resolve it with that. */
+const BindSlip = Mount.defineStream("BindSlip", {
+	args: {
+		toggleId: Schema.String,
+		isEnd: Schema.Boolean,
+		edge: Edge
+	},
+	messages: [
+		Message.CompletedPlaceSlip,
+		Message.PressedEscape,
+		Message.PressedTab,
+		Message.LeftSlip
+	],
+	execute: ({ element, toggleId: slipToggleId, isEnd, edge }) => __foldkitBrandViewResult((slipStream(element, {
+		placed: Message.CompletedPlaceSlip(),
+		events: {
+			escape: Message.PressedEscape(),
+			tab: Message.PressedTab(),
+			left: Message.LeftSlip()
+		},
+		keepId: Option.some(slipToggleId),
+		setup: anchorUnder({
+			toggleId: slipToggleId,
+			isEnd,
+			edge
+		})
+	})), "@gjermundgaraba/pixel-paper/menu/menu.js#execute~3")
+});
+Schema.Literals(["Start", "End"]);
+const isNamedByLabel = (viewInputs) => __foldkitBrandViewResult((viewInputs.glyph !== void 0 || viewInputs.toggleContent !== void 0), "@gjermundgaraba/pixel-paper/menu/menu.js#isNamedByLabel");
+const toggleClass = (viewInputs) => {
+	const { glyph, isQuiet = false, toggleContent, variant = "Default" } = viewInputs;
+	if (glyph === void 0 || toggleContent !== void 0) return __foldkitBrandViewResult((lookClassName({
+		variant,
+		isSmall: true
+	})), "@gjermundgaraba/pixel-paper/menu/menu.js#toggleClass");
+	return __foldkitBrandViewResult((isQuiet ? "iconbtn quiet" : "iconbtn"), "@gjermundgaraba/pixel-paper/menu/menu.js#toggleClass");
+};
+const toggleView = (model, viewInputs, h) => {
+	const { label, glyph, toggleContent } = viewInputs;
+	return __foldkitBrandViewResult((Button.view({
+		onClick: Message.ClickedToggle(),
+		toView: (groups) => __foldkitBrandViewResult((h.button([
+			...groups.button,
+			h.Id(toggleId(model)),
+			h.AriaHasPopup("menu"),
+			h.AriaExpanded(model.isOpen),
+			...model.isOpen ? [h.AriaControls(slipId(model))] : [],
+			...isNamedByLabel(viewInputs) ? [h.AriaLabel(label), h.DataAttribute("tip", label)] : [],
+			h.OnMount(BindToggleKeys()),
+			h.Class(toggleClass(viewInputs))
+		], toggleContent ?? (glyph === void 0 ? [label] : [view$1({ name: glyph }, h)]))), "@gjermundgaraba/pixel-paper/menu/menu.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/menu/menu.js#toggleView");
+};
+/**
+* A printed slip under its toggle. The toggle is a button, built on `@foldkit/ui`'s Button,
+* with `aria-haspopup="menu"` and `aria-expanded`; the slip is `role="menu"` named by the
+* toggle, hung under it above the page (inside the open dialog when there is one), flipping
+* near the window edge. Its rows
+* take real focus: the first as it opens (the last on ↑), ↑ and ↓ move and wrap, Home and End
+* go to the ends, a letter goes to the row it starts, and unavailable rows are stopped on.
+* Enter, Space or a click chooses; Escape or Tab closes and puts focus back on the toggle; a
+* click elsewhere closes it, and so does the slip leaving the page while open (the row the menu
+* sits on is gone). Radio and check rows say `aria-checked`, a link to the current page
+* `aria-current`. A check row keeps the slip open. The menu does not trap focus, so it
+* hosts no live region.
+*/
+const view = defineView((model, viewInputs, h) => {
+	const { label, items, align = "Start" } = viewInputs;
+	return __foldkitBrandViewResult((h.div([h.Class("menu-wrap")], [toggleView(model, viewInputs, h), ...model.isOpen ? [h.div([
+		h.Id(slipId(model)),
+		h.Role("menu"),
+		isNamedByLabel(viewInputs) ? h.AriaLabel(label) : h.AriaLabelledBy(toggleId(model)),
+		h.OnMount(BindSlip({
+			toggleId: toggleId(model),
+			isEnd: align === "End",
+			edge: model.edge
+		})),
+		h.OnUnmount(Message.UnmountedSlip()),
+		h.Class("menu")
+	], rowsView({
+		slipId: slipId(model),
+		items,
+		toChoose: (itemId, kind) => __foldkitBrandViewResult((Message.SelectedItem({
+			id: itemId,
+			kind
+		})), "@gjermundgaraba/pixel-paper/menu/menu.js#toChoose")
+	}, h))] : []])), "@gjermundgaraba/pixel-paper/menu/menu.js#anonymous~5");
+});
+export { BindSlip, BindToggleKeys, FocusEdge, Message, Model, OutMessage, id, init, isOpen, toggleKey, update, view };