30:[] 2e:{"title":"Bonus Lib","cells":[{"id":0,"value":"# Bonus Lib","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"Like the standard library, but stuff I add often to my notebooks.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":23,"value":"culoriToCss = (c) => culori.formatRgb(culori.rgb(c)).replace(/ /g, \"\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"culori = require(\"culori\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":11,"value":"step = (group) => {\n mutable allStepGroups = new Set([group, ...mutable allStepGroups]);\n return htl.html`

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"mutable allStepGroups = new Set()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":31,"value":"$${appendix()}","pinned":false,"hidden":false,"mode":"md"},{"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