@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/dist/src/video-frame/index.js

@@ -0,0 +1 @@
+export { view } from "./video-frame.js";

package/dist/src/{videoFrame/videoFrame.d.ts → video-frame/video-frame.d.ts}

@@ -103,4 +103,4 @@ export declare const view: import("foldkit/submodel").View<{
      *  `Retried`. */
     hasRetry?: boolean;
 }>>;
-//# sourceMappingURL=videoFrame.d.ts.map
+//# sourceMappingURL=video-frame.d.ts.map

package/dist/src/video-frame/video-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-frame.d.ts","sourceRoot":"","sources":["../../../src/video-frame/video-frame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,KAAK,EAAE,IAAI,EAAe,MAAM,cAAc,CAAC;AAMtD,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAG3C,6EAA6E;AAC7E,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,8EAA8E;AAC9E,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;kEAC8D;IAC9D,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,uFAAuF;IACvF,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACtC,kEAAkE;IAClE,IAAI,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC;IAClB;qBACiB;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAyFH;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAlHV,MAAM;IACX,8DAA8D;WACvD,MAAM;UACP,KAAK,CAAC,SAAS;IACrB,uCAAuC;aAC9B,MAAM;eACJ,QAAQ;IACnB;kEAC8D;cACpD,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC;IACtC,uFAAuF;aAC9E,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC;IACrC,kEAAkE;WAC3D,KAAK,CAAC,IAAI;IACjB;qBACiB;eACN,OAAO;GAgJnB,CAAC"}

package/dist/src/{videoFrame/videoFrame.js → video-frame/video-frame.js}

@@ -2,7 +2,7 @@ import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Option } from "effect";
 import { defineView } from "foldkit/submodel";
 import * as Button from "../button/button.js";
-import * as IconButton from "../iconButton/iconButton.js";
+import * as IconButton from "../icon-button/icon-button.js";
 import * as Loading from "../loading/loading.js";
 import * as Media from "../media/media.js";
 import * as Notice from "../notice/notice.js";
@@ -14,7 +14,9 @@ const videoView = (model, src, poster, captions, h) => __foldkitBrandViewResult(
     h.Playsinline(true),
     h.Tabindex(-1),
     h.Muted(model.isMuted),
-    h.OnClick(model.isPlaying ? Media.Message.ClickedPause() : Media.Message.ClickedPlay()),
+    h.OnClick(model.isPlaying
+        ? Media.Message.ClickedPause()
+        : Media.Message.ClickedPlay()),
     h.OnMount(Media.ReadMedia()),
 ], captions === undefined
     ? []
@@ -25,7 +27,7 @@ const videoView = (model, src, poster, captions, h) => __foldkitBrandViewResult(
             h.Attribute("srclang", captions.language),
             h.LabelAttr(captions.label),
         ]),
-    ])), "@gjermundgaraba-designs/pixel-paper/src/videoFrame/videoFrame.js#videoView");
+    ])), "@gjermundgaraba-designs/pixel-paper/src/video-frame/video-frame.js#videoView");
 const brokenView = (model, hasRetry, h) => __foldkitBrandViewResult((h.div([h.Class("media-broken")], [
     Notice.view({
         tone: "Error",
@@ -33,7 +35,7 @@ const brokenView = (model, hasRetry, h) => __foldkitBrandViewResult((h.div([h.Cl
         body: [Media.failureReason(model.maybeErrorCode)],
         actions: Media.retryActions(hasRetry, h),
     }, h),
-])), "@gjermundgaraba-designs/pixel-paper/src/videoFrame/videoFrame.js#brokenView");
+])), "@gjermundgaraba-designs/pixel-paper/src/video-frame/video-frame.js#brokenView");
 const barView = (model, isBroken, captions, h) => __foldkitBrandViewResult((h.div([h.Class("media-bar")], [
     Media.playButtonView(model, isBroken, h),
     Media.seekView(model, isBroken, h),
@@ -47,10 +49,12 @@ const barView = (model, isBroken, captions, h) => __foldkitBrandViewResult((h.di
                 label: "Captions",
                 onClick: Media.Message.ClickedCaptions(),
                 isDisabled: isBroken,
-                attributes: [Button.pressedAttribute(model.isShowingCaptions, h)],
+                attributes: [
+                    Button.pressedAttribute(model.isShowingCaptions, h),
+                ],
             }, h),
         ]),
-])), "@gjermundgaraba-designs/pixel-paper/src/videoFrame/videoFrame.js#barView");
+])), "@gjermundgaraba-designs/pixel-paper/src/video-frame/video-frame.js#barView");
 /**
  * A native video in a 2px ink frame that keeps its ratio, over a bar of the system's own
  * controls, all in a group named by `label`: play, the place as cells, the time, mute and
@@ -82,5 +86,5 @@ export const view = defineView((model, viewInputs, h) => {
             barView(model, isBroken, captions, h),
         ]),
         ...Media.captionView(caption, credit, h),
-    ])), "@gjermundgaraba-designs/pixel-paper/src/videoFrame/videoFrame.js#anonymous");
+    ])), "@gjermundgaraba-designs/pixel-paper/src/video-frame/video-frame.js#anonymous");
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wall/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wall/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEvD,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"wall.d.ts","sourceRoot":"","sources":["../../../src/wall/wall.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,sDAAsD;AACtD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,+DAA+D;IAC/D,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC,CAAC;AAEH;4BAC4B;AAC5B,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAI3E,CAAC;AAIF,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,wDAAwD;IACxD,KAAK,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC,CAAC;AAEH,mFAAmF;AACnF,eAAO,MAAM,QAAQ,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAO/E,CAAC;AAIF,0EAA0E;AAC1E,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC,CAAC;AAEH;;iDAEiD;AACjD,eAAO,MAAM,UAAU,GAAI,OAAO,UAAU,YAAY,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAInF,CAAC"}
+{"version":3,"file":"wall.d.ts","sourceRoot":"","sources":["../../../src/wall/wall.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,sDAAsD;AACtD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,+DAA+D;IAC/D,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC,CAAC;AAEH;4BAC4B;AAC5B,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,KACf,WAAW,CAAC,OAAO,CAAC,KACtB,IAIF,CAAC;AAEF,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,wDAAwD;IACxD,KAAK,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC,CAAC;AAEH,mFAAmF;AACnF,eAAO,MAAM,QAAQ,GAAI,OAAO,UACtB,UAAU,KACf,WAAW,CAAC,OAAO,CAAC,KACtB,IAOF,CAAC;AAEF,0EAA0E;AAC1E,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC,CAAC;AAEH;;iDAEiD;AACjD,eAAO,MAAM,UAAU,GAAI,OAAO,UACxB,YAAY,KACjB,WAAW,CAAC,OAAO,CAAC,KACtB,IAIF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/window/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/window/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC"}

package/dist/src/window/window.d.ts

@@ -7,7 +7,7 @@ export type ViewConfig<Message> = Readonly<{
     /** Pixel caps in the inverted title bar. */
     title: string;
     /** A quiet IconButton before the kind glyph: a Reel's grip. */
-    lead?: ReadonlyArray<Html>;
+    lead?: readonly Html[];
     /** What kind of thing it is: a terminal, a note, a machine. */
     glyph?: GlyphName;
     /** A chip in the title bar: its state. */
@@ -15,7 +15,7 @@ export type ViewConfig<Message> = Readonly<{
     /** IconButtons in the title bar, before the close. A child Submodel, whose view is one
      *  `Html`, hands back several in a `span.window-tools`: it is no box of its own
      *  (`display: contents`), so its buttons sit in the bar as the others do. */
-    tools?: ReadonlyArray<Html>;
+    tools?: readonly Html[];
     /** The close glyph's Message; the glyph prints when it is given. */
     onClose?: Message;
     body: ReadonlyArray<Html | string>;

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

@@ -1 +1 @@
-{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/window/window.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAOpD,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACtC;;iFAE6E;IAC7E,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,iEAAiE;IACjE,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH;;6DAE6D;AAC7D,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAsCpF,CAAC"}
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/window/window.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAKpD,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACtC;;iFAE6E;IAC7E,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,iEAAiE;IACjE,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH;;6DAE6D;AAC7D,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,CAAC,OAAO,CAAC,KACxB,WAAW,CAAC,OAAO,CAAC,KACtB,IA2CF,CAAC"}

package/dist/src/window/window.js

@@ -1,6 +1,6 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import * as Glyph from "../glyph/glyph.js";
-import * as IconButton from "../iconButton/iconButton.js";
+import * as IconButton from "../icon-button/icon-button.js";
 import { titleId } from "../panel/panel.js";
 import { slotView } from "../slot/slot.js";
 /** A panel that lives on a stage, sized by whatever places it (and moved by it, if it moves):
@@ -21,7 +21,9 @@ export const view = (config, h) => {
             ...tools,
             ...(onClose === undefined
                 ? []
-                : [IconButton.view({ glyph: "cross", label: "Close", onClick: onClose }, h)]),
+                : [
+                    IconButton.view({ glyph: "cross", label: "Close", onClick: onClose }, h),
+                ]),
         ]),
         h.div([h.Class("window-body")], body),
         ...slotView("div", "panel-foot", foot, h),

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wordmark/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wordmark/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"wordmark.d.ts","sourceRoot":"","sources":["../../../src/wordmark/wordmark.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,uFAAuF;AACvF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAQ3E,CAAC"}
+{"version":3,"file":"wordmark.d.ts","sourceRoot":"","sources":["../../../src/wordmark/wordmark.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,uFAAuF;AACvF,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,KACf,WAAW,CAAC,OAAO,CAAC,KACtB,IAQF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wrap/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wrap/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,YAAY,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"wrap.d.ts","sourceRoot":"","sources":["../../../src/wrap/wrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAI9D,sDAAsD;AACtD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC;iBACa;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAClC,CAAC,CAAC;AAEH;sCACsC;AACtC,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAIpF,CAAC"}
+{"version":3,"file":"wrap.d.ts","sourceRoot":"","sources":["../../../src/wrap/wrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAE9D,sDAAsD;AACtD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC;iBACa;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAClC,CAAC,CAAC;AAEH;sCACsC;AACtC,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,CAAC,OAAO,CAAC,KACxB,WAAW,CAAC,OAAO,CAAC,KACtB,IAIF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjermundgaraba-designs/pixel-paper",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -47,13 +47,13 @@
     "@foldkit/ui": "0.169.0",
     "@foldkit/vite-plugin": "0.28.0",
     "@my-designs/specimen": "0.0.0",
-    "@types/node": "^26.6.2",
+    "@types/node": "26.6.5",
     "effect": "4.0.6",
     "foldkit": "0.169.0",
-    "happy-dom": "^20.14.5",
-    "mermaid": "^12.1.0",
-    "playwright": "1.64.0",
-    "typescript": "^7.0.2",
+    "happy-dom": "21.0.4",
+    "mermaid": "12.2.0",
+    "playwright": "1.64.1",
+    "typescript": "7.0.2",
     "vite": "npm:@voidzero-dev/vite-plus-core@1.4.0",
     "vite-plus": "1.4.0"
   },

package/src/adapters/diagram.ts

@@ -0,0 +1,278 @@
+import { Array, Data, Effect, Record, Schema, Semaphore } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+import type { Mermaid, MermaidConfig } from "mermaid";
+
+import { Palette } from "../scheme/scheme.ts";
+
+const COLOURS = {
+  ink: "--ink",
+  paper: "--paper",
+  head: "--head",
+  rule: "--rule",
+  muted: "--muted",
+  red: "--red",
+  onHead: "--on-head",
+} as const;
+
+type Colours = Record<keyof typeof COLOURS, string>;
+
+const readColours = (): Colours => {
+  const probe = document.createElement("span");
+  probe.hidden = true;
+  document.documentElement.append(probe);
+
+  const colours = Record.map(COLOURS, (token) => {
+    probe.style.color = `var(${token})`;
+
+    return getComputedStyle(probe).color;
+  });
+
+  probe.remove();
+
+  return colours;
+};
+
+const isDark = (rgb: string): boolean => {
+  const [red = 255, green = 255, blue = 255] = Array.map(
+    rgb.match(/[\d.]+/gu) ?? [],
+    Number
+  );
+
+  return red * 0.299 + green * 0.587 + blue * 0.114 < 128;
+};
+
+const THEME_CSS = `
+rect, line, path, polygon { shape-rendering: crispedges; }
+
+/* nodes: paper in a 2px ink frame, square, on the 3px print shadow */
+.node rect, .node polygon, .node circle, .node ellipse, .node path {
+  fill: var(--paper); stroke: var(--ink); stroke-width: var(--line);
+}
+.node rect { rx: 0; ry: 0; }
+.node { filter: drop-shadow(var(--shadow-button)); }
+.label, .label text, .label span, .label p, .nodeLabel {
+  font-family: var(--font-body); font-size: var(--type-body); color: var(--ink); fill: var(--ink);
+}
+
+/* edges: 2px ink, stepped (the curve is "step"), ink arrowheads */
+.flowchart-link, .edgePaths .path { stroke: var(--ink); stroke-width: var(--line); }
+.marker, .arrowheadPath { fill: var(--ink); stroke: var(--ink); }
+
+/* edge labels sit on paper, in the sans a size down */
+.edgeLabel, .edgeLabel p, .edgeLabel span, .labelBkg {
+  background-color: var(--paper); color: var(--ink); font-size: var(--type-control);
+}
+.edgeLabel rect { fill: var(--paper); opacity: 1; }
+
+/* clusters: a head-tinted area on a 1px rule, named in the label register */
+.cluster rect { fill: var(--head); stroke: var(--rule); stroke-width: var(--hair); rx: 0; ry: 0; }
+.cluster-label span, .cluster-label p, .cluster text, .cluster span {
+  font-family: var(--font-px); font-size: var(--type-label); text-transform: uppercase;
+  letter-spacing: var(--tracking-label); color: var(--on-head); fill: var(--on-head);
+}
+
+/* sequence: actors print like nodes; lifelines are rules; replies dot in 2px cells */
+.actor { fill: var(--paper); stroke: var(--ink); stroke-width: var(--line); }
+rect.actor { filter: drop-shadow(var(--shadow-button)); }
+text.actor > tspan, .messageText { fill: var(--ink); }
+.actor-line { stroke: var(--rule); stroke-width: var(--hair); }
+.messageLine0, .messageLine1 { stroke: var(--ink); stroke-width: var(--line); }
+.messageLine1 { stroke-dasharray: var(--line) var(--line) !important; }
+[id$="-arrowhead"] path, [id$="-crosshead"] path { fill: var(--ink); stroke: var(--ink); }
+.activation0, .activation1, .activation2 { fill: var(--head); stroke: var(--ink); stroke-width: var(--line); }
+
+/* a loop or an alt: a 1px rule around it (a dashed line means a drop target here), and its
+   word on an inverted tab, like a title bar. Mermaid writes the sans on every text, so the
+   pixel face has to insist. */
+.loopLine { stroke: var(--rule); stroke-width: var(--hair); stroke-dasharray: none; }
+.labelBox { fill: var(--ink); stroke: var(--ink); }
+.labelText, .labelText > tspan {
+  fill: var(--paper); font-family: var(--font-px) !important; font-size: var(--type-label) !important;
+  text-transform: uppercase; letter-spacing: var(--tracking-label);
+}
+.loopText, .loopText > tspan, .sectionTitle, .sectionTitle > tspan { fill: var(--muted); }
+
+/* notes: the quiet notice, head tint in a rule frame */
+.note { fill: var(--head); stroke: var(--rule); stroke-width: var(--line); }
+.noteText, .noteText > tspan { fill: var(--on-head); }
+
+.sequenceNumber { fill: var(--paper); font-family: var(--font-px) !important; }
+[id$="-sequencenumber"] { fill: var(--ink); }
+`;
+
+const PIXELS = /^(?<amount>\d*\.?\d+)px$/u;
+
+const theme = (): MermaidConfig => {
+  const colours = readColours();
+  const style = getComputedStyle(document.documentElement);
+  const body = style.getPropertyValue("--font-body").trim();
+  const type = style.getPropertyValue("--type-body").trim();
+  const amount = PIXELS.exec(type)?.groups?.["amount"];
+
+  if (amount === undefined) {
+    throw new Error(`--type-body is not a length in pixels: "${type}".`);
+  }
+
+  const size = Number(amount);
+
+  return {
+    theme: "base",
+    look: "classic",
+    fontFamily: body,
+    fontSize: size,
+    themeCSS: THEME_CSS,
+    themeVariables: {
+      darkMode: isDark(colours.paper),
+      background: colours.paper,
+      fontFamily: body,
+      fontSize: `${size}px`,
+      strokeWidth: 2,
+      primaryColor: colours.paper,
+      primaryTextColor: colours.ink,
+      primaryBorderColor: colours.ink,
+      secondaryColor: colours.head,
+      secondaryTextColor: colours.onHead,
+      secondaryBorderColor: colours.ink,
+      tertiaryColor: colours.head,
+      tertiaryTextColor: colours.onHead,
+      tertiaryBorderColor: colours.rule,
+      mainBkg: colours.paper,
+      nodeBorder: colours.ink,
+      nodeTextColor: colours.ink,
+      textColor: colours.ink,
+      titleColor: colours.ink,
+      lineColor: colours.ink,
+      arrowheadColor: colours.ink,
+      clusterBkg: colours.head,
+      clusterBorder: colours.rule,
+      edgeLabelBackground: colours.paper,
+      actorBkg: colours.paper,
+      actorBorder: colours.ink,
+      actorTextColor: colours.ink,
+      actorLineColor: colours.rule,
+      signalColor: colours.ink,
+      signalTextColor: colours.ink,
+      labelBoxBkgColor: colours.ink,
+      labelBoxBorderColor: colours.ink,
+      labelTextColor: colours.paper,
+      loopTextColor: colours.muted,
+      activationBkgColor: colours.head,
+      activationBorderColor: colours.ink,
+      noteBkgColor: colours.head,
+      noteTextColor: colours.onHead,
+      noteBorderColor: colours.rule,
+      sequenceNumberColor: colours.paper,
+      errorBkgColor: colours.red,
+      errorTextColor: colours.red,
+    },
+    flowchart: { curve: "step", padding: 12, nodeSpacing: 40, rankSpacing: 48 },
+    sequence: { rightAngles: true },
+  };
+};
+
+export class MermaidMissing extends Data.TaggedError("MermaidMissing")<{
+  reason: string;
+}> {}
+
+class DiagramError extends Data.TaggedError("DiagramError")<{
+  reason: string;
+}> {}
+
+const reasonOf = (cause: unknown): string =>
+  cause instanceof Error ? cause.message : String(cause);
+
+const DRAWING = Semaphore.makeUnsafe(1);
+
+const loadFace = async (family: string): Promise<FontFace[]> => {
+  const root = getComputedStyle(document.documentElement);
+
+  return await document.fonts.load(
+    `${root.getPropertyValue("--type-body").trim()} ${root.getPropertyValue(family).trim()}`
+  );
+};
+
+export const loadMermaid: Effect.Effect<Mermaid, MermaidMissing> =
+  Effect.tryPromise({
+    try: async () => {
+      const { default: mermaid } = await import("mermaid");
+
+      return mermaid;
+    },
+    catch: (cause) => new MermaidMissing({ reason: reasonOf(cause) }),
+  });
+
+const loadFaces = Effect.tryPromise({
+  try: async () =>
+    await Promise.all([loadFace("--font-px"), loadFace("--font-body")]),
+  catch: (cause) => new DiagramError({ reason: reasonOf(cause) }),
+});
+
+const renderDiagram = (
+  load: Effect.Effect<Mermaid, MermaidMissing>,
+  box: Element,
+  source: string
+): Effect.Effect<string, MermaidMissing | DiagramError> =>
+  Effect.gen(function* () {
+    const [mermaid] = yield* Effect.all([load, loadFaces], {
+      concurrency: "unbounded",
+    });
+
+    return yield* Effect.tryPromise({
+      try: async () => {
+        mermaid.initialize({
+          startOnLoad: false,
+          suppressErrorRendering: true,
+          ...theme(),
+        });
+
+        const { svg } = await mermaid.render(
+          `pixel-paper-diagram-${crypto.randomUUID()}`,
+          source,
+          box
+        );
+
+        return svg;
+      },
+      catch: (cause) => new DiagramError({ reason: reasonOf(cause) }),
+    });
+  }).pipe(Semaphore.withPermit(DRAWING));
+
+/** What a diagram's box reports. `SucceededDrawDiagram`: the diagram is drawn, in `palette`.
+ *  `FailedLoadMermaid`: mermaid did not load (the application has not installed it, or its
+ *  code did not arrive), so no diagram on the page can be drawn. `FailedDrawDiagram`: mermaid
+ *  loaded but this diagram was not drawn, most often because its source does not parse.
+ *  `reason` is the whole diagnostic, several lines for a parse error (the line, a caret under
+ *  the fault, what was expected), so print it as written. */
+export const Message = defineMessageUnion({
+  SucceededDrawDiagram: { palette: Palette },
+  FailedLoadMermaid: { palette: Palette, reason: Schema.String },
+  FailedDrawDiagram: { palette: Palette, reason: Schema.String },
+});
+
+export type Message = typeof Message.Type;
+
+export const drawDiagram =
+  (load: Effect.Effect<Mermaid, MermaidMissing>) =>
+  ({
+    element,
+    source,
+    palette,
+  }: Readonly<{
+    element: Element;
+    source: string;
+    palette: Palette;
+  }>): Effect.Effect<Message> =>
+    renderDiagram(load, element, source).pipe(
+      Effect.tap((svg) =>
+        Effect.sync(() => {
+          element.innerHTML = svg;
+        })
+      ),
+      Effect.as(Message.SucceededDrawDiagram({ palette })),
+      Effect.catchTags({
+        MermaidMissing: ({ reason }) =>
+          Effect.succeed(Message.FailedLoadMermaid({ palette, reason })),
+        DiagramError: ({ reason }) =>
+          Effect.succeed(Message.FailedDrawDiagram({ palette, reason })),
+      })
+    );