querysub 0.2.0

package/src/library-components/TimeRangeSelector.tsx

@@ -0,0 +1,407 @@
+import { css } from "typesafecss";
+import { qreact } from "../4-dom/qreact";
+import { Button } from "./Button";
+import { formatDateTime, formatPercent } from "socket-function/src/formatting/format";
+
+// TODO: When multiple of the previous range are selected, show two groups of ranges in the next
+//      group, AT LEAST.
+//      - Maybe add space so they can line up with the selector they are part of?
+//      - And somehow support this if it affects more levels. As in, 1 hour in one year, and a hour in another year,
+//          which would cover 2 years, 3 months, 2 days, and 2 hours
+//      - Maybe have a visual indication that a range opens up to the subvalues, centering them under it.
+//          - If the group isn't on the end, collapse the sub values by default. BUT, allow opening it up?
+//      - Allow clicking on the start/end of groups to select the start/end of the selected range?
+//          - Show a hover indicator above it that looks like it is holding the data
+// TODO: Support multi-selection
+export class TimeRangeSelector extends qreact.Component<{
+    start: { value: number | undefined };
+    end: { value: number | undefined };
+    defaultStart: number;
+    defaultEnd: number;
+
+    firstTime: number;
+    lastTime: number;
+
+    getIncrementLabel?: (range: { start: number; end: number; title: string }) => { title: string; };
+}> {
+    render() {
+        let { start, end, defaultStart, defaultEnd, firstTime, lastTime } = this.props;
+
+        let startTime = start.value || defaultStart;
+        let endTime = end.value || defaultEnd;
+        if (endTime < startTime) startTime = endTime;
+        startTime = Math.max(startTime, firstTime);
+        endTime = Math.min(endTime, lastTime);
+
+        let increment = guessIncrement(startTime, endTime);
+
+        let getIncrementLabel = this.props.getIncrementLabel || (({ title }) => ({ title, }));
+
+        const viewTypes: IncrementType[] = [
+            "year",
+            "month",
+            "day",
+            "hour",
+        ];
+
+        let incrementRanges: {
+            incrementType: IncrementType;
+            ranges: { start: number; end: number; title: string }[];
+        }[] = [];
+        let lastSelectedRange: { start: number; end: number; } | undefined;
+        for (let type of viewTypes) {
+            let parentType = incrementUps[type];
+            let curFirstTime = getStartOfIncrement(Math.max(lastSelectedRange?.start || 0, firstTime), parentType);
+            let curLastTime = getEndOfIncrement(curFirstTime, parentType);
+            let ranges = getIncrementSubRangesBase(curFirstTime, curLastTime, type).ranges;
+            incrementRanges.push({
+                incrementType: type,
+                ranges: ranges.map(range => {
+                    let title = formatSingleIncrement(range.start, type);
+                    if (type === "hour") {
+                        function formatHourShort(time: number): string {
+                            // 12 PM
+                            let d = new Date(time);
+                            let hours = d.getHours();
+                            let ampm = hours < 12 ? "AM" : "PM";
+                            hours = hours % 12;
+                            if (hours === 0) hours = 12;
+                            return `${hours} ${ampm}`;
+                        }
+                        title = formatHourShort(range.start);
+                    }
+                    return { ...range, title };
+                }),
+            });
+
+            // Drill down into the select range (or first if none are selected)
+            let selectedRange = ranges.find(range => startTime >= range.start && startTime < range.end) || ranges[0];
+            lastSelectedRange = selectedRange;
+        }
+
+        let incrementSubSize = incrementMedianSize(incrementSubs[increment].subType);
+
+        return (
+            <div className={css.vbox(4)}>
+                {incrementRanges.map(({ incrementType, ranges }) => (
+                    <div className={css.hbox(2).wrap}>
+                        {ranges.map(range => {
+                            // If it overlaps the selected range, select it
+                            let selected = startTime < range.end && endTime > range.start;
+
+                            let startF = (startTime - range.start) / (range.end - range.start);
+                            let endF = (endTime - range.start) / (range.end - range.start);
+
+                            let { title } = getIncrementLabel(range);
+                            let renderRange = (startF: number, endF: number) => {
+                                return <div className={
+                                    css.absolute.hsl(0, 0, 0)
+                                        .opacity(0.5)
+                                        .top0
+                                        .fillHeight
+                                        .left(`${startF * 100}%`)
+                                        .width(`${(endF - startF) * 100}%`)
+                                } />;
+                            };
+                            return <Button
+                                className={css.overflowHidden + (!selected && css.opacity(0.6))}
+                                hue={
+                                    selected && 110
+                                    || undefined
+                                }
+                                onClick={() => {
+                                    start.value = range.start;
+                                    end.value = range.end;
+                                }}
+                            >
+                                <div className={css.relative}>{title}</div>
+                                {renderRange(0, startF)}
+                                {renderRange(endF, 1)}
+                            </Button>;
+                        })}
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}
+
+export function guessIncrement(startTime: number, endTime: number): IncrementType {
+    let duration = endTime - startTime;
+    return incrementOrder.slice().reverse().find(type => incrementMedianSize(type) * 1.5 > duration) ?? incrementOrder[incrementOrder.length - 1];
+}
+
+export type IncrementType = "second" | "minute" | "minute2" | "second2" | "hour" | "hour6" | "day" | "week" | "week2" | "month" | "year" | "decade";
+let incrementOrder: IncrementType[] = [
+    "decade", "year", "month", "day", "hour", "hour6",
+    "week", "week2", "minute", "minute2", "second", "second2",
+];
+export let incrementSubs: {
+    [key in IncrementType]: { type: IncrementType; subType: IncrementType; }
+} = {
+    second: { type: "second", subType: "second" },
+    second2: { type: "second2", subType: "second2" },
+    minute: { type: "minute", subType: "second" },
+    minute2: { type: "minute2", subType: "second2" },
+    hour: { type: "hour", subType: "minute2" },
+    hour6: { type: "hour6", subType: "hour" },
+    day: { type: "day", subType: "hour" },
+    week: { type: "week", subType: "hour6" },
+    week2: { type: "week2", subType: "day" },
+    month: { type: "month", subType: "day" },
+    year: { type: "year", subType: "week2" },
+    decade: { type: "decade", subType: "year" },
+};
+export let incrementUps: { [key in IncrementType]: IncrementType } = {
+    second: "minute",
+    second2: "minute",
+    minute: "hour",
+    minute2: "hour",
+    hour: "day",
+    hour6: "day",
+    day: "week",
+    week: "month",
+    week2: "month",
+    month: "year",
+    year: "decade",
+    decade: "decade",
+};
+
+export function getStartOfIncrement(time: number, type: IncrementType): number {
+    let d = new Date(time);
+    function resetMilli() {
+        // Just use times, as Date incorrectly handle DST
+        d = new Date(+d - d.getMilliseconds());
+    }
+    function resetSeconds() {
+        resetMilli();
+        d = new Date(+d - d.getSeconds() * 1000);
+    }
+    function resetMinutes() {
+        resetSeconds();
+        d = new Date(+d - d.getMinutes() * 60000);
+    }
+
+    if (type === "second") {
+        resetMilli();
+    } else if (type === "second2") {
+        resetMilli();
+        // Round to nearest 2 seconds
+        let seconds = d.getSeconds();
+        let half = seconds % 2 === 1;
+        if (half) {
+            d.setSeconds(seconds - 1);
+        }
+    } else if (type === "minute") {
+        resetSeconds();
+    } else if (type === "minute2") {
+        resetSeconds();
+        // Round to nearest 2 minutes
+        let minutes = d.getMinutes();
+        let half = minutes % 2 === 1;
+        if (half) {
+            d = new Date(+d - 60000);
+        }
+    } else if (type === "hour") {
+        resetMinutes();
+    } else if (type === "hour6") {
+        d.setHours(Math.floor(d.getHours() / 6) * 6);
+        resetMinutes();
+    } else if (type === "day") {
+        d.setHours(0);
+        resetMinutes();
+    } else if (type === "week") {
+        d.setHours(0);
+        resetMinutes();
+        d.setDate(d.getDate() - d.getDay());
+    } else if (type === "week2") {
+        // Only land on even weeks, numbering weeks from the epoch
+        let epoch = new Date(0);
+        let epochWeek = Math.floor(epoch.getTime() / (86400000 * 7));
+        let week = Math.floor(d.getTime() / (86400000 * 7));
+        let diff = week - epochWeek;
+        let even = diff % 2 === 0;
+        if (!even) diff++;
+        if (diff > 0) diff -= 2;
+        d.setTime(epochWeek + diff * 86400000 * 7);
+        d.setHours(0);
+        resetMinutes();
+    } else if (type === "month") {
+        d.setHours(0);
+        resetMinutes();
+        d.setDate(1);
+    } else if (type === "year") {
+        d.setHours(0);
+        resetMinutes();
+        d.setMonth(0);
+        d.setDate(1);
+    } else if (type === "decade") {
+        d.setHours(0);
+        resetMinutes();
+        d.setMonth(0);
+        d.setDate(1);
+        d.setFullYear(Math.floor(d.getFullYear() / 10) * 10);
+    } else {
+        let unhandled: never = type;
+    }
+    return d.getTime();
+}
+
+export function getEndOfIncrement(time: number, type: IncrementType): number {
+    let start = getStartOfIncrement(time, type);
+    let next = getNextIncrement(start, type);
+    return next;
+}
+
+export function incrementMedianSize(type: IncrementType): number {
+    if (type === "second") return 1000;
+    if (type === "second2") return 2000;
+    if (type === "minute") return 60000;
+    if (type === "minute2") return 60000 * 2;
+    if (type === "hour") return 3600000;
+    if (type === "hour6") return 3600000 * 6;
+    if (type === "day") return 86400000;
+    if (type === "week") return 86400000 * 7;
+    if (type === "week2") return 86400000 * 14;
+    if (type === "month") return 86400000 * 30;
+    if (type === "year") return 86400000 * 365;
+    if (type === "decade") return 86400000 * 365 * 10;
+    let unhandled: never = type;
+    throw new Error("Unhandled type: " + unhandled);
+}
+export function getNextIncrement(time: number, type: IncrementType): number {
+    let baseTime = time;
+    time = getStartOfIncrement(time, type);
+    time += incrementMedianSize(type) * 1.5;
+    time = getStartOfIncrement(time, type);
+    if (time <= baseTime) {
+        // Happens due to daylight savings time
+        time = getStartOfIncrement(baseTime, type);
+        time += incrementMedianSize(type) * 2.5;
+        time = getStartOfIncrement(time, type);
+    }
+    if (time <= baseTime) {
+        // Time went backwards. We had issues related to DST here before, maybe this is similar?
+        debugger;
+        time = getStartOfIncrement(baseTime, type);
+        time += incrementMedianSize(type) * 2.5;
+        time = getStartOfIncrement(time, type);
+    }
+    return time;
+}
+export function getPrevIncrement(time: number, type: IncrementType): number {
+    time = getStartOfIncrement(time, type);
+    time--;
+    return getStartOfIncrement(time, type);
+}
+function hourShort(time: number): string {
+    // 12 PM
+    let d = new Date(time);
+    let hours = d.getHours();
+    let ampm = hours < 12 ? "AM" : "PM";
+    hours = hours % 12;
+    if (hours === 0) hours = 12;
+    return `${hours} ${ampm}`;
+}
+function timeOfDayTime(time: number): string {
+    let hours = new Date(time).getHours();
+    if (hours === 0) return "🌑"; //return "Midnight"; 🌃
+    if (hours === 6) return "🌅"; //return "Morning";
+    if (hours === 12) return "☀️"; //return "Noon";
+    if (hours === 18) return "🌇"; // return "Evening";
+    return hourShort(time);
+}
+function hourMinuteSecond(time: number): string {
+    // 12:00:00 PM
+    let d = new Date(time);
+    let hours = d.getHours();
+    let minutes = d.getMinutes();
+    let seconds = d.getSeconds();
+    let ampm = hours < 12 ? "AM" : "PM";
+    hours = hours % 12;
+    if (hours === 0) hours = 12;
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")} ${ampm}`;
+}
+let shortDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+let longDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+let shortMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+let longMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+
+export function formatSingleIncrement(time: number, type: IncrementType, long?: "long"): string {
+    //time = getStartOfIncrement(time, type);
+    let d = new Date(time);
+    let days = long ? longDays : shortDays;
+    let months = long ? longMonths : shortMonths;
+    if (type === "second") return hourMinuteSecond(time);
+    if (type === "second2") return hourMinuteSecond(time);
+    if (type === "minute") return hourMinuteSecond(time);
+    if (type === "minute2") return formatSingleIncrement(time, "minute");
+    if (type === "hour") return hourMinuteSecond(time);
+    if (type === "hour6") {
+        return d.getDate() + " " + days[d.getDay()] + " " + timeOfDayTime(time);
+    }
+    if (type === "day") return d.getDate() + " " + days[d.getDay()];
+    // Month - Day
+    if (type === "week") return formatFullIncrement(time, "month") + " " + d.getDate();
+    if (type === "week2") return formatSingleIncrement(time, "week");
+    if (type === "month") return months[d.getMonth()];
+    if (type === "year") return d.getFullYear() + "";
+    if (type === "decade") return d.getFullYear() + "";
+    let unhandled: never = type;
+    throw new Error("Unhandled type: " + unhandled);
+}
+export function formatFullIncrementParts(time: number, type: IncrementType, long?: "long"): {
+    type: IncrementType;
+    value: string;
+}[] {
+    let fullFormat = [
+        { type: "year" as const, value: formatSingleIncrement(time, "year", long) },
+        { type: "month" as const, value: formatSingleIncrement(time, "month", long) },
+        { type: "day" as const, value: formatSingleIncrement(time, "day", long) },
+        { type: "hour" as const, value: hourMinuteSecond(time) },
+    ];
+    let count = fullFormat.length;
+    if (type === "second") count = 4;
+    if (type === "minute") count = 4;
+    if (type === "minute2") count = 4;
+    if (type === "hour") count = 4;
+    if (type === "hour6") count = 4;
+    if (type === "day") count = 3;
+    if (type === "week") count = 3;
+    if (type === "month") count = 2;
+    if (type === "year") count = 1;
+    if (type === "decade") count = 1;
+    return fullFormat.slice(0, count);
+}
+export function formatFullIncrement(time: number, type: IncrementType, long?: "long"): string {
+    return formatFullIncrementParts(time, type, long).map(x => x.value).join(" | ");
+}
+export function getIncrementSubRanges(time: number, type: IncrementType, subType = incrementSubs[type].subType): {
+    ranges: {
+        start: number;
+        end: number;
+    }[];
+} {
+    let start = getStartOfIncrement(time, type);
+    let end = getNextIncrement(time, type);
+    return getIncrementSubRangesBase(start, end, subType);
+}
+export function getIncrementSubRangesBase(start: number, end: number, subType: IncrementType): {
+    ranges: {
+        start: number;
+        end: number;
+    }[];
+} {
+    let cur = start;
+    let ranges: { start: number; end: number; }[] = [];
+    while (ranges.length < 240) {
+        let next = getNextIncrement(cur, subType);
+        ranges.push({ start: cur, end: next, });
+        cur = next;
+        if (cur >= end) break;
+    }
+    return {
+        ranges,
+    };
+}

package/src/library-components/URLParam.ts

@@ -0,0 +1,263 @@
+// NOTE: This is basically a component, except it renders to the URL input.
+
+import { deepCloneJSON, throttleFunction, timeInMinute } from "socket-function/src/misc";
+import { isNode } from "typesafecss";
+import { LOCAL_DOMAIN } from "../0-path-value-core/PathController";
+import { atomicObjectRead, doAtomicWrites, proxyWatcher } from "../2-proxy/PathValueProxyWatcher";
+import { syncSchema } from "../3-path-functions/syncSchema";
+import { Querysub } from "../4-querysub/QuerysubController";
+import { isDefined } from "../misc";
+import { deserializeURLParam, serializeURLParam } from "./niceStringify";
+import { logErrors } from "../errors";
+import { canHaveChildren } from "socket-function/src/types";
+import { URLOverride } from "./ATag";
+
+export interface URLParam<T = unknown> {
+    value: T;
+    readonly urlKey: string;
+    default?: T;
+    reset(): void;
+    getOverride(value: T): URLOverride<T>;
+}
+
+let localStorageKeys = new Set<string>();
+
+declare global {
+    var url: { [key: string]: URLParam };
+}
+
+let globalURLLookup = globalThis.url || (globalThis.url = Object.create(null));
+
+let loadSearchCache: { [key: string]: unknown } = Object.create(null);
+if (!isNode()) {
+    loadSearchCache = parseSearchString(location.search);
+}
+
+
+export class URLParam<T = unknown> {
+    constructor(urlKey: string, defaultValue: T) {
+        return createURLSync(urlKey, defaultValue);
+    }
+}
+/** const myVariable = createURLSync("myvar", 0) */
+export function createURLSync<T>(urlKey: string, defaultValue: T, config?: {
+    storage?: "url" | "localStorage";
+}): URLParam<T> {
+
+    let prev = globalURLLookup[urlKey];
+    if (prev) {
+        // NOTE: This happens both during hot reloading AND when dynamically loading
+        //  functions for input prediction.
+        return prev as any;
+        // if (isHotReloading?.()) return prev as any;
+        // throw new Error(`URL key ${urlKey} already exists`);
+    }
+
+    let storage = config?.storage || "url";
+    // Clone the default, so it doesn't get changed
+    defaultValue = deepCloneJSON(defaultValue);
+    // undefined causes issues, making the returned value a proxy. It's better to make it null
+    if (defaultValue === undefined) {
+        defaultValue = null as any as T;
+    };
+    if (config?.storage === "localStorage") {
+        localStorageKeys.add(urlKey);
+    }
+    Querysub.localCommit(() => {
+        data().defaults[urlKey] = defaultValue;
+        if (!(urlKey in loadSearchCache)) {
+            data().params[urlKey] = deepCloneJSON(defaultValue);
+        }
+    });
+    function deleteKeys(obj: any) {
+        if (!canHaveChildren(obj)) return;
+        for (let key in obj) {
+            deleteKeys(obj[key]);
+            delete obj[key];
+        }
+    }
+
+    // TODO: Check for duplicate keys. Which is hard, because we don't want hot reloading to give us false positives.
+    let param: URLParam<T> = {
+        urlKey,
+        default: defaultValue,
+        get value() {
+            if (!proxyWatcher.inWatcher()) {
+                // NOTE: This makes async functions a bit easier, although... async functions
+                //  are almost never needed.
+                return Querysub.localRead(() => {
+                    return data().params[urlKey] as T;
+                });
+            } else {
+                return data().params[urlKey] as T;
+            }
+        },
+        set value(value: T) {
+            if ((value === undefined || value === null) && storage === "url") {
+                param.reset();
+                return;
+            }
+            // Recursively delete previous values, otherwise we will be merging values
+            deleteKeys(data().params[urlKey]);
+            data().params[urlKey] = value;
+        },
+        reset() {
+            deleteKeys(data().params[urlKey]);
+            data().params[urlKey] = deepCloneJSON(defaultValue);
+        },
+        getOverride(value: T) {
+            return { param, value, };
+        }
+    };
+    globalURLLookup[urlKey] = {
+        urlKey,
+        get value() {
+            return Querysub.localRead(() => param.value);
+        },
+        set value(value: T) {
+            Querysub.localCommit(() => param.value = value);
+        },
+        reset() {
+            Querysub.localCommit(() => param.reset());
+        },
+        getOverride(value: T) {
+            return { param, value, };
+        }
+    };
+    return param;
+}
+
+// TODO: Support pathname keys (ex /name-value)
+const { data } = syncSchema<{
+    params: {
+        [key: string]: unknown;
+    };
+    defaults: {
+        [key: string]: unknown;
+    };
+}>()({
+    domainName: LOCAL_DOMAIN,
+    functions: {},
+    module,
+    moduleId: "urlSync",
+    permissions: {},
+});
+
+function syncStateToURL() {
+    let targetURL = document.location.href;
+    const onTargetURLUpdated = throttleFunction(2000, () => {
+        if (targetURL === document.location.href) return;
+        window.history.pushState({}, "", targetURL);
+    });
+    Querysub.createWriteWatcher(function syncStateToURL() {
+        let urlObj = new URL(document.location.href);
+        urlObj.search = encodeSearchString(data().params, data().defaults);
+        targetURL = urlObj.toString();
+        logErrors(onTargetURLUpdated());
+    });
+}
+
+function loadParamsFromURL() {
+    Querysub.localCommit(function loadParamsFromURL() {
+        let newUrlValues = Object.entries(parseSearchString(document.location.search));
+        for (let [key, value] of newUrlValues) {
+            if ((value === undefined || value === null)) {
+                value = data().defaults[key];
+            }
+            data().params[key] = value;
+        }
+        let newKeys = new Set(newUrlValues.map(([key]) => key));
+        for (let key of Object.keys(data().params)) {
+            if (localStorageKeys.has(key)) continue;
+            if (!newKeys.has(key)) {
+                data().params[key] = data().defaults[key];
+            }
+        }
+    });
+}
+
+function syncStateToStorage() {
+    Querysub.createWriteWatcher(function syncStateToURL() {
+        for (let [key, value] of Object.entries(data().params)) {
+            if (localStorageKeys.has(key)) {
+                localStorage.setItem(key, JSON.stringify(value));
+            }
+        }
+    });
+}
+function loadFromLocalStorage() {
+    Querysub.localCommit(function loadParamsFromURL() {
+        for (let key of localStorageKeys) {
+            let value = localStorage.getItem(key);
+            if (value === null) continue;
+            data().params[key] = JSON.parse(value) ?? data().defaults[key];
+        }
+    });
+}
+
+function watchURLForUpdates() {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    let pushState = history.pushState.bind(history);
+    history.pushState = function (...args: any[]) {
+        (pushState as any)(...args);
+        loadParamsFromURL();
+    };
+
+    window.addEventListener("popstate", () => {
+        loadParamsFromURL();
+    });
+
+    // Load after startup (so localStorage is populated)
+    setTimeout(() => {
+        loadFromLocalStorage();
+        syncStateToStorage();
+    });
+
+    // Eh... I'm not sure how else to do this. We have to poll, as it might change in
+    //  another tab and we will forever be out of sync
+    setInterval(() => {
+        loadFromLocalStorage();
+        syncStateToStorage();
+    }, timeInMinute);
+}
+
+if (!isNode()) {
+    loadParamsFromURL();
+    watchURLForUpdates();
+    syncStateToURL();
+}
+
+export function parseSearchString(search: string): { [key: string]: unknown } {
+    if (search.startsWith("?")) {
+        search = search.slice(1);
+    }
+    if (!search) return Object.create(null);
+    let parts = search.split("&");
+    let output: { [key: string]: string | undefined } = Object.create(null);
+    for (let part of parts) {
+        let equalIndex = part.indexOf("=");
+        if (equalIndex === -1) {
+            output[decodeURIComponent(part)] = undefined;
+            continue;
+        }
+        let key = part.slice(0, equalIndex);
+        let value = part.slice(equalIndex + 1);
+        output[decodeURIComponent(key)] = decodeURIComponent(value);
+    }
+    for (let [key, value] of Object.entries(output)) {
+        output[key] = deserializeURLParam(value);
+    }
+    return output;
+}
+
+export function encodeSearchString(parts: { [key: string]: unknown }, defaults: { [key: string]: unknown } = {}) {
+    let encodedParts = Object.entries(parts).map(([key, value]) => {
+        if (localStorageKeys.has(key)) return undefined;
+        let valueSerialized = serializeURLParam(value);
+        if (valueSerialized === serializeURLParam(defaults[key])) return undefined;
+        if (valueSerialized === undefined) return key;
+        return `${encodeURIComponent(key)}=${encodeURIComponent(valueSerialized)}`;
+    }).filter(isDefined);
+    encodedParts.sort((a, b) => a.length - b.length);
+    return encodedParts.join("&");
+}

package/src/library-components/colors.tsx

@@ -0,0 +1,14 @@
+import { css } from "../../src/4-dom/css";
+
+export const redButton = css.hsl(0, 75, 50).bord(1, "hsl(0, 75%, 75%)").background("hsl(0, 75%, 75%)", "hover");
+export const yellowButton = css.hsl(50, 90, 50).bord(1, "hsl(40, 75%, 75%)").color("hsl(0, 0%, 16%)!important").background("hsl(40, 75%, 75%)", "hover");
+export const greenButton = css.hsl(110, 65, 45).bord(1, { h: 110, s: 65, l: 75 }).background("hsl(110, 65%, 90%)", "hover");
+
+export const errorMessage = css.hsl(0, 75, 50).color("white")
+    .padding("4px 6px", "soft")
+    .whiteSpace("pre-wrap").display("inline-block", "soft")
+    ;
+export const warnMessage = css.hsl(50, 75, 50).color("hsl(0, 0%, 7%)", "important", "soft")
+    .padding("4px 6px", "soft")
+    .whiteSpace("pre-wrap").display("inline-block", "soft")
+    ;