2b:null 2c:["$","title",null,{"children":"Bonus Lib | Michael Cooper | Observable"}] 31:[] 2f:{"id":"d0417ff4f60930f2","slug":"bonus-lib","title":"Bonus Lib","thumbnail":"60ed003e67ff23aaa737d66c47e99c445eb0421f4187ed3bfe7d8562f34aefa6","access_level":"public","create_time":"$D2022-05-30T23:57:24.017Z","update_time":"$D2025-10-08T18:56:34.309Z","view_time":null,"first_public_time":"$D2022-06-04T15:12:04.667Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3a9cb3bb8fb63f67","login":"mythmon","name":"Michael Cooper","avatar_url":"https://avatars-next.observableusercontent.com/60cdc428c59f56064db989dbde23b5af37103628a470beeebd56d0c18c206120","tier":"starter_2024"},"version":318,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2ae65df1901fe65","login":"mythmon","name":"Michael Cooper","avatar_url":"https://avatars-next.observableusercontent.com/60cdc428c59f56064db989dbde23b5af37103628a470beeebd56d0c18c206120","tier":null}],"members":[{"type":"individual","id":"b2ae65df1901fe65","login":"mythmon","name":"Michael Cooper","avatar_url":"https://avatars-next.observableusercontent.com/60cdc428c59f56064db989dbde23b5af37103628a470beeebd56d0c18c206120","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bonus Lib","cells":[{"id":0,"value":"# Bonus Lib","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"Like the standard library, but stuff I add often to my notebooks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"## `invalidationListener`\n\nAdds an event listenener to a target, and automatically removes it when the invalidation promise is triggered.\n\n```js\ninvalidationListener(element, eventType, invalidation, (ev) => { /* event fired */ });\n```\n\n${importExample([\"invalidationListener\"])}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"invalidationListener = (target, eventType, theirInvalidation, listener) => {\n target.addEventListener(eventType, listener);\n theirInvalidation.then(() => target.removeEventListener(eventType, listener));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"---\n## `culoriToCss`\nConverts a culori color object to CSS notation\n\n${importExample([\"culoriToCss\"], {importWiths: ['culori']})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":23,"value":"culoriToCss = (c) => culori.formatRgb(culori.rgb(c)).replace(/ /g, \"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"culori = require(\"culori\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"---\n## `stepMarker`\n\nDoesn't work entirely yet. Returns an HTML element that will have incrementing counters, name spaced by the value of `group` you passed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"step = (group) => {\n mutable allStepGroups = new Set([group, ...mutable allStepGroups]);\n return htl.html`

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"mutable allStepGroups = new Set()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"htl.html`\n

Styles are in this cell

${note}: ${text}

`;\n Object.defineProperty(el, \"cue\", {\n get() {\n return cue(code);\n }\n });\n return el;\n }\n\n return { cue, text };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"## Appendix helper\n\nAdds a visual distinction for the appendix of a notebook. See the end of this notebook for an example. Uses @mootari's `spacer` component.\n\n${importExample(['appendix'])}\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":239,"value":"function appendix(options) {\n let { width, ...realOptions } = { text: \"Appendix\", ...options };\n if (width) {\n return htl.html`

${spacer(\n realOptions\n )}

`;\n }\n return spacer(realOptions);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$${appendix()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":39,"value":"importExample = (cells, { importWiths = [] } = {}) => {\n let code = `import {${cells.join(\", \")}} `;\n if (importWiths.length) {\n code += `with {${importWiths.join(\", \")}} `;\n }\n code += `from \"${pinnedSlug}\"`;\n return htl.html`

\n ${Copier(\"Copy import\", {\n value: code\n })} \n

\n ${code}\n