b44ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,99 @@
+import { type ReactNode } from "react";
+import type { ClassValue } from "clsx";
+export type Color = 'red' | 'blue' | 'orange' | 'purple' | 'yellow' | 'green';
+export declare const CN: (...inputs: ClassValue[]) => string;
+export type DProps = {
+    children?: ReactNode;
+    cn?: any;
+    cnIgnoreWrongUsage?: any;
+    style?: React.CSSProperties;
+    grow?: boolean;
+    gap?: number;
+    p?: number;
+    wd?: number;
+    ht?: number;
+};
+export declare const D: (props: DProps) => import("react/jsx-runtime").JSX.Element;
+export declare const App: (props: DProps & {
+    center?: boolean;
+    width?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Centered: (props: DProps & {
+    width?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TabList: (props: DProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tab: ({ title, active, click, grow, gap, p, ...rest }: DProps & {
+    title: ReactNode;
+    active?: boolean;
+    click?: () => void;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Block: (props: DProps & {
+    label?: ReactNode;
+    row?: boolean;
+    dashed?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const BlockSm: (props: DProps & {
+    dashed?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Chip: (props: DProps & {
+    click?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: (props: DProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Col: (props: DProps & {
+    align?: "start" | "center" | "end";
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Popover: (props: DProps & {
+    text: ReactNode;
+    color?: Color;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Muted: (props: DProps) => import("react/jsx-runtime").JSX.Element;
+export declare const A: ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, style, click, href, onClick, onKeyDown, role, tabIndex, ...rest }: DProps & {
+    click?: () => void;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Btn: ({ children, grow, gap, p, click, color, ghost, sm, ...rest }: DProps & {
+    click?: () => void;
+    color?: Color;
+    ghost?: boolean;
+    sm?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tint: (props: DProps & {
+    color: Color;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Row: (props: DProps & {
+    ratio?: number;
+    align?: "mid" | "start" | "end";
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Toolbar: (props: DProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: (props: DProps & {
+    open: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Input: ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.InputHTMLAttributes<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Textarea: ({ cn, cnIgnoreWrongUsage, ref, grow, ...rest }: DProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    ref?: React.RefObject<HTMLTextAreaElement | null>;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.SelectHTMLAttributes<HTMLSelectElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Grid: (props: DProps & {
+    cols?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Hr: ({ vertical, color, grow, gap, p, ...rest }: DProps & {
+    vertical?: boolean;
+    color?: Color | "gray";
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Progress: ({ value, color, dot, grow, gap, p, ...rest }: DProps & {
+    value: number;
+    color?: Color;
+    dot?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropzone: ({ children, onFiles, multiple, accept, click, onClick, onDragOver, onDrop, ...rest }: DProps & {
+    onFiles: (files: File[]) => void;
+    multiple?: boolean;
+    accept?: string;
+    click?: () => void;
+} & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Code: (props: DProps & {
+    highlight?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Md: ({ children, className }: {
+    children: string;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useMemo, useRef, useState } from "react";
+import { Marked } from "marked";
+import { markedHighlight } from "marked-highlight";
+import hljs from "highlight.js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+const tintMap = {
+    red: 'bg-red-500/20 border-red-500',
+    blue: 'bg-blue-500/20 border-blue-500',
+    orange: 'bg-orange-500/20 border-orange-500',
+    purple: 'bg-purple-500/20 border-purple-500',
+    yellow: 'bg-yellow-500/20 border-yellow-500',
+    green: 'bg-green-500/20 border-green-500',
+};
+const colorMap = {
+    red: 'bg-red-600 hover:bg-red-500',
+    blue: 'bg-blue-600 hover:bg-blue-500',
+    orange: 'bg-orange-600 hover:bg-orange-500',
+    purple: 'bg-purple-600 hover:bg-purple-500',
+    yellow: 'bg-yellow-600 hover:bg-yellow-500',
+    green: 'bg-green-600 hover:bg-green-500',
+};
+const tintCn = (c) => tintMap[c];
+const colorCn = (c) => colorMap[c];
+export const CN = (...inputs) => twMerge(clsx(inputs));
+const warnCn = (cn) => typeof cn === 'string' && cn.length > 24 && console.warn(`long cn detected (${cn.length} chars). please avoid using cn. you SHOULD use b44ui builtins instead. you SHOULD NOT use cn to add unnecessary visual enhancements. you MUST NOT have long cns. if you choose to ignore these requirements (ie. because you cannot achieve this otherwise) you MUST instead use <... cnIgnoreWrongUsage="styles..">\n  cn="${cn}"`);
+const rcn = ({ cn, cnIgnoreWrongUsage }) => { warnCn(cn); return cn ?? cnIgnoreWrongUsage; };
+const sc = (n) => n !== undefined ? n * 4 : undefined; // tailwind scale -> px
+const dStyle = ({ gap, p, wd, ht, style }) => {
+    const g = sc(gap), pd = sc(p);
+    if (!g && !pd && wd === undefined && ht === undefined && !style)
+        return undefined;
+    return { ...(g !== undefined && { gap: g }), ...(pd !== undefined && { padding: pd }), ...(wd !== undefined && { width: `${wd * 100}%` }), ...(ht !== undefined && { height: `${ht * 100}%` }), ...style };
+};
+export const D = (props) => _jsx("div", { className: CN(props.cn ?? props.cnIgnoreWrongUsage, props.grow && "flex-1"), style: dStyle(props), children: props.children });
+export const App = (props) => {
+    const { children, center = true, width, gap, p } = props;
+    const c = rcn(props);
+    const inner = Children.map(children, c => typeof c == 'string' ? _jsx(Md, { children: c.trim() }) : c);
+    return _jsx(D, { cn: CN("min-h-screen w-full bg-[#111] text-[#eee] font-[Inter]", center && "flex justify-center items-center", c), gap: gap, p: p, children: center ? _jsx("div", { className: "max-w-full px-5 py-10 space-y-5 *:mx-auto", style: { width }, children: inner }) : inner });
+};
+export const Centered = (props) => {
+    const { children, grow, gap, p, wd, ht, width = 700 } = props;
+    return _jsx(D, { cn: CN("mx-auto max-w-full px-6", rcn(props)), grow: grow, gap: gap, p: p, wd: wd, ht: ht, style: { width }, children: children });
+};
+export const TabList = (props) => {
+    const { children, grow, gap, p, wd, ht } = props;
+    return _jsx(D, { cn: CN("flex items-end gap-4", rcn(props)), grow: grow, gap: gap, p: p, wd: wd, ht: ht, children: children });
+};
+export const Tab = ({ title, active, click, grow, gap, p, ...rest }) => {
+    const c = rcn(rest);
+    return _jsx("button", { className: CN("cursor-pointer border-b-2 pb-1.5 text-sm font-medium", active ? "border-zinc-100 text-zinc-100" : "border-transparent text-zinc-400 hover:text-zinc-200", grow && "flex-1", c), style: dStyle({ gap, p, wd: rest.wd, style: rest.style }), onClick: click, role: "tab", "aria-selected": active, ...rest, children: title });
+};
+export const Block = (props) => {
+    const { label, children, row, dashed, grow, gap, p, wd, ht } = props;
+    return _jsxs(D, { cn: CN("rounded flex flex-col items-center", dashed && "border border-dashed border-zinc-700", rcn(props)), grow: grow, gap: gap ?? 4, p: p ?? 4, wd: wd, ht: ht, children: [label && _jsx("span", { className: "opacity-75", children: label }), _jsx("div", { className: CN(row ? "flex-row" : "flex-col", "flex items-center"), style: { gap: sc(gap ?? 4) }, children: children })] });
+};
+export const BlockSm = (props) => {
+    const { children, dashed, grow, gap, p, wd, ht } = props;
+    return _jsx(D, { cn: CN("rounded text-sm", dashed && "border border-dashed border-zinc-700", rcn(props)), grow: grow, gap: gap, p: p ?? 2, wd: wd, ht: ht, style: { paddingLeft: sc(3), paddingRight: sc(3) }, children: children });
+};
+export const Chip = (props) => {
+    const { children, click, gap, p, wd, ht, style } = props;
+    return _jsx("span", { className: CN("bg-zinc-800 rounded px-2 py-0.5 text-xs", click && "cursor-pointer hover:bg-zinc-700", rcn(props)), style: dStyle({ gap, p, wd, ht, style }), onClick: click, children: children });
+};
+export const Card = (props) => {
+    const { children, grow, gap, p, wd, ht } = props;
+    return _jsx(D, { cn: CN("rounded border border-zinc-700 bg-zinc-900", rcn(props)), grow: grow, gap: gap ?? 4, p: p ?? 4, wd: wd, ht: ht, style: { display: 'flex', flexDirection: 'column' }, children: children });
+};
+export const Col = (props) => {
+    const { children, grow, gap, p, wd, ht, align } = props;
+    return _jsx(D, { cn: CN("flex flex-col", align === 'start' && 'items-start', align === 'center' && 'items-center', align === 'end' && 'items-end', rcn(props)), grow: grow, gap: gap ?? 4, p: p, wd: wd, ht: ht, children: children });
+};
+export const Popover = (props) => {
+    const { children, text, color } = props;
+    const c = rcn(props);
+    const [open, setOpen] = useState(false);
+    return _jsxs("span", { className: "relative inline-block", onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), children: [_jsx("span", { className: CN("cursor-pointer", color && tintCn(color), color && "border-b-2", c), children: children }), open && _jsx("div", { className: "absolute left-0 top-full z-10 mt-1", children: _jsx(Card, { cn: "w-64 shadow-lg text-sm", p: props.p ?? 3, gap: props.gap, children: text }) })] });
+};
+export const Muted = (props) => {
+    const { children, grow } = props;
+    return _jsx("span", { className: CN("text-sm text-zinc-400", grow && "flex-1", rcn(props)), children: children });
+};
+export const A = ({ children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, style, click, href, onClick, onKeyDown, role, tabIndex, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage });
+    const fire = (e) => {
+        click?.();
+        onClick?.(e);
+    };
+    const buttonLike = !href;
+    return _jsx("a", { ...rest, href: href, role: buttonLike ? role ?? 'button' : role, tabIndex: buttonLike ? tabIndex ?? 0 : tabIndex, className: CN("inline-flex items-center gap-1 text-zinc-300 underline underline-offset-4 cursor-pointer hover:text-zinc-100", grow && "flex-1", c), style: dStyle({ gap, p, wd, style }), onClick: fire, onKeyDown: e => {
+            if (buttonLike && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                fire(e);
+            }
+            onKeyDown?.(e);
+        }, children: children });
+};
+export const Btn = ({ children, grow, gap, p, click, color, ghost, sm, ...rest }) => {
+    const c = rcn(rest);
+    return _jsx("button", { className: CN("rounded cursor-pointer", sm ? "px-3 py-1 text-xs" : "px-4 py-2 text-sm", ghost ? "bg-transparent text-zinc-400 hover:bg-zinc-800" : color ? colorCn(color) : "bg-zinc-800 hover:bg-zinc-700", grow && "flex-1", c), style: dStyle({ gap, p, wd: rest.wd, style: rest.style }), onClick: click, ...rest, children: children });
+};
+export const Tint = (props) => {
+    const { children, color, grow, gap, p, wd, ht } = props;
+    return _jsx(D, { cn: CN("rounded text-sm", tintCn(color), rcn(props)), grow: grow, gap: gap, p: p ?? 3, wd: wd, ht: ht, children: children });
+};
+export const Row = (props) => {
+    const { children, ratio, align, grow, gap, p, wd, ht, style } = props;
+    return _jsx("div", { className: CN("flex items-center justify-center", align === 'mid' && "justify-between", align == 'end' && "justify-end", align == 'start' && "justify-start", grow && "flex-1", rcn(props)), style: { ...dStyle({ gap: gap ?? 4, p, wd, ht, style }), ...(ratio ? { width: `${ratio * 100}%` } : {}) }, children: children });
+};
+export const Toolbar = (props) => {
+    const { children, gap, p, wd, ht } = props;
+    return _jsx(Row, { cn: CN("border-b border-zinc-700", rcn(props)), gap: gap, p: p ?? 2, wd: wd, ht: ht, align: "mid", children: children });
+};
+export const Modal = (props) => {
+    const { children, open, gap, p, wd, ht } = props;
+    return open ? _jsx("div", { className: "fixed inset-0 flex items-center justify-center bg-black/50 z-50", children: _jsx(Card, { cn: CN("max-h-[80vh] overflow-y-auto w-lg", rcn(props)), gap: gap, p: p, wd: wd, ht: ht, children: children }) }) : null;
+};
+export const Input = ({ cn, cnIgnoreWrongUsage, grow, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage });
+    return _jsx("input", { className: CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none", grow && "flex-1", c), style: dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style }), ...rest });
+};
+export const Textarea = ({ cn, cnIgnoreWrongUsage, ref, grow, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage });
+    return _jsx("textarea", { ref: ref, className: CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none w-full", grow && "flex-1", c), style: dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style }), ...rest });
+};
+export const Select = ({ cn, cnIgnoreWrongUsage, grow, ...rest }) => {
+    const c = rcn({ cn, cnIgnoreWrongUsage });
+    return _jsx("select", { className: CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer", grow && "flex-1", c), style: dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style }), ...rest });
+};
+export const Grid = (props) => {
+    const { children, cols, grow, gap, p, wd, ht } = props;
+    return _jsx(D, { cn: CN("grid ui-grid", rcn(props)), grow: grow, p: p, wd: wd, ht: ht, style: { gap: sc(gap ?? 4), '--cols': cols ?? Children.count(children) }, children: children });
+};
+export const Hr = ({ vertical, color = 'gray', grow, gap, p, ...rest }) => {
+    const c = rcn(rest);
+    const border = color === 'gray' ? "border-zinc-700" : {
+        red: "border-red-500",
+        blue: "border-blue-500",
+        orange: "border-orange-500",
+        purple: "border-purple-500",
+        yellow: "border-yellow-500",
+        green: "border-green-500",
+    }[color];
+    return _jsx("div", { className: CN(vertical ? "self-stretch border-l" : "w-full border-t", border, grow && "flex-1", c), style: dStyle({ gap, p, wd: rest.wd, style: rest.style }), "aria-hidden": "true" });
+};
+export const Progress = ({ value, color = 'blue', dot, grow, gap, p, ...rest }) => {
+    const c = rcn(rest);
+    const v = Math.max(0, Math.min(1, value));
+    const fill = color === 'red' ? 'bg-red-500'
+        : color === 'orange' ? 'bg-orange-500'
+            : color === 'purple' ? 'bg-purple-500'
+                : color === 'yellow' ? 'bg-yellow-500'
+                    : color === 'green' ? 'bg-green-500'
+                        : 'bg-blue-500';
+    if (dot)
+        return _jsx("div", { className: CN("rounded-full border border-zinc-700 bg-zinc-800 overflow-hidden", grow && "flex-1", c), style: dStyle({ gap, p, wd: rest.wd, style: { aspectRatio: '1 / 1', ...rest.style } }), children: _jsx("div", { className: CN("h-full rounded-full", fill), style: { opacity: v ? 1 : 0.2 } }) });
+    return _jsx("div", { className: CN("h-2 overflow-hidden rounded-full bg-zinc-800 border border-zinc-700", grow && "flex-1", c), style: dStyle({ gap, p, wd: rest.wd, style: rest.style }), children: _jsx("div", { className: CN("h-full rounded-full", fill), style: { width: `${v * 100}%` } }) });
+};
+export const Dropzone = ({ children, onFiles, multiple, accept, click, onClick, onDragOver, onDrop, ...rest }) => {
+    const input = useRef(null);
+    const c = rcn(rest);
+    const push = (list) => {
+        const files = list ? Array.from(list) : [];
+        if (files.length)
+            onFiles(files);
+    };
+    return _jsxs("div", { className: CN("contents", c), onClick: e => {
+            click?.();
+            input.current?.click();
+            onClick?.(e);
+        }, onDragOver: e => {
+            e.preventDefault();
+            onDragOver?.(e);
+        }, onDrop: e => {
+            e.preventDefault();
+            push(e.dataTransfer.files);
+            onDrop?.(e);
+        }, children: [_jsx("input", { ref: input, hidden: true, type: "file", multiple: multiple, accept: accept, onChange: e => push(e.target.files) }), children] });
+};
+export const Code = (props) => {
+    const { children, highlight } = props;
+    const c = rcn(props);
+    const html = useMemo(() => highlight ? hljs.highlight(children, { language: highlight }).value : '', [children, highlight]);
+    if (highlight)
+        return _jsx("pre", { className: CN("rounded bg-zinc-900 border border-zinc-700 p-3 text-sm overflow-x-auto", c), children: _jsx("code", { className: `hljs language-${highlight}`, dangerouslySetInnerHTML: { __html: html } }) });
+    return _jsx("code", { className: CN("bg-zinc-800 rounded px-1.5 py-0.5 text-sm font-mono", c), children: children });
+};
+const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }));
+export const Md = ({ children, className }) => {
+    const html = useMemo(() => marked.parse(children), [children]);
+    return _jsx("div", { className: CN("ui-markdown", className), dangerouslySetInnerHTML: { __html: html } });
+};

package/package.json

@@ -1,17 +1,23 @@
 {
   "name": "b44ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "files": [
-    "index.tsx",
+    "dist",
     "styles.css",
     "tailwind.css"
   ],
   "scripts": {
-    "dev": "npm run dev --prefix example"
+    "build": "tsc -p tsconfig.json",
+    "dev": "npm run dev --prefix example",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build"
   },
   "exports": {
-    ".": "./index.tsx",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./tailwind.css": "./tailwind.css",
     "./styles.css": "./styles.css"
   },

package/styles.css

@@ -18,4 +18,4 @@ img { max-width: 100%; border-radius: 6px; }
 .ui-markdown table { border-collapse: collapse; margin: 0.4em 0; }
 .ui-markdown th, .ui-markdown td { border: 1px solid #333; padding: 4px 10px; }
 .ui-grid { grid-template-columns: repeat(var(--cols), 1fr); }
-@media (max-width: 640px) { .ui-grid { grid-template-columns: 1fr; } }
+@media (max-width: 640px) { .ui-grid { grid-template-columns: 1fr; } }

package/tailwind.css

@@ -1,3 +1,25 @@
 @import "tailwindcss";
 @source "./index.tsx";
-@import "./styles.css";
+@import "highlight.js/styles/github-dark.css";
+
+h1, .ui-markdown h2, .ui-markdown h3 { font-weight: 700; margin: 0; }
+h1 { font-size: 1.5em; }
+h2 { font-size: 1.25em; }
+h3 { font-size: 1.1em; }
+p { margin: 0.4em 0; }
+a { color: #93c5fd; text-decoration: underline; }
+pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.4em 0; }
+code { font-family: ui-monospace, monospace; font-size: 0.9em; }
+blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.25em 0; }
+img { max-width: 100%; border-radius: 6px; }
+
+.ui-grid { grid-template-columns: repeat(var(--cols), 1fr); }
+@media (max-width: 640px) { .ui-grid { grid-template-columns: 1fr; } }
+
+.ui-markdown { line-height: 1.5; }
+.ui-markdown p:first-child { margin-top: 0; }
+.ui-markdown p:last-child { margin-bottom: 0; }
+.ui-markdown :not(pre) > code { background: #1a1a2e; padding: 2px 5px; border-radius: 3px; }
+.ui-markdown ul, .ui-markdown ol { padding-left: 1.5em; margin: 0.25em 0; }
+.ui-markdown table { border-collapse: collapse; margin: 0.4em 0; }
+.ui-markdown th, .ui-markdown td { border: 1px solid #333; padding: 4px 10px; }

package/index.tsx

@@ -1,309 +0,0 @@
-import { type ReactNode, Children, useMemo, useRef, useState } from "react"
-import { Marked } from "marked"
-import { markedHighlight } from "marked-highlight"
-import hljs from "highlight.js"
-import type { ClassValue } from "clsx"
-import clsx from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export type Color = 'red' | 'blue' | 'orange' | 'purple' | 'yellow' | 'green'
-const tintMap: Record<Color, string> = {
-  red: 'bg-red-500/20 border-red-500',
-  blue: 'bg-blue-500/20 border-blue-500',
-  orange: 'bg-orange-500/20 border-orange-500',
-  purple: 'bg-purple-500/20 border-purple-500',
-  yellow: 'bg-yellow-500/20 border-yellow-500',
-  green: 'bg-green-500/20 border-green-500',
-}
-const colorMap: Record<Color, string> = {
-  red: 'bg-red-600 hover:bg-red-500',
-  blue: 'bg-blue-600 hover:bg-blue-500',
-  orange: 'bg-orange-600 hover:bg-orange-500',
-  purple: 'bg-purple-600 hover:bg-purple-500',
-  yellow: 'bg-yellow-600 hover:bg-yellow-500',
-  green: 'bg-green-600 hover:bg-green-500',
-}
-const tintCn = (c: Color) => tintMap[c]
-const colorCn = (c: Color) => colorMap[c]
-
-export const CN = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
-
-const warnCn = (cn: any) => typeof cn === 'string' && cn.length > 24 && console.warn(`long cn detected (${cn.length} chars). please avoid using cn. you SHOULD use b44ui builtins instead. you SHOULD NOT use cn to add unnecessary visual enhancements. you MUST NOT have long cns. if you choose to ignore these requirements (ie. because you cannot achieve this otherwise) you MUST instead use <... cnIgnoreWrongUsage="styles..">\n  cn="${cn}"`)
-const rcn = ({ cn, cnIgnoreWrongUsage }: DProps) => { warnCn(cn); return cn ?? cnIgnoreWrongUsage }
-
-const sc = (n?: number) => n !== undefined ? n * 4 : undefined // tailwind scale -> px
-
-export type DProps = {
-  children?: ReactNode
-  cn?: any
-  cnIgnoreWrongUsage?: any
-  style?: React.CSSProperties
-  grow?: boolean
-  gap?: number
-  p?: number
-  wd?: number
-  ht?: number
-}
-
-const dStyle = ({ gap, p, wd, ht, style }: DProps): React.CSSProperties | undefined => {
-  const g = sc(gap), pd = sc(p)
-  if (!g && !pd && wd === undefined && ht === undefined && !style) return undefined
-  return { ...(g !== undefined && { gap: g }), ...(pd !== undefined && { padding: pd }), ...(wd !== undefined && { width: `${wd * 100}%` }), ...(ht !== undefined && { height: `${ht * 100}%` }), ...style }
-}
-
-export const D = (props: DProps) =>
-  <div className={CN(props.cn ?? props.cnIgnoreWrongUsage, props.grow && "flex-1")} style={dStyle(props)}>{props.children}</div>
-
-export const App = (props: DProps & { center?: boolean, width?: number }) => {
-  const { children, center = true, width, gap, p } = props
-  const c = rcn(props)
-  const inner = Children.map(children, c => typeof c == 'string' ? <Md>{c.trim()}</Md> : c)
-  return <D cn={CN("min-h-screen w-full bg-[#111] text-[#eee] font-[Inter]", center && "flex justify-center items-center", c)} gap={gap} p={p}>
-    {center ? <div className="max-w-full px-5 py-10 space-y-5 *:mx-auto" style={{ width }}>{inner}</div> : inner}
-  </D>
-}
-
-export const Centered = (props: DProps & { width?: number }) => {
-  const { children, grow, gap, p, wd, ht, width = 700 } = props
-  return <D cn={CN("mx-auto max-w-full px-6", rcn(props))} grow={grow} gap={gap} p={p} wd={wd} ht={ht} style={{ width }}>{children}</D>
-}
-
-export const TabList = (props: DProps) => {
-  const { children, grow, gap, p, wd, ht } = props
-  return <D cn={CN("flex items-end gap-4", rcn(props))} grow={grow} gap={gap} p={p} wd={wd} ht={ht}>{children}</D>
-}
-
-export const Tab = ({ title, active, click, grow, gap, p, ...rest }: DProps & { title: ReactNode, active?: boolean, click?: () => void } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  const c = rcn(rest as DProps)
-  return <button
-    className={CN("cursor-pointer border-b-2 pb-1.5 text-sm font-medium", active ? "border-zinc-100 text-zinc-100" : "border-transparent text-zinc-400 hover:text-zinc-200", grow && "flex-1", c)}
-    style={dStyle({ gap, p, wd: rest.wd, style: rest.style })}
-    onClick={click}
-    role="tab"
-    aria-selected={active}
-    {...rest}
-  >{title}</button>
-}
-
-export const Block = (props: DProps & { label?: ReactNode, row?: boolean, dashed?: boolean }) => {
-  const { label, children, row, dashed, grow, gap, p, wd, ht } = props
-  return <D cn={CN("rounded flex flex-col items-center", dashed && "border border-dashed border-zinc-700", rcn(props))} grow={grow} gap={gap ?? 4} p={p ?? 4} wd={wd} ht={ht}>
-    {label && <span className="opacity-75">{label}</span>}
-    <div className={CN(row ? "flex-row" : "flex-col", "flex items-center")} style={{ gap: sc(gap ?? 4) }}>{children}</div>
-  </D>
-}
-
-export const BlockSm = (props: DProps & { dashed?: boolean }) => {
-  const { children, dashed, grow, gap, p, wd, ht } = props
-  return <D cn={CN("rounded text-sm", dashed && "border border-dashed border-zinc-700", rcn(props))} grow={grow} gap={gap} p={p ?? 2} wd={wd} ht={ht}
-    style={{ paddingLeft: sc(3), paddingRight: sc(3) }}>{children}</D>
-}
-
-export const Chip = (props: DProps & { click?: () => void }) => {
-  const { children, click, grow, gap, p, wd, ht, style } = props
-  return <span className={CN("bg-zinc-800 rounded px-2 py-0.5 text-xs", click && "cursor-pointer hover:bg-zinc-700", rcn(props))}
-    style={dStyle({ gap, p, wd, ht, style })}
-    onClick={click}>{children}</span>
-}
-
-export const Card = (props: DProps) => {
-  const { children, grow, gap, p, wd, ht } = props
-  return <D cn={CN("rounded border border-zinc-700 bg-zinc-900", rcn(props))} grow={grow} gap={gap ?? 4} p={p ?? 4} wd={wd} ht={ht}
-    style={{ display: 'flex', flexDirection: 'column' }}>{children}</D>
-}
-
-export const Col = (props: DProps & { align?: 'start' | 'center' | 'end' }) => {
-  const { children, grow, gap, p, wd, ht, align } = props
-  return <D cn={CN("flex flex-col", align === 'start' && 'items-start', align === 'center' && 'items-center', align === 'end' && 'items-end', rcn(props))} grow={grow} gap={gap ?? 4} p={p} wd={wd} ht={ht}>{children}</D>
-}
-
-export const Popover = (props: DProps & { text: ReactNode, color?: Color }) => {
-  const { children, text, color } = props
-  const c = rcn(props)
-  const [open, setOpen] = useState(false)
-  return <span className="relative inline-block" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
-    <span className={CN("cursor-pointer", color && tintCn(color), color && "border-b-2", c)}>{children}</span>
-    {open && <div className="absolute left-0 top-full z-10 mt-1">
-      <Card cn="w-64 shadow-lg text-sm" p={props.p ?? 3} gap={props.gap}>{text}</Card>
-    </div>}
-  </span>
-}
-
-export const Muted = (props: DProps) => {
-  const { children, grow } = props
-  return <span className={CN("text-sm text-zinc-400", grow && "flex-1", rcn(props))}>{children}</span>
-}
-
-export const A = ({
-  children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, style, click, href, onClick, onKeyDown, role, tabIndex, ...rest
-}: DProps & { click?: () => void } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-  const c = rcn({ cn, cnIgnoreWrongUsage })
-  const fire = (e: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>) => {
-    click?.()
-    onClick?.(e as React.MouseEvent<HTMLAnchorElement>)
-  }
-  const buttonLike = !href
-
-  return <a
-    {...rest}
-    href={href}
-    role={buttonLike ? role ?? 'button' : role}
-    tabIndex={buttonLike ? tabIndex ?? 0 : tabIndex}
-    className={CN("inline-flex items-center gap-1 text-zinc-300 underline underline-offset-4 cursor-pointer hover:text-zinc-100", grow && "flex-1", c)}
-    style={dStyle({ gap, p, wd, style })}
-    onClick={fire}
-    onKeyDown={e => {
-      if (buttonLike && (e.key === 'Enter' || e.key === ' ')) {
-        e.preventDefault()
-        fire(e)
-      }
-      onKeyDown?.(e)
-    }}
-  >{children}</a>
-}
-
-export const Btn = ({ children, grow, gap, p, click, color, ghost, sm, ...rest }: DProps & { click?: () => void, color?: Color, ghost?: boolean, sm?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  const c = rcn(rest as DProps)
-  return <button className={CN("rounded cursor-pointer", sm ? "px-3 py-1 text-xs" : "px-4 py-2 text-sm",
-    ghost ? "bg-transparent text-zinc-400 hover:bg-zinc-800" : color ? colorCn(color) : "bg-zinc-800 hover:bg-zinc-700", grow && "flex-1", c)}
-    style={dStyle({ gap, p, wd: rest.wd, style: rest.style })} onClick={click} {...rest}>{children}</button>
-}
-
-export const Tint = (props: DProps & { color: Color }) => {
-  const { children, color, grow, gap, p, wd, ht } = props
-  return <D cn={CN("rounded text-sm", tintCn(color), rcn(props))} grow={grow} gap={gap} p={p ?? 3} wd={wd} ht={ht}>{children}</D>
-}
-
-export const Row = (props: DProps & { ratio?: number, align?: 'mid' | 'start' | 'end' }) => {
-  const { children, ratio, align, grow, gap, p, wd, ht, style } = props
-  return <div className={CN("flex items-center justify-center", align === 'mid' && "justify-between", align == 'end' && "justify-end", align == 'start' && "justify-start", grow && "flex-1", rcn(props))}
-    style={{ ...dStyle({ gap: gap ?? 4, p, wd, ht, style }), ...(ratio ? { width: `${ratio * 100}%` } : {}) }}>{children}</div>
-}
-
-export const Toolbar = (props: DProps) => {
-  const { children, gap, p, wd, ht } = props
-  return <Row cn={CN("border-b border-zinc-700", rcn(props))} gap={gap} p={p ?? 2} wd={wd} ht={ht} align="mid">{children}</Row>
-}
-
-export const Modal = (props: DProps & { open: boolean }) => {
-  const { children, open, gap, p, wd, ht } = props
-  return open ? <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
-    <Card cn={CN("max-h-[80vh] overflow-y-auto w-lg", rcn(props))} gap={gap} p={p} wd={wd} ht={ht}>{children}</Card>
-  </div> : null
-}
-
-export const Input = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.InputHTMLAttributes<HTMLInputElement>) => {
-  const c = rcn({ cn, cnIgnoreWrongUsage })
-  return <input className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none", grow && "flex-1", c)} style={dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style })} {...rest} />
-}
-
-export const Textarea = ({ cn, cnIgnoreWrongUsage, ref, grow, ...rest }: DProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & { ref?: React.RefObject<HTMLTextAreaElement | null> }) => {
-  const c = rcn({ cn, cnIgnoreWrongUsage })
-  return <textarea ref={ref} className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none w-full", grow && "flex-1", c)} style={dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style })} {...rest} />
-}
-
-export const Select = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.SelectHTMLAttributes<HTMLSelectElement>) => {
-  const c = rcn({ cn, cnIgnoreWrongUsage })
-  return <select className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer", grow && "flex-1", c)} style={dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style })} {...rest} />
-}
-
-export const Grid = (props: DProps & { cols?: number }) => {
-  const { children, cols, grow, gap, p, wd, ht } = props
-  return <D cn={CN("grid ui-grid", rcn(props))} grow={grow} p={p} wd={wd} ht={ht} style={{ gap: sc(gap ?? 4), '--cols': cols ?? Children.count(children) } as React.CSSProperties}>{children}</D>
-}
-
-export const Hr = ({ vertical, color = 'gray', grow, gap, p, ...rest }: DProps & { vertical?: boolean, color?: Color | 'gray' }) => {
-  const c = rcn(rest as DProps)
-  const border = color === 'gray' ? "border-zinc-700" : ({
-    red: "border-red-500",
-    blue: "border-blue-500",
-    orange: "border-orange-500",
-    purple: "border-purple-500",
-    yellow: "border-yellow-500",
-    green: "border-green-500",
-  } satisfies Record<Color, string>)[color]
-
-  return <div
-    className={CN(vertical ? "self-stretch border-l" : "w-full border-t", border, grow && "flex-1", c)}
-    style={dStyle({ gap, p, wd: rest.wd, style: rest.style })}
-    aria-hidden="true"
-  />
-}
-
-export const Progress = ({ value, color = 'blue', dot, grow, gap, p, ...rest }: DProps & { value: number, color?: Color, dot?: boolean }) => {
-  const c = rcn(rest as DProps)
-  const v = Math.max(0, Math.min(1, value))
-  const fill = color === 'red' ? 'bg-red-500'
-    : color === 'orange' ? 'bg-orange-500'
-    : color === 'purple' ? 'bg-purple-500'
-    : color === 'yellow' ? 'bg-yellow-500'
-    : color === 'green' ? 'bg-green-500'
-    : 'bg-blue-500'
-
-  if (dot) return <div
-    className={CN("rounded-full border border-zinc-700 bg-zinc-800 overflow-hidden", grow && "flex-1", c)}
-    style={dStyle({ gap, p, wd: rest.wd, style: { aspectRatio: '1 / 1', ...rest.style } })}
-  >
-    <div className={CN("h-full rounded-full", fill)} style={{ opacity: v ? 1 : 0.2 }} />
-  </div>
-
-  return <div
-    className={CN("h-2 overflow-hidden rounded-full bg-zinc-800 border border-zinc-700", grow && "flex-1", c)}
-    style={dStyle({ gap, p, wd: rest.wd, style: rest.style })}
-  >
-    <div className={CN("h-full rounded-full", fill)} style={{ width: `${v * 100}%` }} />
-  </div>
-}
-
-export const Dropzone = ({ children, onFiles, multiple, accept, click, ...rest }: DProps & { onFiles: (files: File[]) => void, multiple?: boolean, accept?: string, click?: () => void }) => {
-  const input = useRef<HTMLInputElement>(null)
-  const c = rcn(rest)
-  const push = (list: FileList | null) => {
-    const files = list ? Array.from(list) : []
-    if (files.length) onFiles(files)
-  }
-
-  return <div
-    className={CN("contents", c)}
-    onClick={e => {
-      click?.()
-      input.current?.click()
-      rest.onClick?.(e as any)
-    }}
-    onDragOver={e => {
-      e.preventDefault()
-      rest.onDragOver?.(e)
-    }}
-    onDrop={e => {
-      e.preventDefault()
-      push(e.dataTransfer.files)
-      rest.onDrop?.(e)
-    }}
-  >
-    <input
-      ref={input}
-      hidden
-      type="file"
-      multiple={multiple}
-      accept={accept}
-      onChange={e => push(e.target.files)}
-    />
-    {children}
-  </div>
-}
-
-export const Code = (props: DProps & { highlight?: string }) => {
-  const { children, highlight } = props
-  const c = rcn(props)
-  const html = useMemo(() => highlight ? hljs.highlight(children as string, { language: highlight }).value : '', [children, highlight])
-  if (highlight) return <pre className={CN("rounded bg-zinc-900 border border-zinc-700 p-3 text-sm overflow-x-auto", c)}>
-    <code className={`hljs language-${highlight}`} dangerouslySetInnerHTML={{ __html: html }} />
-  </pre>
-  return <code className={CN("bg-zinc-800 rounded px-1.5 py-0.5 text-sm font-mono", c)}>{children}</code>
-}
-
-const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }))
-export const Md = ({ children, className }: { children: string, className?: string }) => {
-  const html = useMemo(() => marked.parse(children) as string, [children])
-  return <div className={CN("ui-markdown", className)} dangerouslySetInnerHTML={{ __html: html }} />
-}