@gjermundgaraba-designs/pixel-paper 0.22.2 → 0.24.0

package/dist/src/tips/tips.d.ts

@@ -12,15 +12,18 @@ export declare const TipState: import("foldkit/schema").TaggedUnion<{
     readonly Cold: {};
     readonly Waiting: {
         text: Schema.String;
+        maybeKey: Schema.Option<Schema.String>;
         side: Schema.Literals<readonly ["Top", "Right"]>;
     };
     readonly Shown: {
         text: Schema.String;
+        maybeKey: Schema.Option<Schema.String>;
         side: Schema.Literals<readonly ["Top", "Right"]>;
         trigger: Schema.Literals<readonly ["Pointer", "Focus"]>;
     };
     readonly Leaving: {
         text: Schema.String;
+        maybeKey: Schema.Option<Schema.String>;
         side: Schema.Literals<readonly ["Top", "Right"]>;
         trigger: Schema.Literals<readonly ["Pointer", "Focus"]>;
     };
@@ -36,15 +39,18 @@ export declare const Model: Schema.Struct<{
         readonly Cold: {};
         readonly Waiting: {
             text: Schema.String;
+            maybeKey: Schema.Option<Schema.String>;
             side: Schema.Literals<readonly ["Top", "Right"]>;
         };
         readonly Shown: {
             text: Schema.String;
+            maybeKey: Schema.Option<Schema.String>;
             side: Schema.Literals<readonly ["Top", "Right"]>;
             trigger: Schema.Literals<readonly ["Pointer", "Focus"]>;
         };
         readonly Leaving: {
             text: Schema.String;
+            maybeKey: Schema.Option<Schema.String>;
             side: Schema.Literals<readonly ["Top", "Right"]>;
             trigger: Schema.Literals<readonly ["Pointer", "Focus"]>;
         };
@@ -56,12 +62,14 @@ export type Model = typeof Model.Type;
 export declare const Message: import("foldkit/message").MessageUnion<{
     readonly EnteredTipTarget: {
         text: Schema.String;
+        maybeKey: Schema.Option<Schema.String>;
         side: Schema.Literals<readonly ["Top", "Right"]>;
     };
     readonly LeftTipTarget: {};
     readonly EnteredTip: {};
     readonly FocusedTipTarget: {
         text: Schema.String;
+        maybeKey: Schema.Option<Schema.String>;
         side: Schema.Literals<readonly ["Top", "Right"]>;
     };
     readonly BlurredTipTarget: {};
@@ -136,16 +144,19 @@ export declare const update: (model: Model, message: Message) => Readonly<{
         } | {
             readonly _tag: "Leaving";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Shown";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Waiting";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
         } | {
             readonly _tag: "Warm";
@@ -171,10 +182,12 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     } | {
         readonly _tag: "EnteredTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "FocusedTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "LeftTipTarget";
@@ -210,16 +223,19 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         } | {
             readonly _tag: "Leaving";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Shown";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Waiting";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
         } | {
             readonly _tag: "Warm";
@@ -244,10 +260,12 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "EnteredTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "FocusedTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "LeftTipTarget";
@@ -268,16 +286,19 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         } | {
             readonly _tag: "Leaving";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Shown";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
             readonly trigger: "Focus" | "Pointer";
         } | {
             readonly _tag: "Waiting";
             readonly text: string;
+            readonly maybeKey: Option.Option<string>;
             readonly side: "Right" | "Top";
         } | {
             readonly _tag: "Warm";
@@ -302,10 +323,12 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "EnteredTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "FocusedTipTarget";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "LeftTipTarget";
@@ -321,7 +344,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
 } extends infer T ? { readonly [Key in keyof T as `${Prefix}${Capitalize<Key>}`]: T[Key]; } : never;
 /**
  * The page's one tip: `div.tip[popover="manual"][aria-hidden="true"]`, which shows the words
- * of any control carrying `data-tip` (IconButton, the glyph switch, a board's grip). Render it
+ * of any control carrying `data-tip` (IconButton, the glyph switch, a board's grip), then the
+ * key in its `data-tip-key` where it has one (an IconButton's `keyHint`). Render it
  * once, beside the Announcer, and lift `subscriptions(keyPrefix)`. It opens on a resting
  * pointer after a moment (at once while another has just closed), never on touch, and on
  * keyboard focus; it can be hovered; leaving, blur, a press or any key closes it, and Escape
@@ -340,16 +364,19 @@ export declare const view: import("foldkit/submodel").View<{
     } | {
         readonly _tag: "Leaving";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
         readonly trigger: "Focus" | "Pointer";
     } | {
         readonly _tag: "Shown";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
         readonly trigger: "Focus" | "Pointer";
     } | {
         readonly _tag: "Waiting";
         readonly text: string;
+        readonly maybeKey: Option.Option<string>;
         readonly side: "Right" | "Top";
     } | {
         readonly _tag: "Warm";
@@ -374,10 +401,12 @@ export declare const view: import("foldkit/submodel").View<{
 } | {
     readonly _tag: "EnteredTipTarget";
     readonly text: string;
+    readonly maybeKey: Option.Option<string>;
     readonly side: "Right" | "Top";
 } | {
     readonly _tag: "FocusedTipTarget";
     readonly text: string;
+    readonly maybeKey: Option.Option<string>;
     readonly side: "Right" | "Top";
 } | {
     readonly _tag: "LeftTipTarget";

package/dist/src/tips/tips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tips.d.ts","sourceRoot":"","sources":["../../../src/tips/tips.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,MAAM,EAAiB,MAAM,EAAE,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAC9F,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAQ3C,OAAO,KAAK,YAAY,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAW9C,iEAAiE;AACjE,eAAO,MAAM,OAAO,gDAAwC,CAAC;AAC7D,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAK1C;;+FAE+F;AAC/F,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;EAMnB,CAAC;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC;AAE5C;sDACsD;AACtD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;EAIhB,CAAC;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAItC,uDAAuD;AACvD,eAAO,MAAM,OAAO;;QACE,IAAI;QAAiB,IAAI;;;;;QAGzB,IAAI;QAAiB,IAAI;;;;;;QAIf,OAAO;;;QACR,OAAO;;;QACN,OAAO;;;;EAGrC,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C,2FAA2F;AAC3F,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElD,yCAAyC;AACzC,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAIxC,CAAC;AAIH,oDAAoD;AACpD,eAAO,MAAM,EAAE,UAAW,KAAK,KAAG,MAAkB,CAAC;AA2DrD;;;0CAG0C;AAC1C,eAAO,MAAM,OAAO;;;;;;iBAmBlB,CAAC;AAEH,sBAAsB;AACtB,eAAO,MAAM,OAAO;;;;iBAQlB,CAAC;AAEH,mCAAmC;AACnC,eAAO,MAAM,iBAAiB;;;;;iBAK5B,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,gBAAgB;;;;;iBAK3B,CAAC;AAEH,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB;;;;;iBAK5B,CAAC;AAuEH,6EAA6E;AAC7E,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDjD,CAAC;AAIL,KAAK,aAAa,GACd,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,GACpC,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,GACjC,OAAO,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC;AAoBnC;gEACgE;AAChE,eAAO,MAAM,kBAAkB,UACtB,MAAM,SACN,YAAY,KAClB,MAAM,CAAC,MAAM,CAAC,aAAa,CAkB7B,CAAC;AAUF;kCACkC;AAClC,eAAO,MAAM,eAAe,UAAW,UAAU,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAQtE,CAAC;AAEJ;;;0CAG0C;AAC1C,eAAO,MAAM,UAAU,UAAW,aAAa,WAAW,OAAO,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAUxF,CAAC;AAkEF;;;8BAG8B;AAC9B,eAAO,MAAM,aAAa,GAAI,MAAM,SAAS,MAAM,aAAa,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGAC7B,CAAC;AAW1C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAef,CAAC"}
+{"version":3,"file":"tips.d.ts","sourceRoot":"","sources":["../../../src/tips/tips.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,MAAM,EAIN,MAAM,EACN,MAAM,EAGP,MAAM,QAAQ,CAAC;AAChB,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAQ3C,OAAO,KAAK,YAAY,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAW9C,iEAAiE;AACjE,eAAO,MAAM,OAAO,gDAAwC,CAAC;AAC7D,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAQ1C;;+FAE+F;AAC/F,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;EAMnB,CAAC;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC;AAE5C;sDACsD;AACtD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;EAIhB,CAAC;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAItC,uDAAuD;AACvD,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;QAQY,OAAO;;;QACR,OAAO;;;QACN,OAAO;;;;EAGrC,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C,2FAA2F;AAC3F,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElD,yCAAyC;AACzC,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAIxC,CAAC;AAIH,oDAAoD;AACpD,eAAO,MAAM,EAAE,UAAW,KAAK,KAAG,MAAkB,CAAC;AA8DrD;;;0CAG0C;AAC1C,eAAO,MAAM,OAAO;;;;;;iBAmBlB,CAAC;AAEH,sBAAsB;AACtB,eAAO,MAAM,OAAO;;;;iBAQlB,CAAC;AAEH,mCAAmC;AACnC,eAAO,MAAM,iBAAiB;;;;;iBAK5B,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,gBAAgB;;;;;iBAK3B,CAAC;AAEH,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB;;;;;iBAK5B,CAAC;AAyEH,6EAA6E;AAC7E,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDjD,CAAC;AAIL,KAAK,aAAa,GACd,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,GACpC,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,GACjC,OAAO,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC;AA0BnC;gEACgE;AAChE,eAAO,MAAM,kBAAkB,UACtB,MAAM,SACN,YAAY,KAClB,MAAM,CAAC,MAAM,CAAC,aAAa,CAkB7B,CAAC;AAUF;kCACkC;AAClC,eAAO,MAAM,eAAe,UAAW,UAAU,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAQtE,CAAC;AAEJ;;;0CAG0C;AAC1C,eAAO,MAAM,UAAU,UAAW,aAAa,WAAW,OAAO,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAUxF,CAAC;AAoEF;;;8BAG8B;AAC9B,eAAO,MAAM,aAAa,GAAI,MAAM,SAAS,MAAM,aAAa,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGAC7B,CAAC;AAW1C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqBf,CAAC"}

package/dist/src/tips/tips.js

@@ -1,5 +1,5 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { Array, Duration, Effect, Match, Number, Option, Schema, Stream, pipe } from "effect";
+import { Array, Duration, Effect, Equal, Match, Number, Option, Schema, Stream, pipe, } from "effect";
 import * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import { defineMessageUnion } from "foldkit/message";
@@ -15,7 +15,9 @@ import { prefixKeys } from "../subscription/prefixKeys.js";
 const Side = Schema.Literals(["Top", "Right"]);
 /** What brought the tip: a resting pointer or keyboard focus. */
 export const Trigger = Schema.Literals(["Pointer", "Focus"]);
-const Words = { text: Schema.String, side: Side };
+/** What a tip says: its control's name, and the key that does the same where the control
+ *  names one (`data-tip-key`). */
+const Words = { text: Schema.String, maybeKey: Schema.Option(Schema.String), side: Side };
 const ShownWords = { ...Words, trigger: Trigger };
 /** Where the page's tip is. `Cold`: none lately. `Waiting`: a pointer rests on a control, for
  *  a moment first. `Shown`. `Leaving`: the pointer left, with a moment to cross onto the tip.
@@ -37,10 +39,10 @@ export const Model = Schema.Struct({
 // MESSAGE
 /** Union of all Messages the tip layer can produce. */
 export const Message = defineMessageUnion({
-    EnteredTipTarget: { text: Schema.String, side: Side },
+    EnteredTipTarget: Words,
     LeftTipTarget: {},
     EnteredTip: {},
-    FocusedTipTarget: { text: Schema.String, side: Side },
+    FocusedTipTarget: Words,
     BlurredTipTarget: {},
     PressedPointer: {},
     PressedKey: {},
@@ -70,6 +72,8 @@ const GRACE = Duration.millis(120);
 const WARMTH = Duration.millis(400);
 /** The attribute that holds a control's tip: its accessible name. */
 const TIP_ATTRIBUTE = "data-tip";
+/** The attribute that holds the key a control's tip prints after its name. */
+const TIP_KEY_ATTRIBUTE = "data-tip-key";
 const TIP_SELECTOR = `[${TIP_ATTRIBUTE}]`;
 const hasText = (element, text) => __foldkitBrandViewResult((element.isConnected && element.getAttribute(TIP_ATTRIBUTE) === text), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#hasText");
 /** The control a tip belongs to, found when it opens: the innermost hovered element with
@@ -117,9 +121,10 @@ export const WaitBeforeCooling = Command.define("WaitBeforeCooling", {
     messages: [Message.CompletedWaitBeforeCooling],
     execute: ({ version }) => __foldkitBrandViewResult((Effect.sleep(WARMTH).pipe(Effect.as(Message.CompletedWaitBeforeCooling({ version })))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#execute~5"),
 });
-const show = (model, text, side, trigger) => (__foldkitBrandViewResult(({
-    model: modifyFields(model, { state: () => __foldkitBrandViewResult((TipState.Shown({ text, side, trigger })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#state") }),
-    commands: [ShowTip({ tipId: model.id, text, trigger })],
+const wordsOf = ({ text, maybeKey, side }) => (__foldkitBrandViewResult(({ text, maybeKey, side }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#wordsOf"));
+const show = (model, words, trigger) => (__foldkitBrandViewResult(({
+    model: modifyFields(model, { state: () => __foldkitBrandViewResult((TipState.Shown({ ...wordsOf(words), trigger })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#state") }),
+    commands: [ShowTip({ tipId: model.id, text: words.text, trigger })],
 }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#show"));
 const hide = (model) => {
     const nextVersion = Number.increment(model.version);
@@ -128,12 +133,12 @@ const hide = (model) => {
         commands: [HideTip({ tipId: model.id }), WaitBeforeCooling({ version: nextVersion })],
     }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#hide");
 };
-const wait = (model, text, side) => {
+const wait = (model, words) => {
     const nextVersion = Number.increment(model.version);
     return __foldkitBrandViewResult(({
         model: modifyFields(model, {
             version: () => __foldkitBrandViewResult((nextVersion), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#version~2"),
-            state: () => __foldkitBrandViewResult((TipState.Waiting({ text, side })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#state~3"),
+            state: () => __foldkitBrandViewResult((TipState.Waiting(wordsOf(words))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#state~3"),
         }),
         commands: [WaitBeforeShowing({ version: nextVersion })],
     }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#wait");
@@ -143,7 +148,7 @@ const leave = (model, shown) => {
     return __foldkitBrandViewResult(({
         model: modifyFields(model, {
             version: () => __foldkitBrandViewResult((nextVersion), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#version~3"),
-            state: () => __foldkitBrandViewResult((TipState.Leaving({ text: shown.text, side: shown.side, trigger: shown.trigger })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#state~4"),
+            state: () => __foldkitBrandViewResult((TipState.Leaving({ ...wordsOf(shown), trigger: shown.trigger })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#state~4"),
         }),
         commands: [WaitBeforeHiding({ version: nextVersion })],
     }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#leave");
@@ -159,47 +164,55 @@ const dismiss = (model) => __foldkitBrandViewResult((TipState.match(model.state,
     Leaving: () => __foldkitBrandViewResult((hide(model)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Leaving"),
     Warm: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Warm")),
 })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#dismiss");
-const entered = (model, text, side) => __foldkitBrandViewResult((TipState.match(model.state, {
-    Cold: () => __foldkitBrandViewResult((wait(model, text, side)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Cold~2"),
-    Waiting: (waiting) => (__foldkitBrandViewResult((waiting.text === text ? { model } : wait(model, text, side)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Waiting~2")),
-    Shown: (shown) => (__foldkitBrandViewResult((shown.text === text ? { model } : show(model, text, side, "Pointer")), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Shown~2")),
-    Leaving: (leaving) => __foldkitBrandViewResult((leaving.text === text
+const entered = (model, words) => __foldkitBrandViewResult((TipState.match(model.state, {
+    Cold: () => __foldkitBrandViewResult((wait(model, words)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Cold~2"),
+    Waiting: (waiting) => (__foldkitBrandViewResult((waiting.text === words.text ? { model } : wait(model, words)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Waiting~2")),
+    Shown: (shown) => (__foldkitBrandViewResult((shown.text === words.text ? { model } : show(model, words, "Pointer")), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Shown~2")),
+    Leaving: (leaving) => __foldkitBrandViewResult((leaving.text === words.text
         ? {
             model: modifyFields(model, {
-                state: () => __foldkitBrandViewResult((TipState.Shown({ text, side, trigger: leaving.trigger })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#state~6"),
+                state: () => __foldkitBrandViewResult((TipState.Shown({ ...wordsOf(words), trigger: leaving.trigger })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#state~6"),
             }),
         }
-        : show(model, text, side, "Pointer")), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Leaving~2"),
-    Warm: () => __foldkitBrandViewResult((show(model, text, side, "Pointer")), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Warm~2"),
+        : show(model, words, "Pointer")), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Leaving~2"),
+    Warm: () => __foldkitBrandViewResult((show(model, words, "Pointer")), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Warm~2"),
 })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#entered");
 /** Processes a tip layer Message and returns the next Model and Commands. */
 export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
-    EnteredTipTarget: ({ text, side }) => __foldkitBrandViewResult((entered(model, text, side)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#EnteredTipTarget"),
+    EnteredTipTarget: (words) => __foldkitBrandViewResult((entered(model, wordsOf(words))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#EnteredTipTarget"),
     LeftTipTarget: () => __foldkitBrandViewResult((TipState.matchOrElse(model.state, {
         Waiting: () => __foldkitBrandViewResult((cool(model)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Waiting~3"),
         Shown: (shown) => (__foldkitBrandViewResult((shown.trigger === "Pointer" ? leave(model, shown) : { model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Shown~3")),
     }, () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~11")))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#LeftTipTarget"),
     EnteredTip: () => __foldkitBrandViewResult((TipState.matchOrElse(model.state, {
-        Leaving: ({ text, side, trigger }) => (__foldkitBrandViewResult(({
-            model: modifyFields(model, { state: () => __foldkitBrandViewResult((TipState.Shown({ text, side, trigger })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#state~7") }),
+        Leaving: (leaving) => (__foldkitBrandViewResult(({
+            model: modifyFields(model, {
+                state: () => __foldkitBrandViewResult((TipState.Shown({ ...wordsOf(leaving), trigger: leaving.trigger })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#state~7"),
+            }),
         }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Leaving~3")),
     }, () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~12")))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#EnteredTip"),
-    FocusedTipTarget: ({ text, side }) => __foldkitBrandViewResult((show(model, text, side, "Focus")), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#FocusedTipTarget"),
+    FocusedTipTarget: (words) => __foldkitBrandViewResult((show(model, wordsOf(words), "Focus")), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#FocusedTipTarget"),
     BlurredTipTarget: () => __foldkitBrandViewResult((dismiss(model)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#BlurredTipTarget"),
     PressedPointer: () => __foldkitBrandViewResult((dismiss(model)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#PressedPointer"),
     PressedKey: () => __foldkitBrandViewResult((dismiss(model)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#PressedKey"),
     CompletedWaitBeforeShowing: ({ version }) => __foldkitBrandViewResult((TipState.matchOrElse(model.state, {
-        Waiting: ({ text, side }) => __foldkitBrandViewResult((model.version === version ? show(model, text, side, "Pointer") : { model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Waiting~4"),
+        Waiting: (waiting) => __foldkitBrandViewResult((model.version === version ? show(model, wordsOf(waiting), "Pointer") : { model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Waiting~4"),
     }, () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~13")))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#CompletedWaitBeforeShowing"),
     CompletedWaitBeforeHiding: ({ version }) => __foldkitBrandViewResult((TipState.matchOrElse(model.state, { Leaving: () => (__foldkitBrandViewResult((model.version === version ? hide(model) : { model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Leaving~4")) }, () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~14")))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#CompletedWaitBeforeHiding"),
     CompletedWaitBeforeCooling: ({ version }) => __foldkitBrandViewResult((TipState.matchOrElse(model.state, { Warm: () => (__foldkitBrandViewResult((model.version === version ? cool(model) : { model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#Warm~3")) }, () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~15")))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#CompletedWaitBeforeCooling"),
     CompletedShowTip: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#CompletedShowTip")),
     CompletedHideTip: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#CompletedHideTip")),
 })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#update");
-const sideOf = (element) => __foldkitBrandViewResult((element.closest('[aria-orientation="vertical"]') === null ? "Top" : "Right"), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#sideOf");
+/** A control in a vertical strip of tools, or set in vertical writing (a folded rail's title
+ *  bar), takes its tip at its side, where the tip would cover the next tool or the top bar. */
+const sideOf = (element) => __foldkitBrandViewResult((element.closest('[aria-orientation="vertical"]') === null &&
+    !getComputedStyle(element).writingMode.startsWith("vertical")
+    ? "Top"
+    : "Right"), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#sideOf");
 const tipTargetOf = (target) => __foldkitBrandViewResult((pipe(Option.liftPredicate(target, (node) => __foldkitBrandViewResult((node instanceof Element), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~16")), Option.flatMap((element) => __foldkitBrandViewResult((Option.fromNullishOr(element.closest(TIP_SELECTOR))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~17")), Option.flatMap((element) => __foldkitBrandViewResult((Option.map(Option.fromNullishOr(element.getAttribute(TIP_ATTRIBUTE)), (text) => (__foldkitBrandViewResult(({
     element,
     text,
+    maybeKey: Option.fromNullishOr(element.getAttribute(TIP_KEY_ATTRIBUTE)),
     side: sideOf(element),
 }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~19")))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~18")))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#tipTargetOf");
 /** What a pointer arriving over `target` means for the tip: over a control with a tip, over
@@ -214,12 +227,12 @@ export const pointerOverMessage = (tipId, event) => {
     }
     return __foldkitBrandViewResult((Option.some(Option.match(tipTargetOf(event.target), {
         onNone: () => __foldkitBrandViewResult((Message.LeftTipTarget()), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#onNone"),
-        onSome: ({ text, side }) => __foldkitBrandViewResult((Message.EnteredTipTarget({ text, side })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#onSome"),
+        onSome: (target) => __foldkitBrandViewResult((Message.EnteredTipTarget(wordsOf(target))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#onSome"),
     }))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#pointerOverMessage");
 };
 /** What focus arriving on `target` means for the tip: keyboard focus (`:focus-visible`) on a
  *  control with a tip shows it; any other focus says nothing. */
-const focusInMessage = (event) => __foldkitBrandViewResult((Option.map(Option.filter(tipTargetOf(event.target), ({ element }) => __foldkitBrandViewResult((element.matches(":focus-visible")), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~20")), ({ text, side }) => __foldkitBrandViewResult((Message.FocusedTipTarget({ text, side })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~21"))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#focusInMessage");
+const focusInMessage = (event) => __foldkitBrandViewResult((Option.map(Option.filter(tipTargetOf(event.target), ({ element }) => __foldkitBrandViewResult((element.matches(":focus-visible")), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~20")), (target) => __foldkitBrandViewResult((Message.FocusedTipTarget(wordsOf(target))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~21"))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#focusInMessage");
 /** Focus leaving a control with a tip, not into a part of itself, closes the tip (and
  *  cancels one still waiting). */
 export const focusOutMessage = (event) => __foldkitBrandViewResult((Option.map(Option.filter(tipTargetOf(event.target), ({ element }) => __foldkitBrandViewResult((!(event.relatedTarget instanceof Node && element.contains(event.relatedTarget))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~22")), () => __foldkitBrandViewResult((Message.BlurredTipTarget()), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~23"))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#focusOutMessage");
@@ -244,7 +257,9 @@ const pointerOverChanges = (tipId) => __foldkitBrandViewResult((Dom.streamFromEv
 }).pipe(Stream.changesWith((previous, next) => __foldkitBrandViewResult((previous._tag === next._tag && sameWords(previous, next)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~24")))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#pointerOverChanges");
 const sameWords = (previous, next) => __foldkitBrandViewResult((previous._tag !== "EnteredTipTarget" ||
     next._tag !== "EnteredTipTarget" ||
-    (previous.text === next.text && previous.side === next.side)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#sameWords");
+    (previous.text === next.text &&
+        previous.side === next.side &&
+        Equal.equals(previous.maybeKey, next.maybeKey))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#sameWords");
 const tipSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
     pointerAndFocus: entry({ tipId: Schema.String }, {
         modelToDependencies: (model) => (__foldkitBrandViewResult(({ tipId: model.id }), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#modelToDependencies")),
@@ -286,10 +301,11 @@ const tipSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResul
  *  only while a tip shows. */
 export const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys(keyPrefix, tipSubscriptions)), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#subscriptions");
 // VIEW
-const wordsOf = (model) => __foldkitBrandViewResult((Match.value(model.state).pipe(Match.withReturnType(), Match.tag("Waiting", "Shown", "Leaving", ({ text, side }) => __foldkitBrandViewResult((Option.some({ text, side })), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~26")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~27")))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#wordsOf");
+const maybeWordsOf = (model) => __foldkitBrandViewResult((Match.value(model.state).pipe(Match.withReturnType(), Match.tag("Waiting", "Shown", "Leaving", (words) => __foldkitBrandViewResult((Option.some(wordsOf(words))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~26")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~27")))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#maybeWordsOf");
 /**
  * The page's one tip: `div.tip[popover="manual"][aria-hidden="true"]`, which shows the words
- * of any control carrying `data-tip` (IconButton, the glyph switch, a board's grip). Render it
+ * of any control carrying `data-tip` (IconButton, the glyph switch, a board's grip), then the
+ * key in its `data-tip-key` where it has one (an IconButton's `keyHint`). Render it
  * once, beside the Announcer, and lift `subscriptions(keyPrefix)`. It opens on a resting
  * pointer after a moment (at once while another has just closed), never on touch, and on
  * keyboard focus; it can be hovered; leaving, blur, a press or any key closes it, and Escape
@@ -301,7 +317,7 @@ const wordsOf = (model) => __foldkitBrandViewResult((Match.value(model.state).pi
  * accessibility tree, and any control takes one by carrying `data-tip`.
  */
 export const view = defineView((model, h) => {
-    const maybeWords = wordsOf(model);
+    const maybeWords = maybeWordsOf(model);
     return __foldkitBrandViewResult((h.div([
         h.Id(model.id),
         h.Popover("manual"),
@@ -310,5 +326,11 @@ export const view = defineView((model, h) => {
         ...(Option.exists(maybeWords, ({ side }) => __foldkitBrandViewResult((side === "Right"), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~29"))
             ? [h.DataAttribute("side", "right")]
             : []),
-    ], Option.isSome(maybeWords) ? [maybeWords.value.text] : [])), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~28");
+    ], Option.match(maybeWords, {
+        onNone: () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#onNone~3"),
+        onSome: ({ text, maybeKey }) => __foldkitBrandViewResult(([
+            text,
+            ...Array.fromOption(Option.map(maybeKey, (key) => __foldkitBrandViewResult((h.kbd([h.Class("key-hint")], [key])), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~30"))),
+        ]), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#onSome~3"),
+    }))), "@gjermundgaraba-designs/pixel-paper/src/tips/tips.js#anonymous~28");
 });

package/dist/src/toast/index.d.ts

@@ -1,5 +1,5 @@
 export { AnnounceSlip, BindStack, FocusSlip, Message, Model, OutMessage, dismiss, id, init, sceneMounts, show, update, view, } from "./toast.ts";
-export type { InitConfig, ShowConfig, ShowReturn } from "./toast.ts";
+export type { InitConfig, ShowConfig } from "./toast.ts";
 export type { Action, Tone } from "./stack.ts";
 export { Focus } from "../focus/focus.ts";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,OAAO,EACP,EAAE,EACF,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACrE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,OAAO,EACP,EAAE,EACF,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/src/toast/toast.d.ts

@@ -326,8 +326,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                 readonly pendingDismissVersion: number;
                 readonly isHovered: boolean;
                 readonly swipeState: {
-                    readonly _tag: "Idle";
-                } | {
                     readonly _tag: "Dismissing";
                     readonly offsetX: number;
                     readonly direction: "Left" | "Right";
@@ -336,6 +334,8 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                     readonly pointerId: number;
                     readonly startX: number;
                     readonly currentX: number;
+                } | {
+                    readonly _tag: "Idle";
                 } | {
                     readonly _tag: "Settling";
                     readonly offsetX: number;
@@ -421,7 +421,7 @@ export type ShowConfig = Readonly<{
 }>;
 /** What `show` returns: the next Model and Commands, and the new slip's id, to take it back
  *  with `dismiss`. */
-export type ShowReturn = Update.Return<Model, Message> & Readonly<{
+type ShowReturn = Update.Return<Model, Message> & Readonly<{
     entryId: string;
 }>;
 /**
@@ -557,8 +557,6 @@ export declare const view: import("foldkit/submodel").View<{
             readonly pendingDismissVersion: number;
             readonly isHovered: boolean;
             readonly swipeState: {
-                readonly _tag: "Idle";
-            } | {
                 readonly _tag: "Dismissing";
                 readonly offsetX: number;
                 readonly direction: "Left" | "Right";
@@ -567,6 +565,8 @@ export declare const view: import("foldkit/submodel").View<{
                 readonly pointerId: number;
                 readonly startX: number;
                 readonly currentX: number;
+            } | {
+                readonly _tag: "Idle";
             } | {
                 readonly _tag: "Settling";
                 readonly offsetX: number;

package/dist/src/toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.ts"],"names":[],"mappings":"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"}

package/dist/src/toast/toast.js

@@ -215,14 +215,9 @@ export const show = (model, config) => {
 /** Takes a slip back by its id: what it reported has recovered. */
 export const dismiss = (model, entryId) => __foldkitBrandViewResult((dismissKeepingFocus(model, entryId)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#dismiss");
 // VIEW
-const TONE_CLASS = {
-    Ok: "notice toast ok",
-    Error: "notice toast error",
-    Quiet: "notice toast quiet",
-};
 const slipView = (entry, h) => {
     const { tone, title, maybeBody, maybeAction } = entry.payload;
-    return __foldkitBrandViewResult((h.div([h.Class(TONE_CLASS[tone])], [
+    return __foldkitBrandViewResult((h.div([h.Class(`notice toast${Notice.TONE_CLASS[tone]}`)], [
         Notice.toneGlyphView({ tone }, h),
         h.div([], [h.strong([], [title]), ...Option.toArray(maybeBody)]),
         ...Array.fromOption(Option.map(maybeAction, (action) => __foldkitBrandViewResult((Button.view({

package/dist/src/toolbar/toolbar.d.ts

@@ -1,7 +1,6 @@
 import { Schema } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 import * as Mount from "foldkit/mount";
-import type { Attributes } from "../attributes/attributes.ts";
 /** Which way the strip lies. A `Vertical` strip stands on end: a canvas's tools down its left
  *  edge. The arrows of both axes move in either. */
 export declare const Orientation: Schema.Literals<readonly ["Horizontal", "Vertical"]>;
@@ -38,8 +37,6 @@ export type ViewConfig<ParentMessage> = Readonly<{
      *  Scene, resolve the Mount by name with the lifted Message:
      *  `Scene.Mount.resolve({ name: Toolbar.BindToolKeys.name }, toParentMessage(Toolbar.Message.MovedToolFocus({ move })))`. */
     toParentMessage: (message: Message) => ParentMessage;
-    /** Further attributes for the toolbar, never a class. */
-    attributes?: Attributes<ParentMessage>;
 }>;
 /** A strip of tools that is one stop for Tab (`role="toolbar"`, named by its label, with its
  *  `aria-orientation`): the arrows move between the tools and stop at the ends, Home and End

package/dist/src/toolbar/toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAEpF,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAK9D;oDACoD;AACpD,eAAO,MAAM,WAAW,sDAA8C,CAAC;AACvE,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,CAAC;AAQlD,6FAA6F;AAC7F,eAAO,MAAM,OAAO;;QAA0C,IAAI;;EAAe,CAAC;AAClF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAsG1C;;;;;;yDAMyD;AACzD,eAAO,MAAM,YAAY;;;EAuBvB,CAAC;AAIH,yDAAyD;AACzD,MAAM,MAAM,UAAU,CAAC,aAAa,IAAI,QAAQ,CAAC;IAC/C,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;iIAG6H;IAC7H,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,aAAa,CAAC;IACrD,yDAAyD;IACzD,UAAU,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;CACxC,CAAC,CAAC;AAEH;;gEAEgE;AAChE,eAAO,MAAM,IAAI,GAAI,aAAa,UACxB,UAAU,CAAC,aAAa,CAAC,KAC9B,WAAW,CAAC,aAAa,CAAC,KAC5B,IAqBF,CAAC"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAEpF,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAMvC;oDACoD;AACpD,eAAO,MAAM,WAAW,sDAA8C,CAAC;AACvE,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,CAAC;AAQlD,6FAA6F;AAC7F,eAAO,MAAM,OAAO;;QAA0C,IAAI;;EAAe,CAAC;AAClF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAsG1C;;;;;;yDAMyD;AACzD,eAAO,MAAM,YAAY;;;EAuBvB,CAAC;AAIH,yDAAyD;AACzD,MAAM,MAAM,UAAU,CAAC,aAAa,IAAI,QAAQ,CAAC;IAC/C,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;iIAG6H;IAC7H,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,aAAa,CAAC;CACtD,CAAC,CAAC;AAEH;;gEAEgE;AAChE,eAAO,MAAM,IAAI,GAAI,aAAa,UACxB,UAAU,CAAC,aAAa,CAAC,KAC9B,WAAW,CAAC,aAAa,CAAC,KAC5B,IAmBF,CAAC"}

package/dist/src/toolbar/toolbar.js

@@ -90,9 +90,8 @@ export const BindToolKeys = Mount.defineStream("BindToolKeys", {
  *  `aria-orientation`): the arrows move between the tools and stop at the ends, Home and End
  *  go to the ends, and Tab comes back to the tool used last. */
 export const view = (config, h) => {
-    const { label, tools: toolViews, orientation = "Horizontal", isFloating = false, toParentMessage, attributes = [], } = config;
+    const { label, tools: toolViews, orientation = "Horizontal", isFloating = false, toParentMessage, } = config;
     return __foldkitBrandViewResult((h.div([
-        ...attributes,
         h.Role("toolbar"),
         h.AriaLabel(label),
         h.AriaOrientation(orientation === "Vertical" ? "vertical" : "horizontal"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjermundgaraba-designs/pixel-paper",
-  "version": "0.22.2",
+  "version": "0.24.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/adapters/mermaid.ts

@@ -2,30 +2,6 @@
 // faces, in the page's palette. An optional entry point ("./adapters/mermaid"):
 // mermaid is the adopter's own dependency, loaded here only when a diagram is drawn.
 //
-// `view` renders the diagram's box and draws into it from a Mount (`DrawDiagram`), so it
-// needs the DOM only once the box is on the page, never while rendering on the server. The
-// box is keyed by the palette the page prints in, from the application's SchemeSwitch
-// (`Scheme.SchemeSwitch.palette`, which under "System" follows the reader's system as it
-// changes), so a new palette mounts a new box and draws the diagram again; a new source does
-// the same. The box reports `SucceededDrawDiagram`, `FailedLoadMermaid` or `FailedDrawDiagram`
-// through the caller's `toParentMessage`, and the caller keeps what it shows meanwhile (a
-// Loading line, an error Notice) in its own Model:
-//
-//   Mermaid.view(
-//     {
-//       source,
-//       palette: Scheme.SchemeSwitch.palette(model.schemeSwitch),
-//       toParentMessage: (message) => GotDiagramMessage({ message }),
-//     },
-//     h,
-//   );
-//
-// `renderDiagram` waits for the faces, so words are measured in them and not a fallback;
-// renders in the box (it must be on the page), so labels are measured where they will print;
-// and returns the SVG. Mermaid's settings are global, so draws run one at a time. It fails with
-// `MermaidMissing` when mermaid itself does not load, and with `DiagramError` when mermaid
-// loads but the diagram is not drawn.
-//
 // Two layers. themeCSS repaints with var(…), so the parts it names (nodes, edges, labels,
 // clusters, actors, messages, notes) follow a palette switch in place. themeVariables must be
 // colours, not var() strings (mermaid mixes its own shades from them), so they are read from