add new libs

package.json

@@ -1,7 +1,7 @@
 {
   "name": "livecodingspace",
   "description": "LiveCoding.Space",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "author": "Nikolai Suslov",
   "homepage": "https://livecoding.space",
   "repository": {

public/index.js

@@ -29,7 +29,8 @@ loadjs([
     '/lib/fun/@most/dom-event/dist/index.js',
     '/lib/fun/ramda.min.js',
     '/lib/fun/infestines.js',
-    '/lib/fun/partial.lenses.min.js'
+    '/lib/fun/partial.lenses.min.js',
+    '/lib/ui/solid-js/s-js/dist/S.js'
 ],'fun', {
     async: false
 });

public/lib/ui/goober/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Cristian Bote
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

public/lib/ui/goober/README.md

@@ -0,0 +1,786 @@
+<p align="center">
+  <img src="./goober_cover.png" width="500" alt="goober" />
+</p>
+
+🥜 goober, a less than 1KB css-in-js solution.
+
+[![Backers on Open Collective](https://opencollective.com/goober/backers/badge.svg)](#backers)
+[![Sponsors on Open Collective](https://opencollective.com/goober/sponsors/badge.svg)](#sponsors)
+
+[![version](https://img.shields.io/npm/v/goober)](https://www.npmjs.com/package/goober)
+[![status](https://travis-ci.org/cristianbote/goober.svg?branch=master)](https://travis-ci.org/cristianbote/goober)
+[![gzip size](https://img.badgesize.io/https://unpkg.com/goober@latest/dist/goober.js?compression=gzip)](https://unpkg.com/goober)
+[![downloads](https://img.shields.io/npm/dm/goober)](https://www.npmjs.com/package/goober)
+[![coverage](https://img.shields.io/codecov/c/github/cristianbote/goober.svg?maxAge=2592000)](https://codecov.io/github/cristianbote/goober?branch=master)
+[![Slack](https://img.shields.io/badge/slack-join-orange)](https://join.slack.com/t/gooberdev/shared_invite/enQtOTM5NjUyOTcwNzI1LWUwNzg0NTQwODY1NDJmMzQ2NzdlODI4YTM3NWUwYjlkY2ZkNGVmMTFlNGMwZGUyOWQyZmI4OTYwYmRiMzE0NGQ)
+[![Greenkeeper badge](https://badges.greenkeeper.io/cristianbote/goober.svg)](https://greenkeeper.io/)
+
+# Motivation
+
+I always wondered, if you can get a working solution for css-in-js with a smaller footprint. So, while I was working on a side-project I wanted a to use styled-components or more accurate the `styled` pattern. Looking at the JavaScript bundled sizes, I quickly realized that I would have to include ~12kB([styled-components](https://github.com/styled-components/styled-components)) or ~11kB([emotion](https://github.com/emotion-js/emotion)) just so I can use the `styled` paradigm. So, I embarked in a mission to create a smaller alternative for these well established apis.
+
+# Why the peanuts emoji?
+
+It's a pun on the tagline.
+
+> css-in-js at the cost of peanuts!
+> 🥜goober
+
+# Table of contents
+
+-   [Usage](#usage)
+-   [Examples](#examples)
+-   [SSR](#ssr)
+-   [Benchmarks](#benchmarks)
+    -   [Browser](#browser)
+    -   [SSR](#ssr-1)
+-   [API](#api)
+    -   [styled](#styledtagname-string--function-forwardref-function)
+    -   [setup](#setuppragma-function-prefixer-function-theme-function-forwardprops-function)
+        -   [With prefixer](#with-prefixer)
+        -   [With theme](#with-theme)
+        -   [With forwardProps](#with-forwardProps)
+    -   [css](#csstaggedtemplate)
+    -   [targets](#targets)
+    -   [extractCss](#extractcsstarget)
+    -   [createGlobalStyles](#createglobalstyles)
+    -   [keyframes](#keyframes)
+    -   [shouldForwardProp](#shouldForwardProp)
+-   [Integrations](#integrations)
+    -   [Babel Plugin](#babel-plugin)
+    -   [Babel Macro Plugin](#babel-macro-plugin)
+    -   [Gatsby](#gatsby)
+    -   [Preact CLI Plugin](#preact-cli-plugin)
+    -   [CSS Prop](#css-prop)
+-   [Features](#features)
+    -   [Sharing Style](#sharing-style)
+    -   [Autoprefixer](#autoprefixer)
+    -   [TypeScript](#typescript)
+-   [Browser Support](#browser-support)
+-   [Contributing](#contributing)
+
+# Usage
+
+The API is inspired by emotion, `styled` function. Meaning, you call it with your `tagName` and returns a vDOM component for that tag. Note, `setup` is needed to be run before the `styled` function is used.
+
+```jsx
+import { h } from 'preact';
+import { styled, setup } from 'goober';
+
+// Should be called here, and just once
+setup(h);
+
+const Icon = styled('span')`
+    display: flex;
+    flex: 1;
+    color: red;
+`;
+
+const Button = styled('button')`
+    background: dodgerblue;
+    color: white;
+    border: ${Math.random()}px solid white;
+
+    &:focus,
+    &:hover {
+        padding: 1em;
+    }
+
+    .otherClass {
+        margin: 0;
+    }
+
+    ${Icon} {
+        color: black;
+    }
+`;
+```
+
+# Examples
+
+-   [Vanilla](https://codesandbox.io/s/qlywyp7z4q)
+-   [React](https://codesandbox.io/s/k0mnp40n7v)
+-   [Preact](https://codesandbox.io/s/r15wj2qm7o)
+-   [SSR with Preact](https://codesandbox.io/s/7m9zzl6746)
+-   [Fre](https://codesandbox.io/s/fre-goober-ffqjv)
+
+# SSR
+
+You can get the critical CSS for SSR, via `extractCss`. Take a look at this example: [CodeSandbox: SSR with Preact and goober](https://codesandbox.io/s/7m9zzl6746) and read the full explanation for `extractCSS` and `targets` below.
+
+# Benchmarks
+
+The results are included inside the build output as well.
+
+## Browser
+
+Comming soon!
+
+## SSR
+
+The benchmark is testing the following scenario:
+
+```jsx
+import styled from 'package';
+
+// Create the dynamic styled component
+const Foo = styled('div')((props) => ({
+    opacity: props.counter > 0.5 ? 1 : 0,
+    '@media (min-width: 1px)': {
+        rule: 'all'
+    },
+    '&:hover': {
+        another: 1,
+        display: 'space'
+    }
+}));
+
+// Serialize the component
+renderToString(<Foo counter={Math.random()} />);
+```
+
+The results are:
+
+```
+goober x 200,437 ops/sec ±1.93% (87 runs sampled)
+styled-components@5.2.1 x 12,650 ops/sec ±9.09% (48 runs sampled)
+emotion@11.0.0 x 104,229 ops/sec ±2.06% (88 runs sampled)
+
+Fastest is: goober
+```
+
+# API
+
+As you can see it supports most of the syntaxes of CSS. If you find any issues, please submit a ticket or even a PR with a fix.
+
+### `styled(tagName: String | Function, forwardRef?: Function)`
+
+-   `@param {String|Function} tagName` The name of the dom element you'd like the styled to be applied to
+-   `@param {Function} forwardRef` Forward ref function. Usually `React.forwardRef`
+-   `@returns {Function}` Returns the tag template function.
+
+```js
+import { styled } from 'goober';
+
+const Btn = styled('button')`
+    border-radius: 4px;
+`;
+```
+
+#### Different ways of customizing the styles
+
+##### Tagged templates functions
+
+```js
+import { styled } from 'goober';
+
+const Btn = styled('button')`
+    border-radius: ${(props) => props.size}px;
+`;
+
+<Btn size={20} />;
+```
+
+##### Function that returns a string
+
+```js
+import { styled } from 'goober';
+
+const Btn = styled('button')(
+    (props) => `
+  border-radius: ${props.size}px;
+`
+);
+
+<Btn size={20} />;
+```
+
+##### JSON/Object
+
+```js
+import { styled } from 'goober';
+
+const Btn = styled('button')((props) => ({
+    borderRadius: props.size + 'px'
+}));
+
+<Btn size={20} />;
+```
+
+##### Arrays
+
+```js
+import { styled } from 'goober';
+
+const Btn = styled('button')([
+    { color: 'tomato' },
+    ({ isPrimary }) => ({ background: isPrimary ? 'cyan' : 'gray' })
+]);
+
+<Btn />; // This will render the `Button` with `background: gray;`
+<Btn isPrimary />; // This will render the `Button` with `background: cyan;`
+```
+
+##### Forward ref function
+
+As goober is JSX library agnostic, you need to pass in the forward ref function for the library you are using. Here's how you do it for React.  
+
+```js
+const Title = styled("h1", React.forwardRef)`
+  font-weight: bold;
+  color: dodgerblue;
+`;
+```
+
+
+### `setup(pragma: Function, prefixer?: Function, theme?: Function, forwardProps?: Function)`
+
+Given the fact that `react` uses `createElement` for the transformed elements and `preact` uses `h`, `setup` should be called with the proper _pragma_ function. This was added to reduce the bundled size and being able to bundle esmodule version. At the moment I think it's the best tradeoff we can have.
+
+```js
+import React from 'react';
+import { setup } from 'goober';
+
+setup(React.createElement);
+```
+
+#### With prefixer
+
+```js
+import React from 'react';
+import { setup } from 'goober';
+
+const customPrefixer = (key, value) => `${key}: ${value};\n`;
+
+setup(React.createElement, customPrefixer);
+```
+
+#### With theme
+
+```js
+import React, { createContext, useContext, createElement } from 'react';
+import { setup, styled } from 'goober';
+
+const theme = { primary: 'blue' };
+const ThemeContext = createContext(theme);
+const useTheme = () => useContext(ThemeContext);
+
+setup(createElement, undefined, useTheme);
+
+const ContainerWithTheme = styled('div')`
+    color: ${(props) => props.theme.primary};
+`;
+```
+
+#### With forwardProps
+
+The `forwardProps` function, offers a way to achieve the same `shouldForwardProps` functionality as emotion and styled-components(with transient props) offer. The difference in here is that the function receives the whole props and you are in charge of removing the props that are should not end-up in the dom.
+
+This is a super useful functionality when paired with theme object, variants or any other customisation one might need.
+
+```js
+import React from 'react';
+import { setup, styled } from 'goober';
+
+setup(React.createElement, undefined, undefined, (props) => {
+    for (let prop in props) {
+        // Or any other conditions.
+        // This could also check if this is a dev build and not remove the props
+        if (prop === 'size') {
+            delete props[prop];
+        }
+    }
+});
+```
+
+The functionality of "transient props" (with a "\$" prefix) can be implemented as follows:
+
+```js
+import React from 'react';
+import { setup, styled } from 'goober';
+
+setup(React.createElement, undefined, undefined, (props) => {
+    for (let prop in props) {
+        if (prop[0] === '$') {
+            delete props[prop];
+        }
+    }
+});
+```
+
+Alternatively you can use `goober/should-forward-prop` addon, to pass only the filter function and not have to deal with the full `props` object.
+
+```js
+import React from 'react';
+import { setup, styled } from 'goober';
+import { shouldForwardProp } from 'goober/should-forward-prop';
+
+setup(
+    React.createElement,
+    undefined,
+    undefined,
+    // This package accepts a `filter` function. If you return false that prop
+    // won't be included in the forwarded props.
+    shouldForwardProp((prop) => {
+        return prop !== 'size';
+    })
+);
+```
+
+### `css(taggedTemplate)`
+
+-   `@returns {String}` Returns the className.
+
+To create a className, you need to call `css` with your style rules in a tagged template.
+
+```js
+import { css } from "goober";
+
+const BtnClassName = css`
+  border-radius: 4px;
+`;
+
+// vanilla JS
+const btn = document.querySelector("#btn");
+// BtnClassName === 'g016232'
+btn.classList.add(BtnClassName);
+
+// JSX
+// BtnClassName === 'g016232'
+const App => <button className={BtnClassName}>click</button>
+```
+
+#### Different ways of customizing `css`
+
+##### Passing props to `css` tagged templates
+
+```js
+import { css } from 'goober';
+
+// JSX
+const CustomButton = (props) => (
+    <button
+        className={css`
+            border-radius: ${props.size}px;
+        `}
+    >
+        click
+    </button>
+);
+```
+
+##### Using `css` with JSON/Object
+
+```js
+import { css } from 'goober';
+const BtnClassName = (props) =>
+    css({
+        background: props.color,
+        borderRadius: props.radius + 'px'
+    });
+```
+
+**Notice:** using `css` with object can reduce your bundle size.
+
+We also can declare the styles at the top of the file by wrapping `css` into a function that we call to get the className.
+
+```js
+import { css } from 'goober';
+
+const BtnClassName = (props) => css`
+    border-radius: ${props.size}px;
+`;
+
+// vanilla JS
+// BtnClassName({size:20}) -> g016360
+const btn = document.querySelector('#btn');
+btn.classList.add(BtnClassName({ size: 20 }));
+
+// JSX
+// BtnClassName({size:20}) -> g016360
+const App = () => <button className={BtnClassName({ size: 20 })}>click</button>;
+```
+
+The difference between calling `css` directly and wrapping into a function is the timing of its execution. The former is when the component(file) is imported, the latter is when it is actually rendered.
+
+If you use `extractCSS` for SSR, you may prefer to use the latter or `styled` api to avoid inconsistent results.
+
+### `targets`
+
+By default, goober will append a style tag to the `<head>` of a document. You might want to target a different node, for instance, when you want to use goober with web components (so you'd want it to append style tags to individual shadowRoots). For this purpose, you can `.bind` a new target to the `styled` and `css` methods:
+
+```js
+import * as goober from 'goober';
+const target = document.getElementById('target');
+const css = goober.css.bind({ target: target });
+const styled = goober.styled.bind({ target: target });
+```
+
+If you don't provide a target, goober always defaults to `<head>` and in environments without a DOM (think certain SSR solutions), it will just use a plain string cache to store generated styles which you can extract with `extractCSS`(see below).
+
+### `extractCss(target?)`
+
+-   `@returns {String}`
+
+Returns the `<style>` tag that is rendered in a target and clears the style sheet. Defaults to `<head>`.
+
+```js
+const { extractCss } = require('goober');
+
+// After your app has rendered, just call it:
+const styleTag = `<style id="_goober">${extractCss()}</style>`;
+
+// Note: To be able to `hydrate` the styles you should use the proper `id` so `goober` can pick it up and use it as the target from now on
+```
+
+### `createGlobalStyles`
+
+To define your global styles you need to create a `GlobalStyles` component and use it as part of your tree. The `createGlobalStyles` is available at `goober/global` addon.
+
+```js
+import { createGlobalStyles } from 'goober/global';
+
+const GlobalStyles = createGlobalStyles`
+  html,
+  body {
+    background: light;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+`;
+
+export default function App() {
+    return (
+        <div id="root">
+            <GlobalStyles />
+            <Navigation>
+            <RestOfYourApp>
+        </div>
+    )
+}
+```
+
+#### How about using `glob` function directly?
+
+Before the global addon, `goober/global`, there was a method named `glob` that was part of the main package that would do the same thing, more or less. Having only that method to define global styles usually led to missing global styles from the extracted css, since the pattern did not enforced the evaluation of the styles at render time. The `glob` method it is still exported from `goober/global` if you have a hard dependency on it. It still has the same API:
+
+```js
+import { glob } from 'goober';
+
+glob`
+  html,
+  body {
+    background: light;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+`;
+```
+
+### `keyframes`
+
+`keyframes` is a helpful method to define reusable animations that can be decoupled from the main style declaration and shared across components.
+
+```js
+import { keyframes } from 'goober';
+
+const rotate = keyframes`
+    from, to {
+        transform: rotate(0deg);
+    }
+
+    50% {
+        transform: rotate(180deg);
+    }
+`;
+
+const Wicked = styled('div')`
+    background: tomato;
+    color: white;
+    animation: ${rotate} 1s ease-in-out;
+`;
+```
+
+### `shouldForwardProp`
+
+To seamingly implement the `shouldForwardProp` without the need to provide the full loop over `props` you can use the `goober/should-forward-prop` addon.
+
+```js
+import { h } from 'preact';
+import { setup } from 'goober';
+import { shouldForwardProp } from 'goober/should-forward-prop';
+
+setup(
+    h,
+    undefined,
+    undefined,
+    shouldForwardProp((prop) => {
+        // Do NOT forward props that start with `$` symbol
+        return prop['0'] !== '$';
+    })
+);
+```
+
+# Integrations
+
+## Babel plugin
+
+You're in love with the `styled.div` syntax? Fear no more! We got you covered with a babel plugin that will take your lovely syntax from `styled.tag` and translate it to goober's `styled("tag")` call.
+
+```sh
+npm i --save-dev babel-plugin-transform-goober
+# or
+yarn add --dev babel-plugin-transform-goober
+```
+
+Visit the package in here for more info (https://github.com/cristianbote/goober/tree/master/packages/babel-plugin-transform-goober)
+
+## Babel macro plugin
+
+A babel-plugin-macros macro for [🥜goober][goober], rewriting `styled.div` syntax to `styled('div')` calls.
+
+### Usage
+
+Once you've configured [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros), change your imports from `goober` to `goober/macro`.
+
+Now you can create your components using `styled.*` syntax:.
+
+```js
+import { styled } from 'goober/macro';
+
+const Button = styled.button`
+    margin: 0;
+    padding: 1rem;
+    font-size: 1rem;
+    background-color: tomato;
+`;
+```
+
+## [Gatsby](https://github.com/gatsbyjs/gatsby)
+
+Want to use `goober` with Gatsby? We've got you covered! We have our own plugin to deal with styling your Gatsby projects.
+
+```sh
+npm i --save goober gatsby-plugin-goober
+# or
+yarn add goober gatsby-plugin-goober
+```
+
+## Preact CLI plugin
+
+If you use Goober with Preact CLI, you can use [preact-cli-goober-ssr](https://github.com/gerhardsletten/preact-cli-goober-ssr)
+
+```sh
+npm i --save-dev preact-cli-goober-ssr
+# or
+yarn add --dev preact-cli-goober-ssr
+
+# preact.config.js
+const gooberPlugin = require('preact-cli-goober-ssr')
+
+export default (config, env) => {
+  gooberPlugin(config, env)
+}
+```
+
+When you build your Preact application this will run `extractCss` on your prerendered pages and add critical styles for each page.
+
+## CSS Prop
+
+You can use a custom `css` prop to pass in styles on HTML elements with this Babel plugin.
+
+Installation:
+
+```sh
+npm install --save-dev @agney/babel-plugin-goober-css-prop
+```
+
+List the plugin in `.babelrc`:
+
+```
+{
+  "plugins": [
+    "@agney/babel-plugin-goober-css-prop"
+  ]
+}
+```
+
+Usage:
+
+```javascript
+<main
+    css={`
+        display: flex;
+        min-height: 100vh;
+        justify-content: center;
+        align-items: center;
+    `}
+>
+    <h1 css="color: dodgerblue">Goober</h1>
+</main>
+```
+
+# Features
+
+-   [x] Basic CSS parsing
+-   [x] Nested rules with pseudo selectors
+-   [x] Nested styled components
+-   [x] [Extending Styles](#sharing-style)
+-   [x] Media queries (@media)
+-   [x] Keyframes (@keyframes)
+-   [x] Smart(lazy) client-side hydration
+-   [x] Styling any component
+    -   via `` const Btn = ({className}) => {...}; const TomatoBtn = styled(Btn)`color: tomato;` ``
+-   [x] Vanilla(via `css` function)
+-   [x] `globalStyle`(via `glob`) so one would be able to create global styles
+-   [x] target/extract from elements other than `<head>`
+-   [x] [vendor prefixing](#autoprefixer)
+
+# Sharing style
+
+There are a couple of ways to effectly share/extend styles across components.
+
+## Extending
+
+One can simply extend the desired component that needs to be enrich or overwriten with another set of css rules.
+
+```js
+import { styled } from 'goober';
+
+// Let's declare a primitive for our styled component
+const Primitive = styled('span')`
+    margin: 0;
+    padding: 0;
+`;
+
+// Later on we could get the primitive shared styles and also add our owns
+const Container = styled(Primitive)`
+    padding: 1em;
+`;
+```
+
+## Using `as` prop
+
+Another helpful way to extend a certain component is with the `as` property. Given our example above we could modify it like:
+
+```jsx
+import { styled } from 'goober';
+
+// Our primitive element
+const Primitive = styled('span')`
+    margin: 0;
+    padding: 0;
+`;
+
+const Container = styled('div')`
+    padding: 1em;
+`;
+
+// At composition/render time
+<Primitive as={'div'} /> // <div class="go01234" />
+
+// Or using the `Container`
+<Primitive as={Container} /> // <div class="go01234 go56789" />
+```
+
+# Autoprefixer
+
+Autoprefixing is a helpful way to make sure the generated css will work seamlessly on the whole spectrum of browsers. With that in mind, the core `goober` package can't hold that logic to determine the autoprefixing needs, so we added a new package that you can choose to address them.
+
+```sh
+npm install goober
+# or
+yarn add goober
+```
+
+After the main package is installed it's time to bootstrap goober with it:
+
+```js
+import { setup } from 'goober';
+import { prefix } from 'goober/prefixer';
+
+// Bootstrap goober
+setup(React.createElement, prefix);
+```
+
+And voila! It is done!
+
+# TypeScript
+
+`goober` comes with type definitions build in, making it easy to get started in TypeScript straight away.
+
+## Prop Types
+
+If you're utilising custom props and wish to style based on them, you can do so when initialising as follows:
+
+```ts
+interface Props {
+    size: number;
+}
+
+styled('div')<Props>`
+    border-radius: ${(props) => props.size}px;
+`;
+
+// This also works!
+
+styled<Props>('div')`
+    border-radius: ${(props) => props.size}px;
+`;
+```
+
+## Extending Theme
+
+If you're using a [custom theme](../api/setup.md#with-theme) with goober, to add types to it you should create a declaration file at the base of your project.
+
+```ts
+// goober.d.t.s
+
+import 'goober';
+
+declare module 'goober' {
+    export interface DefaultTheme {
+        colors: {
+            primary: string;
+        };
+    }
+}
+```
+
+You should now have autocompletion for your theme.
+
+```ts
+const ThemeContainer = styled('div')`
+    background-color: ${(props) => props.theme.colors.primary};
+`;
+```
+
+# Browser support
+
+`goober` uses microbundle to bundle and transpile it's src into code that browsers can leverage. As you might figure it out, until now, Internet Explorer was the buggiest of them all. `goober` works on IE9, as we've successfully test it.
+
+```
+IE 9
+iOS 9.3
+Chrome 42
+FF 34
+Safari 9
+```
+
+# Contributing
+
+Feel free to try it out and checkout the examples. If you wanna fix something feel free to open a issue or a PR.
+
+## Backers
+
+Thank you to all our backers! 🙏
+<a href="https://opencollective.com/goober#backers" target="_blank"><img src="https://opencollective.com/goober/backers.svg?width=890"></a>
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
+<a href="https://opencollective.com/goober#sponsors" target="_blank"><img src="https://opencollective.com/goober/sponsors.svg?width=890"></a>

public/lib/ui/goober/global/dist/goober-global.esm.js

@@ -0,0 +1 @@
+import{css as n,styled as l}from"goober";let o=n.bind({g:1});function r(){const n=l.call({g:1},"div").apply(null,arguments);return function(l){return n(l),null}}export{r as createGlobalStyles,o as glob};

public/lib/ui/goober/global/dist/goober-global.js

@@ -0,0 +1 @@
+var l=require("goober");let e=l.css.bind({g:1});exports.createGlobalStyles=function(){const e=l.styled.call({g:1},"div").apply(null,arguments);return function(l){return e(l),null}},exports.glob=e;

public/lib/ui/goober/global/dist/goober-global.modern.js

@@ -0,0 +1 @@
+import{css as n,styled as l}from"goober";let o=n.bind({g:1});function r(){const n=l.call({g:1},"div").apply(null,arguments);return function(l){return n(l),null}}export{r as createGlobalStyles,o as glob};

public/lib/ui/goober/global/dist/goober-global.umd.js

@@ -0,0 +1 @@
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("goober")):"function"==typeof define&&define.amd?define(["exports","goober"],o):o((e=e||self).gooberGlobal={},e.goober)}(this,function(e,o){let n=o.css.bind({g:1});e.createGlobalStyles=function(){const e=o.styled.call({g:1},"div").apply(null,arguments);return function(o){return e(o),null}},e.glob=n});

public/lib/ui/goober/global/global.d.ts

@@ -0,0 +1,19 @@
+import { Properties as CSSProperties } from 'csstype';
+export = gooberGlobal;
+
+export as namespace gooberGlobal;
+
+declare namespace gooberGlobal {
+    interface CSSAttribute extends CSSProperties {
+        [key: string]: CSSAttribute | string | number | undefined;
+    }
+
+    function createGlobalStyles(
+        tag: CSSAttribute | TemplateStringsArray | string,
+        ...props: Array<string | number | Function>
+    ): Function;
+    function glob(
+        tag: CSSAttribute | TemplateStringsArray | string,
+        ...props: Array<string | number>
+    ): void;
+}

public/lib/ui/goober/global/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "goober-global",
+  "amdName": "gooberGlobal",
+  "version": "0.0.1",
+  "description": "The createGlobalStyles addon function for goober",
+  "sideEffects": false,
+  "main": "dist/goober-global.js",
+  "module": "dist/goober-global.esm.js",
+  "umd:main": "dist/goober-global.umd.js",
+  "source": "src/index.js",
+  "unpkg": "dist/goober-global.umd.js",
+  "types": "./global.d.ts",
+  "scripts": {
+    "build": "rm -rf dist && microbundle --entry src/index.js --name gooberGlobal --no-sourcemap",
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cristianbote/goober.git",
+    "directory": "global"
+  },
+  "author": "Cristian <botecristian@yahoo.com>",
+  "keywords": [
+    "goober",
+    "styled",
+    "global"
+  ],
+  "license": "ISC",
+  "peerDependencies": {
+    "goober": "^2.0.29"
+  },
+  "devDependencies": {
+    "goober": "^2.0.29",
+    "microbundle": "^0.12.4",
+    "jest": "^24.1.0",
+    "preact": "^10.5.6",
+    "@babel/plugin-transform-react-jsx": "^7.7.0",
+    "@babel/preset-env": "^7.3.1",
+    "babel-jest": "^24.1.0"
+  }
+}

public/lib/ui/goober/global/src/__tests__/__snapshots__/integration.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createGlobalStyles regular 1`] = `" html, body{background:dodgerblue;}"`;
+
+exports[`createGlobalStyles regular 2`] = `"<div></div>"`;
+
+exports[`createGlobalStyles with theme 1`] = `"html, body{margin:0;background:blue;}"`;
+
+exports[`createGlobalStyles with theme 2`] = `"<div></div>"`;

public/lib/ui/goober/global/src/__tests__/global.test.js

@@ -0,0 +1,22 @@
+import { glob, createGlobalStyles } from '../index';
+import { css, setup } from 'goober';
+
+jest.mock('goober', () => ({
+    css: jest.fn().mockReturnValue('css()')
+}));
+
+describe('global', () => {
+    beforeEach(() => {
+        css.mockClear();
+    });
+
+    it('type', () => {
+        expect(typeof glob).toEqual('function');
+        expect(typeof createGlobalStyles).toEqual('function');
+    });
+
+    it('glob', () => {
+        glob`a:b`;
+        expect(css).toBeCalledWith(['a:b']);
+    });
+});

public/lib/ui/goober/global/src/__tests__/integration.test.js

@@ -0,0 +1,56 @@
+import { h, createContext, render } from 'preact';
+import { useContext } from 'preact/hooks';
+import { setup, extractCss } from 'goober';
+import { createGlobalStyles } from '../index';
+
+describe('createGlobalStyles', () => {
+    it('regular', () => {
+        setup(h);
+
+        const target = document.createElement('div');
+
+        const GlobalStyle = createGlobalStyles`
+            html, body {
+                background: dodgerblue;
+            }
+        `;
+
+        render(
+            <div>
+                <GlobalStyle />
+            </div>,
+            target
+        );
+
+        expect(extractCss()).toMatchSnapshot();
+        expect(target.innerHTML).toMatchSnapshot();
+    });
+
+    it('with theme', () => {
+        const ThemeContext = createContext();
+        const useTheme = () => useContext(ThemeContext);
+
+        setup(h, null, useTheme);
+
+        const target = document.createElement('div');
+
+        const GlobalStyle = createGlobalStyles`
+            html, body {
+                margin: 0;
+                background: ${(props) => props.theme.color};
+            }
+        `;
+
+        render(
+            <ThemeContext.Provider value={{ color: 'blue' }}>
+                <div>
+                    <GlobalStyle />
+                </div>
+            </ThemeContext.Provider>,
+            target
+        );
+
+        expect(extractCss()).toMatchSnapshot();
+        expect(target.innerHTML).toMatchSnapshot();
+    });
+});

public/lib/ui/goober/global/src/index.js

@@ -0,0 +1,26 @@
+import { css, styled } from 'goober';
+
+/**
+ * CSS Global function to declare global styles
+ * @type {Function}
+ */
+export let glob = css.bind({ g: 1 });
+
+/**
+ * Creates the global styles component to be used as part of your tree.
+ * @returns {Function}
+ */
+export function createGlobalStyles() {
+    const fn = styled.call({ g: 1 }, 'div').apply(null, arguments);
+
+    /**
+     * This is the actual component that gets rendered.
+     */
+    return function GlobalStyles(props) {
+        // Call the above styled.
+        fn(props);
+
+        // Returns a hole.
+        return null;
+    };
+}

public/lib/ui/goober/goober.d.ts

@@ -0,0 +1,83 @@
+import { Properties as CSSProperties } from 'csstype';
+
+export = goober;
+
+export as namespace goober;
+
+declare namespace goober {
+    interface DefaultTheme {}
+
+    type Theme<T extends object> = keyof T extends never ? T : { theme: T };
+
+    interface StyledFunction {
+        // used when creating a styled component from a native HTML element
+        <T extends keyof JSX.IntrinsicElements, P extends Object = {}>(
+            tag: T,
+            forwardRef?: ForwardRefFunction
+        ): Tagged<
+            JSX.LibraryManagedAttributes<T, JSX.IntrinsicElements[T]> & P & Theme<DefaultTheme>
+        >;
+
+        // used to extend other styled components. Inherits props from the extended component
+        <PP extends Object = {}, P extends Object = {}>(
+            tag: StyledVNode<PP>,
+            forwardRef?: ForwardRefFunction
+        ): Tagged<PP & P & Theme<DefaultTheme>>;
+
+        // used when creating a component from a string (html native) but using a non HTML standard
+        // component, such as when you want to style web components
+        <P extends Object = {}>(tag: string): Tagged<P & Partial<JSX.ElementChildrenAttribute>>;
+
+        // used to create a styled component from a JSX element (both functional and class-based)
+        <T extends JSX.Element | JSX.ElementClass, P extends Object = {}>(
+            tag: T,
+            forwardRef?: ForwardRefFunction
+        ): Tagged<P>;
+    }
+
+    type ForwardRefFunction = {
+        (props: any, ref: any): any;
+    };
+
+    type ForwardPropsFunction = {
+        (props: object): undefined;
+    };
+
+    const styled: StyledFunction;
+    function setup<T>(
+        val: T,
+        prefixer?: (key: string, val: any) => string,
+        theme?: Function,
+        forwardProps?: ForwardPropsFunction
+    ): void;
+    function extractCss(): string;
+    function glob(
+        tag: CSSAttribute | TemplateStringsArray | string,
+        ...props: Array<string | number>
+    ): void;
+    function css(
+        tag: CSSAttribute | TemplateStringsArray | string,
+        ...props: Array<string | number>
+    ): string;
+    function keyframes(
+        tag: CSSAttribute | TemplateStringsArray | string,
+        ...props: Array<string | number>
+    ): string;
+    type StyledVNode<T> = (props: T, ...args: any[]) => any;
+    type Tagged<P extends Object = {}> = <PP extends Object = {}>(
+        tag:
+            | CSSAttribute
+            | CSSAttribute[]
+            | TemplateStringsArray
+            | string
+            | ((props: P & PP) => CSSAttribute | string),
+        ...props: Array<
+            | string
+            | number
+            | ((props: P & PP) => CSSAttribute | string | number | false | undefined)
+        >
+    ) => StyledVNode<Omit<P & PP, keyof Theme<DefaultTheme>>>;
+    interface CSSAttribute extends CSSProperties {
+        [key: string]: CSSAttribute | string | number | undefined;
+    }
+}

public/lib/ui/goober/macro/index.js

@@ -0,0 +1,43 @@
+const { createMacro, MacroError } = require('babel-plugin-macros');
+const { addNamed } = require('@babel/helper-module-imports');
+
+module.exports = createMacro(gooberMacro);
+
+function gooberMacro({ references, babel, state }) {
+    const program = state.file.path;
+
+    if (references.default) {
+        throw new MacroError('goober.macro does not support default import');
+    }
+
+    // Inject import {...} from 'goober'
+    Object.keys(references).forEach((refName) => {
+        const id = addNamed(program, refName, 'goober');
+        references[refName].forEach((referencePath) => {
+            referencePath.node.name = id.name;
+        });
+    });
+
+    const t = babel.types;
+
+    const styledReferences = references.styled || [];
+
+    styledReferences.forEach((referencePath) => {
+        const type = referencePath.parentPath.type;
+
+        if (type === 'MemberExpression') {
+            const node = referencePath.parentPath.node;
+            const functionName = node.object.name;
+            let elementName = node.property.name;
+
+            // Support custom elements
+            if (/[A-Z]/.test(elementName)) {
+                elementName = elementName.replace(/[A-Z]/g, '-$&').toLowerCase();
+            }
+
+            referencePath.parentPath.replaceWith(
+                t.callExpression(t.identifier(functionName), [t.stringLiteral(elementName)])
+            );
+        }
+    });
+}

public/lib/ui/goober/macro/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "goober.macro",
+  "version": "1.0.0",
+  "description": "A babel macro for goober, rewriting styled.div to styled('div') calls",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cristianbote/goober.git",
+    "directory": "macro"
+  },
+  "author": "Hadeeb Farhan <hadeebfarhan1@gmail.com>",
+  "keywords": [
+    "babel-plugin-macros",
+    "goober",
+    "styled"
+  ],
+  "license": "ISC",
+  "peerDependencies": {
+    "@babel/helper-module-imports": "^7.8.3",
+    "babel-plugin-macros": "^2.8.0"
+  }
+}

public/lib/ui/goober/package.json

@@ -0,0 +1,150 @@
+{
+  "name": "goober",
+  "version": "2.0.37",
+  "description": "A less than 1KB css-in-js solution",
+  "sideEffects": false,
+  "main": "dist/goober.js",
+  "module": "dist/goober.esm.js",
+  "umd:main": "dist/goober.umd.js",
+  "source": "src/index.js",
+  "unpkg": "dist/goober.umd.js",
+  "types": "goober.d.ts",
+  "files": [
+    "src",
+    "macro",
+    "global/dist",
+    "global/src",
+    "global/package.json",
+    "global/global.d.ts",
+    "prefixer/dist",
+    "prefixer/src",
+    "prefixer/package.json",
+    "prefixer/autoprefixer.d.ts",
+    "prefixer/README.md",
+    "should-forward-prop/dist",
+    "should-forward-prop/src",
+    "should-forward-prop/package.json",
+    "should-forward-prop/should-forward-prop.d.ts",
+    "should-forward-prop/README.md",
+    "README.md",
+    "dist",
+    "package.json",
+    "typings.json",
+    "goober.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/goober.js",
+      "browser": "./dist/goober.modern.js",
+      "import": "./dist/goober.esm.js",
+      "umd": "./dist/goober.umd.js"
+    },
+    "./macro": "./macro/index.js",
+    "./global": {
+      "browser": "./global/dist/goober-global.modern.js",
+      "import": "./global/dist/goober-global.esm.js",
+      "require": "./global/dist/goober-global.js",
+      "umd": "./global/dist/goober-global.umd.js"
+    },
+    "./prefixer": {
+      "browser": "./prefixer/dist/goober-autoprefixer.modern.js",
+      "import": "./prefixer/dist/goober-autoprefixer.esm.js",
+      "require": "./prefixer/dist/goober-autoprefixer.js",
+      "umd": "./prefixer/dist/goober-autoprefixer.umd.js"
+    },
+    "./should-forward-prop": {
+      "browser": "./should-forward-prop/dist/goober-should-forward-prop.modern.js",
+      "import": "./should-forward-prop/dist/goober-should-forward-prop.esm.js",
+      "require": "./should-forward-prop/dist/goober-should-forward-prop.js",
+      "umd": "./should-forward-prop/dist/goober-should-forward-prop.umd.js"
+    }
+  },
+  "scripts": {
+    "test": "npm run test-ts && npm run test-unit -- --ci --coverage && npm run build && npm run test-perf",
+    "test-perf": "NODE_ENV=production node benchmarks/perf.js",
+    "test-perf-hash": "NODE_ENV=production node benchmarks/perf-hash.js",
+    "test-unit": "jest --setupFiles ./tests/setup.js --roots ./src packages && npm run test-addon-global && npm run test-addon-prefixer",
+    "test-addon-global": "cd global && npm run test",
+    "test-addon-prefixer": "cd prefixer && npm run test",
+    "test-ts": "tsc -p ts-tests",
+    "clean": "rimraf dist",
+    "size-check": "filesize",
+    "build": "npm run build:core && npm run build:prefixer && npm run build:global && npm run build:should-forward-prop",
+    "build:prefixer": "cd ./prefixer && npm run build",
+    "build:global": "cd ./global && npm run build",
+    "build:should-forward-prop": "cd ./should-forward-prop && npm run build",
+    "build:core": "npm run clean && npm run build:dist && npm run size-check",
+    "build:lib": "microbundle --entry src/index.js --name goober --no-sourcemap",
+    "build:dist": "npm run build:lib -- --output dist",
+    "build:debug": "npm run build:lib -- --output debug --no-compress",
+    "dev": "npm run clean && microbundle watch --entry src/index.js --output dist --name goober",
+    "deploy": "npm run build && npm publish",
+    "format": "prettier \"**/*.{js,ts,tsx,md}\" --write"
+  },
+  "keywords": [
+    "css-in-js",
+    "goober",
+    "styled",
+    "emotion",
+    "styled-components",
+    "javascript",
+    "react",
+    "preact"
+  ],
+  "author": "Cristian <botecristian@yahoo.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cristianbote/goober"
+  },
+  "license": "ISC",
+  "devDependencies": {
+    "@ampproject/filesize": "^4.0.0",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-transform-react-jsx": "^7.7.0",
+    "@babel/preset-env": "^7.3.1",
+    "@emotion/core": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@emotion/react": "^11.1.4",
+    "@types/react": "^16.9.34",
+    "babel-jest": "^24.1.0",
+    "benchmark": "^2.1.4",
+    "csstype": "^2.6.3",
+    "husky": "4.2.4",
+    "jest": "^24.1.0",
+    "lint-staged": "10.2.0",
+    "microbundle": "^0.12.0",
+    "preact": "^10.0.0",
+    "prettier": "2.0.5",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "rimraf": "3.0.2",
+    "styled-components": "^5.2.1",
+    "typescript": "^3.6.3"
+  },
+  "peerDependencies": {
+    "csstype": "^2.6.2"
+  },
+  "typings": "./goober.d.ts",
+  "filesize": {
+    "./dist/goober.modern.js": {
+      "gzip": "1200B"
+    },
+    "./dist/goober.js": {
+      "gzip": "1200B"
+    }
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx,md}": [
+      "prettier --write"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "collective": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/goober"
+  }
+}

public/lib/ui/goober/prefixer/README.md

@@ -0,0 +1,20 @@
+# goober-autoprefixer
+
+A css autoprefixer for [🥜goober](https://github.com/cristianbote/goober) using [style-vendorizer](https://github.com/kripod/style-vendorizer).
+
+## Install
+
+`npm install --save goober`
+
+## How to use it
+
+This packages exports a `prefix` function that needs to be passed to goober's `setup` function like this:
+
+```jsx
+import React from 'react';
+import { setup } from 'goober';
+import { prefix } from 'goober/prefixer';
+
+// Setup goober for react with autoprefixer
+setup(React.createElement, prefix);
+```

public/lib/ui/goober/prefixer/autoprefixer.d.ts

@@ -0,0 +1,7 @@
+export = autoprefixer;
+
+export as namespace autoprefixer;
+
+declare namespace autoprefixer {
+    function prefix(key: string, val: any): string;
+}

public/lib/ui/goober/prefixer/dist/goober-autoprefixer.esm.js

@@ -0,0 +1 @@
+var i=new Map([["align-self","-ms-grid-row-align"],["color-adjust","-webkit-print-color-adjust"],["column-gap","grid-column-gap"],["gap","grid-gap"],["grid-template-columns","-ms-grid-columns"],["grid-template-rows","-ms-grid-rows"],["justify-self","-ms-grid-column-align"],["margin-inline-end","-webkit-margin-end"],["margin-inline-start","-webkit-margin-start"],["overflow-wrap","word-wrap"],["padding-inline-end","-webkit-padding-end"],["padding-inline-start","-webkit-padding-start"],["row-gap","grid-row-gap"],["scroll-margin-bottom","scroll-snap-margin-bottom"],["scroll-margin-left","scroll-snap-margin-left"],["scroll-margin-right","scroll-snap-margin-right"],["scroll-margin-top","scroll-snap-margin-top"],["scroll-margin","scroll-snap-margin"],["text-combine-upright","-ms-text-combine-horizontal"]]);function n(n,r){let t="";const a=i.get(n);a&&(t+=`${a}:${r};`);const o=function(i){var n=/^(?:(text-(?:decoration$|e|or|si)|back(?:ground-cl|d|f)|box-d|(?:mask(?:$|-[ispro]|-cl)))|(tab-|column(?!-s)|text-align-l)|(ap)|(u|hy))/i.exec(i);return n?n[1]?1:n[2]?2:n[3]?3:5:0}(n);1&o&&(t+=`-webkit-${n}:${r};`),2&o&&(t+=`-moz-${n}:${r};`),4&o&&(t+=`-ms-${n}:${r};`);const l=function(i,n){var r=/^(?:(pos)|(background-i)|((?:max-|min-)?(?:block-s|inl|he|widt))|(dis))/i.exec(i);return r?r[1]?/^sti/i.test(n)?1:0:r[2]?/^image-/i.test(n)?1:0:r[3]?"-"===n[3]?2:0:/^(inline-)?grid$/i.test(n)?4:0:0}(n,r);return 1&l?t+=`${n}:-webkit-${r};`:2&l?t+=`${n}:-moz-${r};`:4&l&&(t+=`${n}:-ms-${r};`),t+=`${n}:${r};`,t}export{n as prefix};

public/lib/ui/goober/prefixer/dist/goober-autoprefixer.js

@@ -0,0 +1 @@
+var i=new Map([["align-self","-ms-grid-row-align"],["color-adjust","-webkit-print-color-adjust"],["column-gap","grid-column-gap"],["gap","grid-gap"],["grid-template-columns","-ms-grid-columns"],["grid-template-rows","-ms-grid-rows"],["justify-self","-ms-grid-column-align"],["margin-inline-end","-webkit-margin-end"],["margin-inline-start","-webkit-margin-start"],["overflow-wrap","word-wrap"],["padding-inline-end","-webkit-padding-end"],["padding-inline-start","-webkit-padding-start"],["row-gap","grid-row-gap"],["scroll-margin-bottom","scroll-snap-margin-bottom"],["scroll-margin-left","scroll-snap-margin-left"],["scroll-margin-right","scroll-snap-margin-right"],["scroll-margin-top","scroll-snap-margin-top"],["scroll-margin","scroll-snap-margin"],["text-combine-upright","-ms-text-combine-horizontal"]]);exports.prefix=function(r,n){let t="";const a=i.get(r);a&&(t+=`${a}:${n};`);const o=function(i){var r=/^(?:(text-(?:decoration$|e|or|si)|back(?:ground-cl|d|f)|box-d|(?:mask(?:$|-[ispro]|-cl)))|(tab-|column(?!-s)|text-align-l)|(ap)|(u|hy))/i.exec(i);return r?r[1]?1:r[2]?2:r[3]?3:5:0}(r);1&o&&(t+=`-webkit-${r}:${n};`),2&o&&(t+=`-moz-${r}:${n};`),4&o&&(t+=`-ms-${r}:${n};`);const l=function(i,r){var n=/^(?:(pos)|(background-i)|((?:max-|min-)?(?:block-s|inl|he|widt))|(dis))/i.exec(i);return n?n[1]?/^sti/i.test(r)?1:0:n[2]?/^image-/i.test(r)?1:0:n[3]?"-"===r[3]?2:0:/^(inline-)?grid$/i.test(r)?4:0:0}(r,n);return 1&l?t+=`${r}:-webkit-${n};`:2&l?t+=`${r}:-moz-${n};`:4&l&&(t+=`${r}:-ms-${n};`),t+=`${r}:${n};`,t};

public/lib/ui/goober/prefixer/dist/goober-autoprefixer.modern.js

@@ -0,0 +1 @@
+var i=new Map([["align-self","-ms-grid-row-align"],["color-adjust","-webkit-print-color-adjust"],["column-gap","grid-column-gap"],["gap","grid-gap"],["grid-template-columns","-ms-grid-columns"],["grid-template-rows","-ms-grid-rows"],["justify-self","-ms-grid-column-align"],["margin-inline-end","-webkit-margin-end"],["margin-inline-start","-webkit-margin-start"],["overflow-wrap","word-wrap"],["padding-inline-end","-webkit-padding-end"],["padding-inline-start","-webkit-padding-start"],["row-gap","grid-row-gap"],["scroll-margin-bottom","scroll-snap-margin-bottom"],["scroll-margin-left","scroll-snap-margin-left"],["scroll-margin-right","scroll-snap-margin-right"],["scroll-margin-top","scroll-snap-margin-top"],["scroll-margin","scroll-snap-margin"],["text-combine-upright","-ms-text-combine-horizontal"]]);function n(n,r){let t="";const a=i.get(n);a&&(t+=`${a}:${r};`);const o=function(i){var n=/^(?:(text-(?:decoration$|e|or|si)|back(?:ground-cl|d|f)|box-d|(?:mask(?:$|-[ispro]|-cl)))|(tab-|column(?!-s)|text-align-l)|(ap)|(u|hy))/i.exec(i);return n?n[1]?1:n[2]?2:n[3]?3:5:0}(n);1&o&&(t+=`-webkit-${n}:${r};`),2&o&&(t+=`-moz-${n}:${r};`),4&o&&(t+=`-ms-${n}:${r};`);const l=function(i,n){var r=/^(?:(pos)|(background-i)|((?:max-|min-)?(?:block-s|inl|he|widt))|(dis))/i.exec(i);return r?r[1]?/^sti/i.test(n)?1:0:r[2]?/^image-/i.test(n)?1:0:r[3]?"-"===n[3]?2:0:/^(inline-)?grid$/i.test(n)?4:0:0}(n,r);return 1&l?t+=`${n}:-webkit-${r};`:2&l?t+=`${n}:-moz-${r};`:4&l&&(t+=`${n}:-ms-${r};`),t+=`${n}:${r};`,t}export{n as prefix};

public/lib/ui/goober/prefixer/dist/goober-autoprefixer.umd.js

@@ -0,0 +1 @@
+!function(i,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((i=i||self).gooberPrefixer={})}(this,function(i){var n=new Map([["align-self","-ms-grid-row-align"],["color-adjust","-webkit-print-color-adjust"],["column-gap","grid-column-gap"],["gap","grid-gap"],["grid-template-columns","-ms-grid-columns"],["grid-template-rows","-ms-grid-rows"],["justify-self","-ms-grid-column-align"],["margin-inline-end","-webkit-margin-end"],["margin-inline-start","-webkit-margin-start"],["overflow-wrap","word-wrap"],["padding-inline-end","-webkit-padding-end"],["padding-inline-start","-webkit-padding-start"],["row-gap","grid-row-gap"],["scroll-margin-bottom","scroll-snap-margin-bottom"],["scroll-margin-left","scroll-snap-margin-left"],["scroll-margin-right","scroll-snap-margin-right"],["scroll-margin-top","scroll-snap-margin-top"],["scroll-margin","scroll-snap-margin"],["text-combine-upright","-ms-text-combine-horizontal"]]);i.prefix=function(i,r){let t="";const e=n.get(i);e&&(t+=`${e}:${r};`);const o=function(i){var n=/^(?:(text-(?:decoration$|e|or|si)|back(?:ground-cl|d|f)|box-d|(?:mask(?:$|-[ispro]|-cl)))|(tab-|column(?!-s)|text-align-l)|(ap)|(u|hy))/i.exec(i);return n?n[1]?1:n[2]?2:n[3]?3:5:0}(i);1&o&&(t+=`-webkit-${i}:${r};`),2&o&&(t+=`-moz-${i}:${r};`),4&o&&(t+=`-ms-${i}:${r};`);const a=function(i,n){var r=/^(?:(pos)|(background-i)|((?:max-|min-)?(?:block-s|inl|he|widt))|(dis))/i.exec(i);return r?r[1]?/^sti/i.test(n)?1:0:r[2]?/^image-/i.test(n)?1:0:r[3]?"-"===n[3]?2:0:/^(inline-)?grid$/i.test(n)?4:0:0}(i,r);return 1&a?t+=`${i}:-webkit-${r};`:2&a?t+=`${i}:-moz-${r};`:4&a&&(t+=`${i}:-ms-${r};`),t+=`${i}:${r};`,t}});

public/lib/ui/goober/prefixer/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "goober-autoprefixer",
+  "version": "1.2.1",
+  "sideEffects": false,
+  "main": "./dist/goober-autoprefixer.js",
+  "module": "./dist/goober-autoprefixer.esm.js",
+  "umd:main": "./dist/goober-autoprefixer.umd.js",
+  "source": "./src/index.js",
+  "unpkg": "./dist/goober-autoprefixer.umd.js",
+  "types": "./autoprefixer.d.ts",
+  "author": {
+    "name": "Jovi De Croock",
+    "url": "https://www.jovidecroock.com/"
+  },
+  "scripts": {
+    "build": "rm -rf ./dist && microbundle --entry src/index.js --name gooberPrefixer --no-sourcemap",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "microbundle": "^0.12.2",
+    "@babel/plugin-transform-react-jsx": "^7.7.0",
+    "@babel/preset-env": "^7.3.1",
+    "babel-jest": "^24.1.0",
+    "jest": "^24.1.0",
+    "style-vendorizer": "^2.0.0"
+  },
+  "keywords": [
+    "goober",
+    "prefixer",
+    "autoprefixer",
+    "css",
+    "postcss"
+  ]
+}

public/lib/ui/goober/prefixer/src/index.js

@@ -0,0 +1,28 @@
+import { cssPropertyAlias, cssPropertyPrefixFlags, cssValuePrefixFlags } from 'style-vendorizer';
+
+export function prefix(property, value) {
+    let cssText = '';
+
+    /* Resolve aliases, e.g. `gap` -> `grid-gap` */
+    const propertyAlias = cssPropertyAlias(property);
+    if (propertyAlias) cssText += `${propertyAlias}:${value};`;
+
+    /* Prefix properties, e.g. `backdrop-filter` -> `-webkit-backdrop-filter` */
+    const propertyFlags = cssPropertyPrefixFlags(property);
+    if (propertyFlags & 0b001) cssText += `-webkit-${property}:${value};`;
+    if (propertyFlags & 0b010) cssText += `-moz-${property}:${value};`;
+    if (propertyFlags & 0b100) cssText += `-ms-${property}:${value};`;
+
+    /* Prefix values, e.g. `position: "sticky"` -> `position: "-webkit-sticky"` */
+    /* Notice that flags don't overlap and property prefixing isn't needed here */
+    const valueFlags = cssValuePrefixFlags(property, value);
+    if (valueFlags & 0b001) cssText += `${property}:-webkit-${value};`;
+    else if (valueFlags & 0b010) cssText += `${property}:-moz-${value};`;
+    else if (valueFlags & 0b100) cssText += `${property}:-ms-${value};`;
+
+    /* Include the standardized declaration last */
+    /* https://css-tricks.com/ordering-css3-properties/ */
+    cssText += `${property}:${value};`;
+
+    return cssText;
+}

public/lib/ui/goober/should-forward-prop/dist/goober-should-forward-prop.esm.js

@@ -0,0 +1 @@
+function e(e){return function(n){for(let t in n)e(t)||delete n[t]}}export{e as shouldForwardProp};

public/lib/ui/goober/should-forward-prop/dist/goober-should-forward-prop.js

@@ -0,0 +1 @@
+exports.shouldForwardProp=function(o){return function(r){for(let e in r)o(e)||delete r[e]}};

public/lib/ui/goober/should-forward-prop/dist/goober-should-forward-prop.modern.js

@@ -0,0 +1 @@
+function e(e){return function(n){for(let t in n)e(t)||delete n[t]}}export{e as shouldForwardProp};

public/lib/ui/goober/should-forward-prop/dist/goober-should-forward-prop.umd.js

@@ -0,0 +1 @@
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports):"function"==typeof define&&define.amd?define(["exports"],o):o((e=e||self).gooberForwardProp={})}(this,function(e){e.shouldForwardProp=function(e){return function(o){for(let n in o)e(n)||delete o[n]}}});

public/lib/ui/goober/should-forward-prop/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "goober-should-forward-prop",
+  "amdName": "gooberForwardProp",
+  "version": "0.0.1",
+  "description": "The shouldForwardProp addon function for goober",
+  "sideEffects": false,
+  "main": "./dist/goober-should-forward-prop.js",
+  "module": "./dist/goober-should-forward-prop.esm.js",
+  "umd:main": "./dist/goober-should-forward-prop.umd.js",
+  "source": "./src/index.js",
+  "unpkg": "./dist/goober-should-forward-prop.umd.js",
+  "types": "./should-forward-prop.d.ts",
+  "scripts": {
+    "build": "rm -rf dist && microbundle --entry src/index.js --name gooberForwardProp --no-sourcemap",
+    "test": "jest --setupFiles ./jest.setup.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cristianbote/goober.git",
+    "directory": "should-forward-prop"
+  },
+  "author": "Jonas De Vrient <devrient.jonas@gmail.com>",
+  "keywords": [
+    "goober",
+    "styled",
+    "should-forward-prop"
+  ],
+  "license": "ISC",
+  "peerDependencies": {
+    "goober": "^2.0.18"
+  },
+  "devDependencies": {
+    "microbundle": "^0.12.4",
+    "jest": "^24.1.0",
+    "preact": "^10.5.6",
+    "@babel/plugin-transform-react-jsx": "^7.7.0",
+    "@babel/preset-env": "^7.3.1",
+    "babel-jest": "^24.1.0"
+  }
+}

public/lib/ui/goober/should-forward-prop/should-forward-prop.d.ts

@@ -0,0 +1,9 @@
+export = gooberShouldForwardProp;
+
+export as namespace shouldForwardProp;
+
+declare namespace gooberShouldForwardProp {
+    type ForwardPropFunction = (prop: string) => boolean;
+
+    function shouldForwardProp(fwdProp: ForwardPropFunction): (props: object) => undefined;
+}

public/lib/ui/goober/should-forward-prop/src/__tests__/shouldForwardProp.js

@@ -0,0 +1,25 @@
+import { css } from 'goober';
+import { shouldForwardProp } from '../index';
+
+describe('shouldForwardProp', () => {
+    it('type', () => {
+        expect(typeof shouldForwardProp).toEqual('function');
+    });
+
+    it('shouldForwardProp', () => {
+        const fn = shouldForwardProp((prop) => {
+            // Filter out props prefixed with '$'
+            return prop[0] !== '$';
+        });
+
+        const props = {
+            color: 'red',
+            $shouldAnimate: true
+        };
+
+        // 'render'
+        fn(props);
+
+        expect(props).toEqual({ color: 'red' });
+    });
+});

public/lib/ui/goober/should-forward-prop/src/index.js

@@ -0,0 +1,19 @@
+/**
+ * Should forward prop utility function
+ * @param {Function} filterPropFunction The flter function
+ */
+export function shouldForwardProp(filterPropFunction) {
+    /**
+     * The forward props function passed to `setup`
+     * @param {object} props
+     */
+    function forwardProp(props) {
+        for (let p in props) {
+            if (!filterPropFunction(p)) {
+                delete props[p];
+            }
+        }
+    }
+
+    return forwardProp;
+}

public/lib/ui/goober/src/__tests__/css.test.js

@@ -0,0 +1,110 @@
+import { css, glob, keyframes } from '../css';
+import { hash } from '../core/hash';
+import { compile } from '../core/compile';
+import { getSheet } from '../core/get-sheet';
+
+jest.mock('../core/hash', () => ({
+    hash: jest.fn().mockReturnValue('hash()')
+}));
+
+jest.mock('../core/compile', () => ({
+    compile: jest.fn().mockReturnValue('compile()')
+}));
+
+jest.mock('../core/get-sheet', () => ({
+    getSheet: jest.fn().mockReturnValue('getSheet()')
+}));
+
+describe('css', () => {
+    beforeEach(() => {
+        hash.mockClear();
+        compile.mockClear();
+        getSheet.mockClear();
+    });
+
+    it('type', () => {
+        expect(typeof css).toEqual('function');
+    });
+
+    it('args: tagged', () => {
+        const out = css`base${1}`;
+
+        expect(compile).toBeCalledWith(['base', ''], [1], undefined);
+        expect(getSheet).toBeCalled();
+        expect(hash).toBeCalledWith('compile()', 'getSheet()', undefined, undefined, undefined);
+        expect(out).toEqual('hash()');
+    });
+
+    it('args: object', () => {
+        const out = css({ foo: 1 });
+
+        expect(hash).toBeCalledWith({ foo: 1 }, 'getSheet()', undefined, undefined, undefined);
+        expect(compile).not.toBeCalled();
+        expect(getSheet).toBeCalled();
+        expect(out).toEqual('hash()');
+    });
+
+    it('args: array', () => {
+        const payload = [{ foo: 1 }, { baz: 2 }, { opacity: 0, color: 'red' }];
+        const out = css(payload);
+
+        expect(hash).toBeCalledWith(
+            { foo: 1, baz: 2, opacity: 0, color: 'red' },
+            'getSheet()',
+            undefined,
+            undefined,
+            undefined
+        );
+        expect(compile).not.toBeCalled();
+        expect(getSheet).toBeCalled();
+        expect(out).toEqual('hash()');
+    });
+
+    it('args: function', () => {
+        const incoming = { foo: 'foo' };
+        const out = css.call({ p: incoming }, (props) => ({ foo: props.foo }));
+
+        expect(hash).toBeCalledWith(incoming, 'getSheet()', undefined, undefined, undefined);
+        expect(compile).not.toBeCalled();
+        expect(getSheet).toBeCalled();
+        expect(out).toEqual('hash()');
+    });
+
+    it('bind', () => {
+        const target = '';
+        const p = {};
+        const g = true;
+        const out = css.bind({
+            target,
+            p,
+            g
+        })`foo: 1`;
+
+        expect(hash).toBeCalledWith('compile()', 'getSheet()', true, undefined, undefined);
+        expect(compile).toBeCalledWith(['foo: 1'], [], p);
+        expect(getSheet).toBeCalledWith(target);
+        expect(out).toEqual('hash()');
+    });
+});
+
+describe('glob', () => {
+    it('type', () => {
+        expect(typeof glob).toEqual('function');
+    });
+
+    it('args: g', () => {
+        glob`a:b`;
+        expect(hash).toBeCalledWith('compile()', 'getSheet()', 1, undefined, undefined);
+    });
+});
+
+describe('keyframes', () => {
+    it('type', () => {
+        expect(typeof keyframes).toEqual('function');
+    });
+
+    it('args: k', () => {
+        keyframes`a:b`;
+        expect(hash).toBeCalledWith('compile()', 'getSheet()', undefined, undefined, 1);
+    });
+});

public/lib/ui/goober/src/__tests__/index.test.js

@@ -0,0 +1,14 @@
+import * as goober from '../index';
+
+describe('goober', () => {
+    it('exports', () => {
+        expect(Object.keys(goober).sort()).toEqual([
+            'css',
+            'extractCss',
+            'glob',
+            'keyframes',
+            'setup',
+            'styled'
+        ]);
+    });
+});

public/lib/ui/goober/src/__tests__/integrations.test.js

@@ -0,0 +1,179 @@
+import { h, createContext, render } from 'preact';
+import { useContext, forwardRef } from 'preact/compat';
+import { setup, css, styled, keyframes } from '../index';
+import { extractCss } from '../core/update';
+
+describe('integrations', () => {
+    it('preact', () => {
+        const ThemeContext = createContext();
+        const useTheme = () => useContext(ThemeContext);
+
+        setup(h, null, useTheme);
+
+        const target = document.createElement('div');
+
+        const Span = styled('span', forwardRef)`
+            color: red;
+        `;
+
+        const SpanWrapper = styled('div')`
+            color: cyan;
+
+            ${Span} {
+                border: 1px solid red;
+            }
+        `;
+
+        const BoxWithColor = styled('div')`
+            color: ${(props) => props.color};
+        `;
+
+        const BoxWithColorFn = styled('div')(
+            (props) => `
+            color: ${props.color};
+        `
+        );
+
+        const BoxWithThemeColor = styled('div')`
+            color: ${(props) => props.theme.color};
+        `;
+
+        const BoxWithThemeColorFn = styled('div')(
+            (props) => `
+            color: ${props.theme.color};
+        `
+        );
+
+        const fadeAnimation = keyframes`
+            0% {
+                opacity: 0;
+            }
+            99% {
+                opacity: 1;
+                color: dodgerblue;
+            }
+        `;
+
+        const BoxWithAnimation = styled('span')`
+            opacity: 0;
+            animation: ${fadeAnimation} 500ms ease-in-out;
+        `;
+
+        const BoxWithConditionals = styled('div')([
+            { foo: 1 },
+            (props) => ({ color: props.isActive ? 'red' : 'tomato' }),
+            null,
+            { baz: 0 },
+            false,
+            { baz: 0 }
+        ]);
+
+        const shared = { opacity: 0 };
+        const BoxWithShared = styled('div')(shared);
+        const BoxWithSharedAndConditional = styled('div')([shared, { baz: 0 }]);
+
+        const refSpy = jest.fn();
+
+        render(
+            <ThemeContext.Provider value={{ color: 'blue' }}>
+                <div>
+                    <Span ref={refSpy} />
+                    <Span as={'div'} />
+                    <SpanWrapper>
+                        <Span />
+                    </SpanWrapper>
+                    <BoxWithColor color={'red'} />
+                    <BoxWithColorFn color={'red'} />
+                    <BoxWithThemeColor />
+                    <BoxWithThemeColorFn />
+                    <BoxWithThemeColor theme={{ color: 'green' }} />
+                    <BoxWithThemeColorFn theme={{ color: 'orange' }} />
+                    <BoxWithAnimation />
+                    <BoxWithConditionals isActive />
+                    <BoxWithShared />
+                    <BoxWithSharedAndConditional />
+                    <div className={css([shared, { background: 'cyan' }])} />
+                </div>
+            </ThemeContext.Provider>,
+            target
+        );
+
+        expect(extractCss()).toMatchInlineSnapshot(
+            [
+                '"',
+                ' ', // Empty white space that holds the textNode that the styles are appended
+                '@keyframes go384228713{0%{opacity:0;}99%{opacity:1;color:dodgerblue;}}',
+                '.go1127809067{opacity:0;background:cyan;}',
+                '.go3865451590{color:red;}',
+                '.go3991234422{color:cyan;}',
+                '.go3991234422 .go3865451590{border:1px solid red;}',
+                '.go1925576363{color:blue;}',
+                '.go3206651468{color:green;}',
+                '.go4276997079{color:orange;}',
+                '.go2069586824{opacity:0;animation:go384228713 500ms ease-in-out;}',
+                '.go631307347{foo:1;color:red;baz:0;}',
+                '.go3865943372{opacity:0;}',
+                '.go1162430001{opacity:0;baz:0;}',
+                '"'
+            ].join('')
+        );
+
+        expect(refSpy).toHaveBeenCalledWith(
+            expect.objectContaining({
+                tagName: 'SPAN'
+            })
+        );
+    });
+
+    it('shouldForwardProps', () => {
+        const list = ['p', 'm', 'as'];
+        setup(h, undefined, undefined, (props) => {
+            for (let prop in props) {
+                if (list.indexOf(prop) !== -1) {
+                    delete props[prop];
+                }
+            }
+        });
+
+        const target = document.createElement('div');
+
+        const Base = styled('div')(({ p = 0, m }) => [
+            {
+                color: 'white',
+                padding: p + 'em'
+            },
+            m != null && { margin: m + 'em' }
+        ]);
+
+        render(
+            <div>
+                <Base />
+                <Base p={2} />
+                <Base m={1} p={3} as={'span'} />
+            </div>,
+            target
+        );
+
+        // Makes sure the resulting DOM does not contain any props
+        expect(target.innerHTML).toEqual(
+            [
+                '<div>',
+                '<div class="go103173764"></div>',
+                '<div class="go103194166"></div>',
+                '<span class="go2081835032"></span>',
+                '</div>'
+            ].join(''),
+            `"<div><div class=\\"go103173764\\"></div><div class=\\"go103194166\\"></div><span class=\\"go2081835032\\"></span></div>"`
+        );
+
+        expect(extractCss()).toMatchInlineSnapshot(
+            [
+                '"',
+                '.go103173764{color:white;padding:0em;}',
+                '.go103194166{color:white;padding:2em;}',
+                '.go2081835032{color:white;padding:3em;margin:1em;}',
+                '"'
+            ].join('')
+        );
+    });
+});

public/lib/ui/goober/src/__tests__/styled.test.js

@@ -0,0 +1,159 @@
+import { styled, setup } from '../styled';
+import { extractCss } from '../core/update';
+
+const pragma = jest.fn((tag, props) => {
+    return { tag, props: { ...props, className: props.className.replace(/go\d+/g, 'go') } };
+});
+
+expect.extend({
+    toMatchVNode(received, tag, props) {
+        expect(received.tag).toEqual(tag);
+        expect(received.props).toEqual(props);
+        return {
+            message: 'Expected vnode to match vnode',
+            pass: true
+        };
+    }
+});
+
+describe('styled', () => {
+    beforeEach(() => {
+        pragma.mockClear();
+        setup(pragma);
+        extractCss();
+    });
+
+    it('calls pragma', () => {
+        setup(undefined);
+        expect(() => styled()()()).toThrow();
+
+        setup(pragma);
+        const vnode = styled('div')``();
+
+        expect(pragma).toBeCalledTimes(1);
+        expect(vnode).toMatchVNode('div', {
+            className: 'go'
+        });
+    });
+
+    it('extend props', () => {
+        const vnode = styled('tag')`
+            color: peachpuff;
+        `({ bar: 1 });
+
+        expect(vnode).toMatchVNode('tag', {
+            bar: 1,
+            className: 'go'
+        });
+        expect(extractCss()).toEqual('.go3183460609{color:peachpuff;}');
+    });
+
+    it('concat className if present in props', () => {
+        const vnode = styled('tag')`
+            color: peachpuff;
+        `({ bar: 1, className: 'existing' });
+
+        expect(vnode).toMatchVNode('tag', {
+            bar: 1,
+            className: 'go existing'
+        });
+    });
+
+    it('pass template function', () => {
+        const vnode = styled('tag')((props) => ({ color: props.color }))({ color: 'red' });
+
+        expect(vnode).toMatchVNode('tag', {
+            className: 'go',
+            color: 'red'
+        });
+        expect(extractCss()).toEqual('.go3433634237{color:red;}');
+    });
+
+    it('change tag via "as" prop', () => {
+        const Tag = styled('tag')`
+            color: red;
+        `;
+
+        // Simulate a render
+        let vnode = Tag();
+        expect(vnode).toMatchVNode('tag', { className: 'go' });
+
+        // Simulate a render with
+        vnode = Tag({ as: 'foo' });
+        // Expect it to be changed to foo
+        expect(vnode).toMatchVNode('foo', { className: 'go', as: 'foo' });
+
+        // Simulate a render
+        vnode = Tag();
+        expect(vnode).toMatchVNode('tag', { className: 'go' });
+    });
+
+    it('support forwardRef', () => {
+        const forwardRef = jest.fn((fn) => (props) => fn(props, 'ref'));
+        const vnode = styled('tag', forwardRef)`
+            color: red;
+        `({ bar: 1 });
+
+        expect(vnode).toMatchVNode('tag', {
+            bar: 1,
+            className: 'go',
+            ref: 'ref'
+        });
+    });
+
+    it('setup useTheme', () => {
+        setup(pragma, null, () => 'theme');
+
+        const styleFn = jest.fn(() => ({}));
+        const vnode = styled('tag')(styleFn)({ bar: 1 });
+
+        expect(styleFn).toBeCalledWith({ bar: 1, theme: 'theme' });
+        expect(vnode).toMatchVNode('tag', {
+            bar: 1,
+            className: 'go'
+        });
+    });
+
+    it('setup useTheme with theme prop override', () => {
+        setup(pragma, null, () => 'theme');
+
+        const styleFn = jest.fn(() => ({}));
+        const vnode = styled('tag')(styleFn)({ theme: 'override' });
+
+        expect(styleFn).toBeCalledWith({ theme: 'override' });
+        expect(vnode).toMatchVNode('tag', { className: 'go', theme: 'override' });
+    });
+
+    it('uses babel compiled classNames', () => {
+        const Comp = styled('tag')``;
+        Comp.className = 'foobar';
+        const vnode = Comp({});
+        expect(vnode).toMatchVNode('tag', { className: 'go foobar' });
+    });
+
+    it('omits css prop with falsy should forward prop function', () => {
+        const shouldForwardProp = (props) => {
+            for (let prop in props) {
+                if (prop.includes('$')) delete props[prop];
+            }
+        };
+        // Overwrite setup for this test
+        setup(pragma, undefined, undefined, shouldForwardProp);
+
+        const vnode = styled('tag')`
+            color: peachpuff;
+        `({ bar: 1, $templateColumns: '1fr 1fr' });
+
+        expect(vnode).toMatchVNode('tag', { className: 'go', bar: 1 });
+    });
+
+    it('pass truthy logical and operator', () => {
+        const Tag = styled('tag')((props) => props.draw && { color: 'yellow' });
+
+        // Simulate a render
+        let vnode = Tag({ draw: true });
+
+        expect(vnode).toMatchVNode('tag', { className: 'go', draw: true });
+        expect(extractCss()).toEqual('.go2986228274{color:yellow;}');
+    });
+});

public/lib/ui/goober/src/core/__tests__/astish.test.js

@@ -0,0 +1,171 @@
+import { astish } from '../astish';
+
+describe('astish', () => {
+    it('regular', () => {
+        expect(
+            astish(`
+            prop: value;
+        `)
+        ).toEqual({
+            prop: 'value'
+        });
+    });
+
+    it('nested', () => {
+        expect(
+            astish(`
+            prop: value;
+            @keyframes foo {
+                0% {
+                    attr: value;
+                }
+                50% {
+                    opacity: 1;
+                }
+                100% {
+                    foo: baz;
+                }
+            }
+            named {
+                background-image: url('/path-to-jpg.png');
+            }
+            opacity: 0;
+            .class,
+            &:hover {
+                -webkit-touch: none;
+            }
+        `)
+        ).toEqual({
+            prop: 'value',
+            opacity: '0',
+            '.class,&:hover': {
+                '-webkit-touch': 'none'
+            },
+            '@keyframes foo': {
+                '0%': {
+                    attr: 'value'
+                },
+                '50%': {
+                    opacity: '1'
+                },
+
+                '100%': {
+                    foo: 'baz'
+                }
+            },
+            named: {
+                'background-image': "url('/path-to-jpg.png')"
+            }
+        });
+    });
+
+    it('merging', () => {
+        expect(
+            astish(`
+            .c {
+                font-size:24px;
+            }
+        
+            .c {
+                color:red;
+            }
+        `)
+        ).toEqual({
+            '.c': {
+                'font-size': '24px',
+                color: 'red'
+            }
+        });
+    });
+
+    it('regression', () => {
+        expect(
+            astish(`
+            &.g0ssss {
+                aa: foo;
+                box-shadow: 0 1px rgba(0, 2, 33, 4) inset;
+            }
+            named {
+                transform: scale(1.2), rotate(1, 1);
+            }
+            @media screen and (some-rule: 100px) {
+                foo: baz;
+                opacity: 1;
+                level {
+                    one: 1;
+                    level {
+                        two: 2;
+                    }
+                }
+            }
+            .a{
+                color: red;
+            }
+            .b  {
+                color: blue;
+            }
+        `)
+        ).toEqual({
+            '&.g0ssss': {
+                aa: 'foo',
+                'box-shadow': '0 1px rgba(0, 2, 33, 4) inset'
+            },
+            '.a': {
+                color: 'red'
+            },
+            '.b': {
+                color: 'blue'
+            },
+            named: {
+                transform: 'scale(1.2), rotate(1, 1)'
+            },
+            '@media screen and (some-rule: 100px)': {
+                foo: 'baz',
+                opacity: '1',
+                level: {
+                    one: '1',
+
+                    level: {
+                        two: '2'
+                    }
+                }
+            }
+        });
+    });
+
+    it('should strip comments', () => {
+        expect(
+            astish(`
+                color: red;
+                /*
+                    some comment
+                */
+                transform: translate3d(0, 0, 0);
+                /**
+                 * other comment
+                 */
+                background: peachpuff;
+                font-size: xx-large; /* inline comment */
+                /* foo: bar */
+                font-weight: bold;
+            `)
+        ).toEqual({
+            color: 'red',
+            transform: 'translate3d(0, 0, 0)',
+            background: 'peachpuff',
+            'font-size': 'xx-large',
+            'font-weight': 'bold'
+        });
+    });
+
+    it('should parse multiline background declaration', () => {
+        expect(
+            astish(`
+                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white"><path d="M7.5 36.7h58.4v10.6H7.5V36.7zm0-15.9h58.4v10.6H7.5V20.8zm0 31.9h58.4v10.6H7.5V52.7zm0 15.9h58.4v10.6H7.5V68.6zm63.8-15.9l10.6 15.9 10.6-15.9H71.3zm21.2-5.4L81.9 31.4 71.3 47.3h21.2z"/></svg>')
+                    center/contain;
+            `)
+        ).toEqual({
+            background: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white"><path d="M7.5 36.7h58.4v10.6H7.5V36.7zm0-15.9h58.4v10.6H7.5V20.8zm0 31.9h58.4v10.6H7.5V52.7zm0 15.9h58.4v10.6H7.5V68.6zm63.8-15.9l10.6 15.9 10.6-15.9H71.3zm21.2-5.4L81.9 31.4 71.3 47.3h21.2z"/></svg>')center/contain`
+        });
+    });
+});

public/lib/ui/goober/src/core/__tests__/compile.test.js

@@ -0,0 +1,55 @@
+import { compile } from '../compile';
+
+const template = (str, ...defs) => {
+    return (props) => compile(str, defs, props);
+};
+
+describe('compile', () => {
+    it('simple', () => {
+        expect(template`prop: 1;`({})).toEqual('prop: 1;');
+    });
+
+    it('vnode', () => {
+        expect(template`prop: 1; ${() => ({ props: { className: 'class' } })}`({})).toEqual(
+            'prop: 1; .class'
+        );
+
+        // Empty or falsy
+        expect(template`prop: 1; ${() => ({ props: { foo: 1 } })}`({})).toEqual('prop: 1; ');
+    });
+
+    it('vanilla classname', () => {
+        expect(template`prop: 1; ${() => 'go0ber'}`({})).toEqual('prop: 1; .go0ber');
+    });
+
+    it('value interpolations', () => {
+        // This interpolations are testing the ability to interpolate thruty and falsy values
+        expect(template`prop: 1; ${() => 0},${() => undefined},${() => null},${2}`({})).toEqual(
+            'prop: 1; 0,,,2'
+        );
+    });
+
+    describe('objects', () => {
+        it('normal', () => {
+            expect(template`prop: 1;${(p) => ({ color: p.color })}`({ color: 'red' })).toEqual(
+                'prop: 1;color:red;'
+            );
+        });
+
+        it('styled-system', () => {
+            const color = (p) => ({ color: p.color });
+            const background = (p) => ({ backgroundColor: p.backgroundColor });
+
+            const props = { color: 'red', backgroundColor: 'blue' };
+            const res = template`
+                prop: 1;
+                ${color}
+                ${background}
+            `(props);
+
+            expect(res.replace(/([\s|\n]+)/gm, '').trim()).toEqual(
+                'prop:1;color:red;background-color:blue;'
+            );
+        });
+    });
+});

public/lib/ui/goober/src/core/__tests__/get-sheet.test.js

@@ -0,0 +1,48 @@
+import { getSheet } from '../get-sheet';
+
+describe('getSheet', () => {
+    it('regression', () => {
+        const target = getSheet();
+        expect(target.nodeType).toEqual(3);
+    });
+
+    it('custom target', () => {
+        const custom = document.createElement('div');
+        const sheet = getSheet(custom);
+
+        expect(sheet.nodeType).toEqual(3);
+        expect(sheet.parentElement.nodeType).toEqual(1);
+        expect(sheet.parentElement.getAttribute('id')).toEqual('_goober');
+    });
+
+    it('reuse sheet', () => {
+        const custom = document.createElement('div');
+        const sheet = getSheet(custom);
+        const second = getSheet(custom);
+
+        expect(sheet === second).toBeTruthy();
+    });
+
+    it('server side', () => {
+        const bkp = global.document;
+        delete global.document;
+
+        expect(() => getSheet()).not.toThrow();
+
+        global.document = bkp;
+    });
+
+    it('server side with custom collector', () => {
+        const bkp = global.document;
+        const win = global.window;
+        delete global.document;
+        delete global.window;
+
+        const collector = { data: '' };
+
+        expect(collector === getSheet(collector)).toBeTruthy();
+
+        global.document = bkp;
+        global.window = win;
+    });
+});

public/lib/ui/goober/src/core/__tests__/hash.test.js

@@ -0,0 +1,115 @@
+import { hash } from '../hash';
+import { toHash } from '../to-hash';
+import { update } from '../update';
+import { parse } from '../parse';
+import { astish } from '../astish';
+
+jest.mock('../astish', () => ({
+    astish: jest.fn().mockReturnValue('astish()')
+}));
+
+jest.mock('../parse', () => ({
+    parse: jest.fn().mockReturnValue('parse()')
+}));
+
+jest.mock('../to-hash', () => ({
+    toHash: jest.fn().mockReturnValue('toHash()')
+}));
+
+jest.mock('../update', () => ({
+    update: jest.fn().mockReturnValue('update()')
+}));
+
+jest.mock('../astish', () => ({
+    astish: jest.fn().mockReturnValue('astish()')
+}));
+
+jest.mock('../parse', () => ({
+    parse: jest.fn().mockReturnValue('parse()')
+}));
+
+describe('hash', () => {
+    beforeEach(() => {
+        toHash.mockClear();
+        update.mockClear();
+        parse.mockClear();
+        astish.mockClear();
+    });
+
+    it('regression', () => {
+        const res = hash('compiled', 'target');
+
+        expect(toHash).toBeCalledWith('compiled');
+        expect(update).toBeCalledWith('parse()', 'target', undefined);
+        expect(astish).toBeCalledWith('compiled');
+        expect(parse).toBeCalledWith('astish()', '.toHash()');
+
+        expect(res).toEqual('toHash()');
+    });
+
+    it('regression: cache', () => {
+        const res = hash('compiled', 'target');
+
+        expect(toHash).not.toBeCalled();
+        expect(astish).not.toBeCalled();
+        expect(parse).not.toBeCalled();
+        expect(update).toBeCalledWith('parse()', 'target', undefined);
+
+        expect(res).toEqual('toHash()');
+    });
+
+    it('regression: global', () => {
+        const res = hash('global', 'target', true);
+
+        expect(toHash).toBeCalledWith('global');
+        expect(astish).not.toBeCalled();
+        expect(parse).not.toBeCalled();
+        expect(update).toBeCalledWith('parse()', 'target', undefined);
+
+        expect(res).toEqual('toHash()');
+    });
+
+    it('regression: keyframes', () => {
+        const res = hash('keyframes', 'target', undefined, undefined, 1);
+
+        expect(toHash).toBeCalledWith('keyframes');
+        expect(astish).not.toBeCalled();
+        expect(parse).not.toBeCalled();
+        expect(update).toBeCalledWith('parse()', 'target', undefined);
+
+        expect(res).toEqual('toHash()');
+    });
+
+    it('regression: object', () => {
+        const className = Math.random() + 'unique';
+        toHash.mockReturnValue(className);
+
+        const res = hash({ baz: 1 }, 'target');
+
+        expect(toHash).toBeCalledWith('baz1');
+        expect(astish).not.toBeCalled();
+        expect(parse).toBeCalledWith({ baz: 1 }, '.' + className);
+        expect(update).toBeCalledWith('parse()', 'target', undefined);
+
+        expect(res).toEqual(className);
+    });
+
+    it('regression: cache-object', () => {
+        const className = Math.random() + 'unique';
+        toHash.mockReturnValue(className);
+
+        // Since it's not yet cached
+        hash({ cacheObject: 1 }, 'target');
+        expect(toHash).toBeCalledWith('cacheObject1');
+        toHash.mockClear();
+
+        // Different object
+        hash({ foo: 2 }, 'target');
+        expect(toHash).toBeCalledWith('foo2');
+        toHash.mockClear();
+
+        // First object should not call .toHash
+        hash({ cacheObject: 1 }, 'target');
+        expect(toHash).not.toBeCalled();
+    });
+});

public/lib/ui/goober/src/core/__tests__/parse.test.js

@@ -0,0 +1,262 @@
+import { parse } from '../parse';
+
+describe('parse', () => {
+    it('regular', () => {
+        const out = parse(
+            {
+                display: 'value',
+                button: {
+                    border: '0'
+                },
+                '&.nested': {
+                    foo: '1px',
+                    baz: 'scale(1), translate(1)'
+                }
+            },
+            'hush'
+        );
+
+        expect(out).toEqual(
+            [
+                'hush{display:value;}',
+                'hush button{border:0;}',
+                'hush.nested{foo:1px;baz:scale(1), translate(1);}'
+            ].join('')
+        );
+    });
+
+    it('camelCase', () => {
+        const out = parse(
+            {
+                fooBarProperty: 'value',
+                button: {
+                    webkitPressSomeButton: '0'
+                },
+                '&.nested': {
+                    foo: '1px',
+                    backgroundEffect: 'scale(1), translate(1)'
+                }
+            },
+            'hush'
+        );
+
+        expect(out).toEqual(
+            [
+                'hush{foo-bar-property:value;}',
+                'hush button{webkit-press-some-button:0;}',
+                'hush.nested{foo:1px;background-effect:scale(1), translate(1);}'
+            ].join('')
+        );
+    });
+
+    it('keyframes', () => {
+        const out = parse(
+            {
+                '@keyframes superAnimation': {
+                    '11.1%': {
+                        opacity: '0.9999'
+                    },
+                    '111%': {
+                        opacity: '1'
+                    }
+                },
+                '@keyframes foo': {
+                    to: {
+                        baz: '1px',
+                        foo: '1px'
+                    }
+                },
+                '@keyframes complex': {
+                    'from, 20%, 53%, 80%, to': {
+                        transform: 'translate3d(0,0,0)'
+                    },
+                    '40%, 43%': {
+                        transform: 'translate3d(0, -30px, 0)'
+                    },
+                    '70%': {
+                        transform: 'translate3d(0, -15px, 0)'
+                    },
+                    '90%': {
+                        transform: 'translate3d(0,-4px,0)'
+                    }
+                }
+            },
+            'hush'
+        );
+
+        expect(out).toEqual(
+            [
+                '@keyframes superAnimation{11.1%{opacity:0.9999;}111%{opacity:1;}}',
+                '@keyframes foo{to{baz:1px;foo:1px;}}',
+                '@keyframes complex{from, 20%, 53%, 80%, to{transform:translate3d(0,0,0);}40%, 43%{transform:translate3d(0, -30px, 0);}70%{transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0,-4px,0);}}'
+            ].join('')
+        );
+    });
+
+    it('font-face', () => {
+        const out = parse(
+            {
+                '@font-face': {
+                    'font-weight': 100
+                }
+            },
+            'FONTFACE'
+        );
+
+        expect(out).toEqual(['@font-face{font-weight:100;}'].join(''));
+    });
+
+    it('@media', () => {
+        const out = parse(
+            {
+                '@media any all (no-really-anything)': {
+                    position: 'super-absolute'
+                }
+            },
+            'hush'
+        );
+
+        expect(out).toEqual(
+            ['@media any all (no-really-anything){hush{position:super-absolute;}}'].join('')
+        );
+    });
+
+    it('@import', () => {
+        const out = parse(
+            {
+                '@import': "url('https://domain.com/path?1=s')"
+            },
+            'hush'
+        );
+
+        expect(out).toEqual(["@import url('https://domain.com/path?1=s');"].join(''));
+    });
+
+    it('cra', () => {
+        expect(
+            parse(
+                {
+                    '@import': "url('path/to')",
+                    '@font-face': {
+                        'font-weight': 100
+                    },
+                    'text-align': 'center',
+                    '.logo': {
+                        animation: 'App-logo-spin infinite 20s linear',
+                        height: '40vmin',
+                        'pointer-events': 'none'
+                    },
+                    '.header': {
+                        'background-color': '#282c34',
+                        'min-height': '100vh',
+                        display: 'flex',
+                        'flex-direction': 'column',
+                        'align-items': 'center',
+                        'justify-content': 'center',
+                        'font-size': 'calc(10px + 2vmin)',
+                        color: 'white'
+                    },
+                    '.link': {
+                        color: '#61dafb'
+                    },
+                    '@keyframes App-logo-spin': {
+                        from: {
+                            transform: 'rotate(0deg)'
+                        },
+                        to: {
+                            transform: 'rotate(360deg)'
+                        }
+                    }
+                },
+                'App'
+            )
+        ).toEqual(
+            [
+                "@import url('path/to');",
+                'App{text-align:center;}',
+                '@font-face{font-weight:100;}',
+                'App .logo{animation:App-logo-spin infinite 20s linear;height:40vmin;pointer-events:none;}',
+                'App .header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:white;}',
+                'App .link{color:#61dafb;}',
+                '@keyframes App-logo-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}'
+            ].join('')
+        );
+    });
+
+    it('@supports', () => {
+        expect(
+            parse(
+                {
+                    '@supports (some: 1px)': {
+                        '@media (s: 1)': {
+                            display: 'flex'
+                        }
+                    },
+                    '@supports': {
+                        opacity: 1
+                    }
+                },
+                'hush'
+            )
+        ).toEqual(
+            [
+                '@supports (some: 1px){@media (s: 1){hush{display:flex;}}}',
+                '@supports{hush{opacity:1;}}'
+            ].join('')
+        );
+    });
+
+    it('unwrapp', () => {
+        expect(
+            parse(
+                {
+                    '--foo': 1,
+                    opacity: 1,
+                    '@supports': {
+                        '--bar': 'none'
+                    },
+                    html: {
+                        background: 'goober'
+                    }
+                },
+                ''
+            )
+        ).toEqual(
+            ['--foo:1;opacity:1;', '@supports{--bar:none;}', 'html{background:goober;}'].join('')
+        );
+    });
+
+    it('nested with multiple selector', () => {
+        const out = parse(
+            {
+                display: 'value',
+                '&:hover,&:focus': {
+                    border: '0',
+                    span: {
+                        index: 'unset'
+                    }
+                },
+                'p,b,i': {
+                    display: 'block',
+                    '&:focus,input': {
+                        opacity: 1,
+                        'div,span': {
+                            opacity: 0
+                        }
+                    }
+                }
+            },
+            'hush'
+        );
+        expect(out).toEqual(
+            [
+                'hush{display:value;}',
+                'hush:hover,hush:focus{border:0;}',
+                'hush:hover span,hush:focus span{index:unset;}',
+                'hush p,hush b,hush i{display:block;}',
+                'hush p:focus,hush p input,hush b:focus,hush b input,hush i:focus,hush i input{opacity:1;}',
+                'hush p:focus div,hush p:focus span,hush p input div,hush p input span,hush b:focus div,hush b:focus span,hush b input div,hush b input span,hush i:focus div,hush i:focus span,hush i input div,hush i input span{opacity:0;}'
+            ].join('')
+        );
+    });
+});

public/lib/ui/goober/src/core/__tests__/to-hash.test.js

@@ -0,0 +1,17 @@
+import { toHash } from '../to-hash';
+
+describe('to-hash', () => {
+    it('regression', () => {
+        const res = toHash('goober');
+
+        expect(res).toEqual('go1990315141');
+        expect(toHash('goober')).toEqual('go1990315141');
+    });
+
+    it('collision', () => {
+        const a = toHash('background:red;color:black;');
+        const b = toHash('background:black;color:red;');
+
+        expect(a === b).toBeFalsy();
+    });
+});

public/lib/ui/goober/src/core/__tests__/update.test.js

@@ -0,0 +1,51 @@
+import { update, extractCss } from '../update';
+import { getSheet } from '../get-sheet';
+
+describe('update', () => {
+    it('regression', () => {
+        const t = { data: '' };
+
+        update('css', t);
+        expect(t.data).toEqual('css');
+    });
+
+    it('regression: duplicate', () => {
+        const t = { data: '' };
+
+        update('css', t);
+        update('foo', t);
+        update('css', t);
+
+        expect(t.data).toEqual('cssfoo');
+    });
+
+    it('regression: extract and flush', () => {
+        update('filled', getSheet());
+        expect(extractCss()).toEqual(' filled');
+        expect(extractCss()).toEqual('');
+    });
+
+    it('regression: extract and flush without DOM', () => {
+        const bkp = global.self;
+        delete global.self;
+        update('filled', getSheet());
+        expect(extractCss()).toEqual('filled');
+        expect(extractCss()).toEqual('');
+        global.self = bkp;
+    });
+
+    it('regression: extract and flush from custom target', () => {
+        const target = document.createElement('div');
+        update('filled', getSheet());
+        update('filledbody', getSheet(target));
+        expect(extractCss(target)).toEqual(' filledbody');
+        expect(extractCss(target)).toEqual('');
+    });
+
+    it('regression: append or prepend', () => {
+        extractCss();
+        update('end', getSheet());
+        update('start', getSheet(), true);
+        expect(extractCss()).toEqual('startend');
+    });
+});

public/lib/ui/goober/src/core/astish.js

@@ -0,0 +1,25 @@
+let newRule = /(?:([A-Z0-9-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(})/gi;
+let ruleClean = /\/\*[\s\S]*?\*\/|\s{2,}|\n/gm;
+
+/**
+ * Convert a css style string into a object
+ * @param {String} val
+ * @returns {Object}
+ */
+export let astish = (val) => {
+    let tree = [{}];
+    let block;
+
+    while ((block = newRule.exec(val.replace(ruleClean, '')))) {
+        // Remove the current entry
+        if (block[4]) tree.shift();
+
+        if (block[3]) {
+            tree.unshift((tree[0][block[3]] = tree[0][block[3]] || {}));
+        } else if (!block[4]) {
+            tree[0][block[1]] = block[2];
+        }
+    }
+
+    return tree[0];
+};

public/lib/ui/goober/src/core/compile.js

@@ -0,0 +1,38 @@
+import { parse } from './parse';
+
+/**
+ * Can parse a compiled string, from a tagged template
+ * @param {String} value
+ * @param {Object} [props]
+ */
+export let compile = (str, defs, data) => {
+    return str.reduce((out, next, i) => {
+        let tail = defs[i];
+
+        // If this is a function we need to:
+        if (tail && tail.call) {
+            // 1. Call it with `data`
+            let res = tail(data);
+
+            // 2. Grab the className
+            let className = res && res.props && res.props.className;
+
+            // 3. If there's none, see if this is basically a
+            // previously styled className by checking the prefix
+            let end = className || (/^go/.test(res) && res);
+
+            if (end) {
+                // If the `end` is defined means it's a className
+                tail = '.' + end;
+            } else if (res && typeof res == 'object') {
+                // If `res` it's an object, we're either dealing with a vnode
+                // or an object returned from a function interpolation
+                tail = res.props ? '' : parse(res, '');
+            } else {
+                // Regular value returned. Can be falsy as well
+                tail = res;
+            }
+        }
+        return out + next + (tail == null ? '' : tail);
+    }, '');
+};

public/lib/ui/goober/src/core/get-sheet.js

@@ -0,0 +1,25 @@
+let GOOBER_ID = '_goober';
+let ssr = {
+    data: ''
+};
+
+/**
+ * Returns the _commit_ target
+ * @param {Object} [target]
+ * @returns {HTMLStyleElement|{data: ''}}
+ */
+export let getSheet = (target) => {
+    if (typeof window !== 'undefined') {
+        // Querying the existing target for a previously defined <style> tag
+        // We're doing a querySelector because the <head> element doesn't implemented the getElementById api
+        let sheet = target ? target.querySelector('#' + GOOBER_ID) : window[GOOBER_ID];
+        if (!sheet) {
+            // Note to self: head.innerHTML +=, triggers a layout/reflow. Avoid it.
+            sheet = (target || document.head).appendChild(document.createElement('style'));
+            sheet.innerHTML = ' ';
+            sheet.id = GOOBER_ID;
+        }
+        return sheet.firstChild;
+    }
+    return target || ssr;
+};

public/lib/ui/goober/src/core/hash.js

@@ -0,0 +1,62 @@
+import { toHash } from './to-hash';
+import { update } from './update';
+import { astish } from './astish';
+import { parse } from './parse';
+
+/**
+ * In-memory cache.
+ */
+let cache = {};
+
+/**
+ * Stringifies a object structure
+ * @param {Object} data
+ * @returns {String}
+ */
+let stringify = (data) => {
+    let out = '';
+
+    for (let p in data) {
+        let val = data[p];
+        out += p + (typeof val == 'object' ? stringify(data[p]) : data[p]);
+    }
+
+    return out;
+};
+
+/**
+ * Generates the needed className
+ * @param {String|Object} compiled
+ * @param {Object} sheet StyleSheet target
+ * @param {Object} global Global flag
+ * @param {Boolean} append Append or not
+ * @param {Boolean} keyframes Keyframes mode. The input is the keyframes body that needs to be wrapped.
+ * @returns {String}
+ */
+export let hash = (compiled, sheet, global, append, keyframes) => {
+    // Get a string representation of the object or the value that is called 'compiled'
+    let stringifiedCompiled = typeof compiled == 'object' ? stringify(compiled) : compiled;
+
+    // Retrieve the className from cache or hash it in place
+    let className =
+        cache[stringifiedCompiled] || (cache[stringifiedCompiled] = toHash(stringifiedCompiled));
+
+    // If there's no entry for the current className
+    if (!cache[className]) {
+        // Build the _ast_-ish structure if needed
+        let ast = typeof compiled == 'object' ? compiled : astish(compiled);
+
+        // Parse it
+        cache[className] = parse(
+            // For keyframes
+            keyframes ? { ['@keyframes ' + className]: ast } : ast,
+            global ? '' : '.' + className
+        );
+    }
+
+    // add or update
+    update(cache[className], sheet, append);
+
+    // return hash
+    return className;
+};

public/lib/ui/goober/src/core/parse.js

@@ -0,0 +1,70 @@
+/**
+ * Parses the object into css, scoped, blocks
+ * @param {Object} obj
+ * @param {String} selector
+ * @param {String} wrapper
+ */
+export let parse = (obj, selector) => {
+    let outer = '';
+    let blocks = '';
+    let current = '';
+    let next;
+
+    for (let key in obj) {
+        let val = obj[key];
+
+        // If this is a 'block'
+        if (typeof val == 'object') {
+            next = selector
+                ? // Go over the selector and replace the matching multiple selectors if any
+                  selector.replace(/([^,])+/g, (sel) => {
+                      // Return the current selector with the key matching multiple selectors if any
+                      return key.replace(/([^,])+/g, (k) => {
+                          // If the current `k`(key) has a nested selector replace it
+                          if (/&/g.test(k)) return k.replace(/&/g, sel);
+
+                          // If there's a current selector concat it
+                          return sel ? sel + ' ' + k : k;
+                      });
+                  })
+                : key;
+
+            // If these are the `@` rule
+            if (key[0] == '@') {
+                // Handling the `@font-face` where the
+                // block doesn't need the brackets wrapped
+                if (key[1] == 'f') {
+                    blocks += parse(val, key);
+                } else {
+                    // Regular rule block
+                    blocks += key + '{' + parse(val, key[1] == 'k' ? '' : selector) + '}';
+                }
+            } else {
+                // Call the parse for this block
+                blocks += parse(val, next);
+            }
+        } else {
+            if (key[0] == '@' && key[1] == 'i') {
+                outer = key + ' ' + val + ';';
+            } else {
+                // Push the line for this property
+                current += parse.p
+                    ? // We have a prefixer and we need to run this through that
+                      parse.p(key.replace(/[A-Z]/g, '-$&').toLowerCase(), val)
+                    : // Nope no prefixer just append it
+                      key.replace(/[A-Z]/g, '-$&').toLowerCase() + ':' + val + ';';
+            }
+        }
+    }
+
+    // If we have properties
+    if (current[0]) {
+        // Standard rule composition
+        next = selector ? selector + '{' + current + '}' : current;
+
+        // Else just push the rule
+        return outer + next + blocks;
+    }
+
+    return outer + blocks;
+};

public/lib/ui/goober/src/core/to-hash.js

@@ -0,0 +1,14 @@
+/**
+ * Transforms the input into a className.
+ * The multiplication constant 101 is selected to be a prime,
+ * as is the initial value of 11.
+ * The intermediate and final results are truncated into 32-bit
+ * unsigned integers.
+ * @param {String} str
+ * @returns {String}
+ */
+export let toHash = (str) => {
+    let i = 0, l = str.length, out = 11;
+    while (i < l) out = (101 * out + str.charCodeAt(i++)) >>> 0
+    return 'go' + out;
+}

public/lib/ui/goober/src/core/update.js

@@ -0,0 +1,21 @@
+import { getSheet } from './get-sheet';
+/**
+ * Extracts and wipes the cache
+ * @returns {String}
+ */
+export let extractCss = (target) => {
+    let sheet = getSheet(target);
+    let out = sheet.data;
+    sheet.data = '';
+    return out;
+};
+
+/**
+ * Updates the target and keeps a local cache
+ * @param {String} css
+ * @param {Object} sheet
+ * @param {Boolean} append
+ */
+export let update = (css, sheet, append) => {
+    sheet.data.indexOf(css) == -1 && (sheet.data = append ? css + sheet.data : sheet.data + css);
+};

public/lib/ui/goober/src/css.js

@@ -0,0 +1,40 @@
+import { hash } from './core/hash';
+import { compile } from './core/compile';
+import { getSheet } from './core/get-sheet';
+
+/**
+ * css entry
+ * @param {String|Object|Function} val
+ */
+function css(val) {
+    let ctx = this || {};
+    let _val = val.call ? val(ctx.p) : val;
+
+    return hash(
+        _val.unshift
+            ? _val.raw
+                ? // Tagged templates
+                  compile(_val, [].slice.call(arguments, 1), ctx.p)
+                : // Regular arrays
+                  _val.reduce((o, i) => (i ? Object.assign(o, i.call ? i(ctx.p) : i) : o), {})
+            : _val,
+        getSheet(ctx.target),
+        ctx.g,
+        ctx.o,
+        ctx.k
+    );
+}
+
+/**
+ * CSS Global function to declare global styles
+ * @type {Function}
+ */
+let glob = css.bind({ g: 1 });
+
+/**
+ * `keyframes` function for defining animations
+ * @type {Function}
+ */
+let keyframes = css.bind({ k: 1 });
+
+export { css, glob, keyframes };

public/lib/ui/goober/src/index.js

@@ -0,0 +1,3 @@
+export { styled, setup } from './styled';
+export { extractCss } from './core/update';
+export { css, glob, keyframes } from './css';

public/lib/ui/goober/src/styled.js

@@ -0,0 +1,65 @@
+import { css } from './css';
+import { parse } from './core/parse';
+
+let h, useTheme, fwdProp;
+function setup(pragma, prefix, theme, forwardProps) {
+    // This one needs to stay in here, so we won't have cyclic dependencies
+    parse.p = prefix;
+
+    // These are scope to this context
+    h = pragma;
+    useTheme = theme;
+    fwdProp = forwardProps;
+}
+
+/**
+ * styled function
+ * @param {string} tag
+ * @param {function} forwardRef
+ */
+function styled(tag, forwardRef) {
+    let _ctx = this || {};
+
+    return function wrapper() {
+        let _args = arguments;
+
+        function Styled(props, ref) {
+            // Grab a shallow copy of the props
+            let _props = Object.assign({}, props);
+
+            // Keep a local reference to the previous className
+            let _previousClassName = _props.className || Styled.className;
+
+            // _ctx.p: is the props sent to the context
+            _ctx.p = Object.assign({ theme: useTheme && useTheme() }, _props);
+
+            // Set a flag if the current components had a previous className
+            // similar to goober. This is the append/prepend flag
+            // The _empty_ space compresses better than `\s`
+            _ctx.o = / *go\d+/g.test(_previousClassName);
+
+            _props.className =
+                // Define the new className
+                css.apply(_ctx, _args) + (_previousClassName ? ' ' + _previousClassName : '');
+
+            // If the forwardRef fun is defined we have the ref
+            if (forwardRef) {
+                _props.ref = ref;
+            }
+
+            // Let the closure do the capture, cause it might get removed in the fwdProp
+            let _as = _props.as || tag;
+
+            // Handle the forward props filter if defined and _as is a string
+            if (fwdProp && _as[0]) {
+                fwdProp(_props);
+            }
+
+            return h(_as, _props);
+        }
+
+        return forwardRef ? forwardRef(Styled) : Styled;
+    };
+}
+
+export { styled, setup };

public/lib/ui/goober/typings.json

@@ -0,0 +1,5 @@
+{
+    "name": "goober",
+    "main": "goober.d.ts",
+    "version": false
+}

public/lib/ui/shoelace/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2020 A Beautiful Site, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

public/lib/ui/shoelace/README.md

@@ -0,0 +1,96 @@
+# Shoelace
+
+A forward-thinking library of web components.
+
+- Works with all frameworks 🧩
+- Works with CDNs 🚛
+- Fully customizable with CSS 🎨
+- Includes an official dark theme 🌛
+- Built with accessibility in mind ♿️
+- Open source 😸
+
+Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
+
+---
+
+Documentation: [shoelace.style](https://shoelace.style)
+
+Source: [github.com/shoelace-style/shoelace](https://github.com/shoelace-style/shoelace)
+
+Twitter: [@shoelace_style](https://twitter.com/shoelace_style)
+
+---
+
+## Shoemakers 🥾
+
+Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 12.10.0 to build and run the project locally.
+
+**You don't need to do any of this to use Shoelace!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace.
+
+If that's not what you're trying to do, the [documentation website](https://shoelace.style) is where you want to be.
+
+### What are you using to build Shoelace?
+
+Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
+
+### Forking the Repo
+
+Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies.
+
+```bash
+git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
+cd shoelace
+npm install
+```
+
+### Developing
+
+Once you've cloned the repo, run the following command.
+
+```bash
+npm start
+```
+
+This will spin up the Shoelace dev server. After the initial build, a browser will open automatically.
+
+There is currently no hot module reloading (HMR), as browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically. The exception is component metadata used by the docs, which is generated by TypeDoc. This tool takes a few seconds to run so, to prevent long reload delays, it only runs once at startup.
+
+The documentation is powered by Docsify, which uses raw markdown files to generate pages. As such, no static files are built for the docs.
+
+### Building
+
+To generate a production build, run the following command.
+
+```bash
+npm run build
+```
+
+### Creating New Components
+
+To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.
+
+```bash
+npm run create sl-tag-name
+```
+
+This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
+
+### Contributing
+
+Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
+
+## License
+
+Shoelace is designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It’s available under the terms of the MIT license.
+
+Designing, developing, and supporting this library requires a lot of time, effort, and skill. I’d like to keep it open source so everyone can use it, but that doesn’t provide me with any income.
+
+**Therefore, if you’re using my software to make a profit,** I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor. There are multiple tiers to choose from with benefits at every level, including prioritized support, bug fixes, feature requests, and advertising.
+
+👇 Your support is very much appreciated! 👇
+
+- [Become a sponsor](https://github.com/sponsors/claviska)
+- [Star on GitHub](https://github.com/shoelace-style/shoelace/stargazers)
+- [Follow on Twitter](https://twitter.com/shoelace_style)
+
+Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾

public/lib/ui/shoelace/assets/icons/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-2020 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

public/lib/ui/shoelace/assets/icons/alarm-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
+  <path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/alarm.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
+  <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
+  <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/align-bottom.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-bottom" viewBox="0 0 16 16">
+  <rect width="4" height="12" x="6" y="1" rx="1"/>
+  <path d="M1.5 14a.5.5 0 0 0 0 1v-1zm13 1a.5.5 0 0 0 0-1v1zm-13 0h13v-1h-13v1z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/align-center.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-center" viewBox="0 0 16 16">
+  <path d="M8 1a.5.5 0 0 1 .5.5V6h-1V1.5A.5.5 0 0 1 8 1zm0 14a.5.5 0 0 1-.5-.5V10h1v4.5a.5.5 0 0 1-.5.5zM2 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/align-end.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-end" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M14.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z"/>
+  <path d="M13 7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/align-middle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-middle" viewBox="0 0 16 16">
+  <path d="M6 13a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v10zM1 8a.5.5 0 0 0 .5.5H6v-1H1.5A.5.5 0 0 0 1 8zm14 0a.5.5 0 0 1-.5.5H10v-1h4.5a.5.5 0 0 1 .5.5z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/align-start.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-start" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"/>
+  <path d="M3 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/align-top.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-top" viewBox="0 0 16 16">
+  <rect width="4" height="12" rx="1" transform="matrix(1 0 0 -1 6 15)"/>
+  <path d="M1.5 2a.5.5 0 0 1 0-1v1zm13-1a.5.5 0 0 1 0 1V1zm-13 0h13v1h-13V1z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/alt.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alt" viewBox="0 0 16 16">
+  <path d="M1 13.5a.5.5 0 0 0 .5.5h3.797a.5.5 0 0 0 .439-.26L11 3h3.5a.5.5 0 0 0 0-1h-3.797a.5.5 0 0 0-.439.26L5 13H1.5a.5.5 0 0 0-.5.5zm10 0a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0-.5.5z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/app-indicator.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-app-indicator" viewBox="0 0 16 16">
+  <path d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z"/>
+  <path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/app.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-app" viewBox="0 0 16 16">
+  <path d="M11 2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h6zM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4H5z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/archive-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-archive-fill" viewBox="0 0 16 16">
+  <path d="M12.643 15C13.979 15 15 13.845 15 12.5V5H1v7.5C1 13.845 2.021 15 3.357 15h9.286zM5.5 7h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1zM.8 1a.8.8 0 0 0-.8.8V3a.8.8 0 0 0 .8.8h14.4A.8.8 0 0 0 16 3V1.8a.8.8 0 0 0-.8-.8H.8z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/archive.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-archive" viewBox="0 0 16 16">
+  <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-90deg-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-90deg-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.854 14.854a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V3.5A2.5 2.5 0 0 1 6.5 1h8a.5.5 0 0 1 0 1h-8A1.5 1.5 0 0 0 5 3.5v9.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-90deg-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-90deg-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.146 4.854a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H12.5A2.5 2.5 0 0 1 15 6.5v8a.5.5 0 0 1-1 0v-8A1.5 1.5 0 0 0 12.5 5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-90deg-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-90deg-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M14.854 4.854a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 4H3.5A2.5 2.5 0 0 0 1 6.5v8a.5.5 0 0 0 1 0v-8A1.5 1.5 0 0 1 3.5 5h9.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-90deg-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-90deg-up" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.854 1.146a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L4 2.707V12.5A2.5 2.5 0 0 0 6.5 15h8a.5.5 0 0 0 0-1h-8A1.5 1.5 0 0 1 5 12.5V2.707l3.146 3.147a.5.5 0 1 0 .708-.708l-4-4z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-bar-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-bar-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5zM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-bar-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8zm-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-bar-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-up" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-clockwise.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-counterclockwise.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-circle-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-left-circle-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-5.904-2.803a.5.5 0 1 1 .707.707L6.707 10h2.768a.5.5 0 0 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.525a.5.5 0 0 1 1 0v2.768l4.096-4.096z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-left-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-5.904-2.854a.5.5 0 1 1 .707.708L6.707 9.95h2.768a.5.5 0 1 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.475a.5.5 0 1 1 1 0v2.768l4.096-4.097z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-left-square-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-square-fill" viewBox="0 0 16 16">
+  <path d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm8.096-10.803L6 9.293V6.525a.5.5 0 0 0-1 0V10.5a.5.5 0 0 0 .5.5h3.975a.5.5 0 0 0 0-1H6.707l4.096-4.096a.5.5 0 1 0-.707-.707z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-left-square.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-square" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm10.096 3.146a.5.5 0 1 1 .707.708L6.707 9.95h2.768a.5.5 0 1 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.475a.5.5 0 1 1 1 0v2.768l4.096-4.097z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 13.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 0-1H3.707L13.854 2.854a.5.5 0 0 0-.708-.708L3 12.293V7.5a.5.5 0 0 0-1 0v6z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-right-circle-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-right-circle-fill" viewBox="0 0 16 16">
+  <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm5.904-2.803a.5.5 0 1 0-.707.707L9.293 10H6.525a.5.5 0 0 0 0 1H10.5a.5.5 0 0 0 .5-.5V6.525a.5.5 0 0 0-1 0v2.768L5.904 5.197z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-right-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-right-circle" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.854 5.146a.5.5 0 1 0-.708.708L9.243 9.95H6.475a.5.5 0 1 0 0 1h3.975a.5.5 0 0 0 .5-.5V6.475a.5.5 0 1 0-1 0v2.768L5.854 5.146z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-right-square-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-right-square-fill" viewBox="0 0 16 16">
+  <path d="M14 16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12zM5.904 5.197 10 9.293V6.525a.5.5 0 0 1 1 0V10.5a.5.5 0 0 1-.5.5H6.525a.5.5 0 0 1 0-1h2.768L5.197 5.904a.5.5 0 0 1 .707-.707z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-right-square.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-right-square" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.854 3.146a.5.5 0 1 0-.708.708L9.243 9.95H6.475a.5.5 0 1 0 0 1h3.975a.5.5 0 0 0 .5-.5V6.475a.5.5 0 1 0-1 0v2.768L5.854 5.146z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M14 13.5a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1 0-1h4.793L2.146 2.854a.5.5 0 1 1 .708-.708L13 12.293V7.5a.5.5 0 0 1 1 0v6z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-short.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-short" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"/>
+</svg>

public/lib/ui/shoelace/assets/icons/arrow-down-square-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-square-fill" viewBox="0 0 16 16">
+  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"/>
+</svg>