@atmos.build/ui 0.1.0

package/dist/components/markdown-editor/markdown-editor.d.ts

@@ -0,0 +1,16 @@
+import { serializeMarkdown } from './serialize.js';
+export interface MarkdownEditorProps {
+    value: string;
+    onChange: (markdown: string) => void;
+    placeholder?: string;
+    className?: string;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    testId?: string;
+    vimMode?: {
+        enabled: boolean;
+    };
+}
+declare function markdownToHtml(md: string): string;
+export declare function MarkdownEditor({ value, onChange, placeholder, className, readOnly, autoFocus, testId, vimMode, }: MarkdownEditorProps): import("react").JSX.Element;
+export { serializeMarkdown, markdownToHtml };

package/dist/components/markdown-editor/markdown-editor.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import { marked } from 'marked';
+import { useEffect, useRef } from 'react';
+import { VimExtension } from './vim.js';
+import { cn } from '../../lib/cn.js';
+import { serializeMarkdown } from './serialize.js';
+const STARTER_KIT_OPTIONS = {
+    heading: { levels: [1, 2, 3] },
+};
+function markdownToHtml(md) {
+    if (!md)
+        return '';
+    return marked.parse(md, { gfm: true, breaks: false, async: false });
+}
+export function MarkdownEditor({ value, onChange, placeholder, className, readOnly, autoFocus, testId, vimMode = { enabled: false }, }) {
+    const lastEmittedRef = useRef('');
+    const editor = useEditor({
+        immediatelyRender: false,
+        extensions: [
+            StarterKit.configure(STARTER_KIT_OPTIONS),
+            VimExtension.configure({ enabled: vimMode.enabled }),
+            Placeholder.configure({ placeholder: placeholder ?? '' }),
+        ],
+        content: markdownToHtml(value),
+        editable: !readOnly,
+        autofocus: autoFocus ?? false,
+        onUpdate({ editor }) {
+            const json = editor.getJSON();
+            const md = serializeMarkdown(json);
+            lastEmittedRef.current = md;
+            onChange(md);
+        },
+    }, [vimMode.enabled]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        if (value === lastEmittedRef.current)
+            return;
+        editor.commands.setContent(markdownToHtml(value), false);
+        lastEmittedRef.current = value;
+    }, [editor, value]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.setEditable(!readOnly);
+    }, [editor, readOnly]);
+    return (_jsx("div", { className: "relative", children: _jsx(EditorContent, { editor: editor, "data-testid": testId, className: cn('prose prose-sm dark:prose-invert max-w-none', '[&_.ProseMirror]:min-h-[72px] [&_.ProseMirror]:px-2 [&_.ProseMirror]:py-1.5 [&_.ProseMirror]:outline-none', '[&_.ProseMirror_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]', '[&_.ProseMirror_p.is-editor-empty:first-child]:before:text-muted-foreground/60', '[&_.ProseMirror_p.is-editor-empty:first-child]:before:float-left', '[&_.ProseMirror_p.is-editor-empty:first-child]:before:pointer-events-none', className) }) }));
+}
+export { serializeMarkdown, markdownToHtml };

package/dist/components/markdown-editor/serialize.d.ts

@@ -0,0 +1,12 @@
+export interface TiptapNode {
+    type: string;
+    attrs?: Record<string, unknown>;
+    content?: TiptapNode[];
+    marks?: TiptapMark[];
+    text?: string;
+}
+export interface TiptapMark {
+    type: string;
+    attrs?: Record<string, unknown>;
+}
+export declare function serializeMarkdown(doc: TiptapNode | null | undefined): string;

package/dist/components/markdown-editor/serialize.js

@@ -0,0 +1,122 @@
+export function serializeMarkdown(doc) {
+    if (!doc || !doc.content)
+        return '';
+    return doc.content.map((node) => block(node)).join('\n\n').replace(/\n{3,}/g, '\n\n').trim();
+}
+function block(node) {
+    switch (node.type) {
+        case 'paragraph':
+            return inlineRun(node.content ?? []);
+        case 'heading': {
+            const level = clampHeadingLevel(node.attrs?.level);
+            return '#'.repeat(level) + ' ' + inlineRun(node.content ?? []);
+        }
+        case 'blockquote':
+            return (node.content ?? [])
+                .map((c) => block(c))
+                .join('\n\n')
+                .split('\n')
+                .map((line) => (line ? '> ' + line : '>'))
+                .join('\n');
+        case 'bulletList':
+            return (node.content ?? [])
+                .map((li) => listItem(li, '- '))
+                .join('\n');
+        case 'orderedList':
+            return (node.content ?? [])
+                .map((li, i) => listItem(li, `${i + 1}. `))
+                .join('\n');
+        case 'codeBlock': {
+            const lang = node.attrs?.language ?? '';
+            const body = (node.content ?? [])
+                .map((c) => c.text ?? '')
+                .join('');
+            return '```' + lang + '\n' + body + '\n```';
+        }
+        case 'horizontalRule':
+            return '---';
+        case 'hardBreak':
+            return '  \n';
+        default:
+            return inlineRun(node.content ?? []);
+    }
+}
+function listItem(li, marker) {
+    const indent = ' '.repeat(marker.length);
+    const inner = (li.content ?? [])
+        .map((c) => block(c))
+        .join('\n\n');
+    const lines = inner.split('\n');
+    return lines
+        .map((line, i) => (i === 0 ? marker + line : indent + line))
+        .join('\n');
+}
+function inlineRun(nodes) {
+    return nodes.map((n) => inline(n)).join('');
+}
+function inline(node) {
+    if (node.type === 'hardBreak')
+        return '  \n';
+    if (node.type !== 'text') {
+        return inlineRun(node.content ?? []);
+    }
+    const raw = escapeMarkdown(node.text ?? '');
+    return applyMarks(raw, node.marks ?? []);
+}
+function applyMarks(text, marks) {
+    let out = text;
+    const codeMark = marks.find((m) => m.type === 'code');
+    if (codeMark) {
+        const ticks = longestRun(out, '`') + 1;
+        return '`'.repeat(ticks) + out + '`'.repeat(ticks);
+    }
+    for (const m of marks) {
+        switch (m.type) {
+            case 'bold':
+                out = `**${out}**`;
+                break;
+            case 'italic':
+                out = `*${out}*`;
+                break;
+            case 'strike':
+                out = `~~${out}~~`;
+                break;
+            case 'link': {
+                const rawHref = m.attrs?.href;
+                const href = typeof rawHref === 'string' ? rawHref : '';
+                if (href)
+                    out = `[${out}](${href})`;
+                break;
+            }
+        }
+    }
+    return out;
+}
+function escapeMarkdown(s) {
+    return s.replace(/([\\`*_[\]<>])/g, '\\$1');
+}
+function longestRun(s, ch) {
+    let max = 0;
+    let cur = 0;
+    for (const c of s) {
+        if (c === ch) {
+            cur++;
+            if (cur > max)
+                max = cur;
+        }
+        else {
+            cur = 0;
+        }
+    }
+    return max;
+}
+function clampHeadingLevel(v) {
+    const n = typeof v === 'number'
+        ? v
+        : typeof v === 'string'
+            ? Number.parseInt(v, 10)
+            : 1;
+    if (Number.isNaN(n))
+        return 1;
+    return Math.max(1, Math.min(6, n));
+}

package/dist/components/markdown-editor/vim.d.ts

@@ -0,0 +1,8 @@
+import { Extension } from '@tiptap/core';
+export type VimMode = 'insert' | 'normal' | 'visual';
+export interface VimExtensionOptions {
+    enabled: boolean;
+    initialMode: VimMode;
+    onModeChange?: (mode: VimMode) => void;
+}
+export declare const VimExtension: Extension<VimExtensionOptions, any>;

package/dist/components/markdown-editor/vim.js

@@ -0,0 +1,394 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state';
+export const VimExtension = Extension.create({
+    name: 'atmosVim',
+    addOptions() {
+        return {
+            enabled: true,
+            initialMode: 'insert',
+            onModeChange: undefined,
+        };
+    },
+    addProseMirrorPlugins() {
+        if (!this.options.enabled)
+            return [];
+        let mode = this.options.initialMode;
+        const onModeChange = this.options.onModeChange;
+        let visualAnchor = null;
+        let pending = null;
+        let yank = null;
+        const setMode = (next, view) => {
+            mode = next;
+            pending = null;
+            if (next !== 'visual')
+                visualAnchor = null;
+            view.dom.dataset.vimMode = next;
+            onModeChange?.(next);
+        };
+        return [
+            new Plugin({
+                key: new PluginKey('atmosVim'),
+                view(view) {
+                    view.dom.dataset.vimMode = mode;
+                    onModeChange?.(mode);
+                    return {
+                        destroy() {
+                            delete view.dom.dataset.vimMode;
+                        },
+                    };
+                },
+                props: {
+                    handleKeyDown(view, event) {
+                        if (event.metaKey || event.ctrlKey || event.altKey)
+                            return false;
+                        if (mode === 'insert') {
+                            if (event.key !== 'Escape')
+                                return false;
+                            event.preventDefault();
+                            setMode('normal', view);
+                            return true;
+                        }
+                        if (pending === 'g') {
+                            event.preventDefault();
+                            pending = null;
+                            if (event.key === 'g')
+                                moveDocBoundary(view, 'start');
+                            return true;
+                        }
+                        if (pending === 'd') {
+                            event.preventDefault();
+                            pending = null;
+                            if (event.key === 'd') {
+                                yank = { kind: 'block', text: currentBlockText(view) };
+                                deleteCurrentBlock(view);
+                            }
+                            return true;
+                        }
+                        if (pending === 'y') {
+                            event.preventDefault();
+                            pending = null;
+                            if (event.key === 'y')
+                                yank = { kind: 'block', text: currentBlockText(view) };
+                            return true;
+                        }
+                        if (event.key === 'Escape') {
+                            event.preventDefault();
+                            if (mode === 'visual') {
+                                setMode('normal', view);
+                                collapseSelection(view);
+                            }
+                            else {
+                                view.dom.blur();
+                            }
+                            return true;
+                        }
+                        if (mode === 'normal' && (event.key === 'i' || event.key === 'I')) {
+                            event.preventDefault();
+                            setMode('insert', view);
+                            return true;
+                        }
+                        if (mode === 'normal' && event.key === 'a') {
+                            event.preventDefault();
+                            moveChar(view, 1);
+                            setMode('insert', view);
+                            return true;
+                        }
+                        if (mode === 'normal' && (event.key === 'o' || event.key === 'O')) {
+                            event.preventDefault();
+                            insertParagraph(view, event.key === 'O' ? 'before' : 'after');
+                            setMode('insert', view);
+                            return true;
+                        }
+                        if (mode === 'normal' && event.key === 'v') {
+                            event.preventDefault();
+                            visualAnchor = view.state.selection.from;
+                            setMode('visual', view);
+                            return true;
+                        }
+                        if (mode === 'normal' && event.key === 'g') {
+                            event.preventDefault();
+                            pending = 'g';
+                            return true;
+                        }
+                        if (mode === 'normal' && event.key === 'G') {
+                            event.preventDefault();
+                            moveDocBoundary(view, 'end');
+                            return true;
+                        }
+                        if (mode === 'normal' && event.key === 'd') {
+                            event.preventDefault();
+                            pending = 'd';
+                            return true;
+                        }
+                        if (mode === 'normal' && event.key === 'y') {
+                            event.preventDefault();
+                            pending = 'y';
+                            return true;
+                        }
+                        if (mode === 'normal' && event.key === 'x') {
+                            event.preventDefault();
+                            deleteChar(view);
+                            return true;
+                        }
+                        if (mode === 'normal' && event.key === 'p') {
+                            event.preventDefault();
+                            pasteYank(view, yank);
+                            return true;
+                        }
+                        if (mode === 'visual' && event.key === 'y') {
+                            event.preventDefault();
+                            yank = { kind: 'text', text: selectedText(view) };
+                            setMode('normal', view);
+                            collapseSelection(view);
+                            return true;
+                        }
+                        if (mode === 'visual' && event.key === 'd') {
+                            event.preventDefault();
+                            yank = { kind: 'text', text: selectedText(view) };
+                            deleteSelection(view);
+                            setMode('normal', view);
+                            return true;
+                        }
+                        if (event.key === '0') {
+                            event.preventDefault();
+                            if (mode === 'visual')
+                                extendToLineBoundary(view, visualAnchor, 'start');
+                            else
+                                moveLineBoundary(view, 'start');
+                            return true;
+                        }
+                        if (event.key === '$') {
+                            event.preventDefault();
+                            if (mode === 'visual')
+                                extendToLineBoundary(view, visualAnchor, 'end');
+                            else
+                                moveLineBoundary(view, 'end');
+                            return true;
+                        }
+                        if (event.key === 'w') {
+                            event.preventDefault();
+                            if (mode === 'visual')
+                                extendToWord(view, visualAnchor, 'next');
+                            else
+                                moveWord(view, 'next');
+                            return true;
+                        }
+                        if (event.key === 'b') {
+                            event.preventDefault();
+                            if (mode === 'visual')
+                                extendToWord(view, visualAnchor, 'previous');
+                            else
+                                moveWord(view, 'previous');
+                            return true;
+                        }
+                        if (event.key === 'e') {
+                            event.preventDefault();
+                            if (mode === 'visual')
+                                extendToWord(view, visualAnchor, 'end');
+                            else
+                                moveWord(view, 'end');
+                            return true;
+                        }
+                        if (event.key === 'h' || event.key === 'ArrowLeft') {
+                            event.preventDefault();
+                            if (mode === 'visual')
+                                extendSelection(view, visualAnchor, -1);
+                            else
+                                moveChar(view, -1);
+                            return true;
+                        }
+                        if (event.key === 'l' || event.key === 'ArrowRight') {
+                            event.preventDefault();
+                            if (mode === 'visual')
+                                extendSelection(view, visualAnchor, 1);
+                            else
+                                moveChar(view, 1);
+                            return true;
+                        }
+                        if (event.key === 'j' || event.key === 'ArrowDown') {
+                            event.preventDefault();
+                            if (mode === 'visual')
+                                extendBlock(view, visualAnchor, 1);
+                            else
+                                moveBlock(view, 1);
+                            return true;
+                        }
+                        if (event.key === 'k' || event.key === 'ArrowUp') {
+                            event.preventDefault();
+                            if (mode === 'visual')
+                                extendBlock(view, visualAnchor, -1);
+                            else
+                                moveBlock(view, -1);
+                            return true;
+                        }
+                        if (event.key.length === 1) {
+                            event.preventDefault();
+                            return true;
+                        }
+                        return false;
+                    },
+                },
+            }),
+        ];
+    },
+});
+function textPos(view, pos) {
+    return textPosInDoc(view.state.doc, pos);
+}
+function textPosInDoc(doc, pos) {
+    return Math.max(1, Math.min(pos, doc.content.size));
+}
+function moveChar(view, delta) {
+    const next = textPos(view, view.state.selection.to + delta);
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, next)).scrollIntoView());
+}
+function extendSelection(view, anchor, delta) {
+    const from = anchor ?? view.state.selection.from;
+    const to = textPos(view, view.state.selection.to + delta);
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, from, to)).scrollIntoView());
+}
+function moveBlock(view, delta) {
+    const { state } = view;
+    const current = state.selection.$from;
+    const index = current.index(0) + delta;
+    if (index < 0 || index >= state.doc.childCount)
+        return;
+    let pos = 1;
+    for (let i = 0; i < index; i += 1)
+        pos += state.doc.child(i).nodeSize;
+    view.dispatch(state.tr.setSelection(TextSelection.create(state.doc, textPos(view, pos))).scrollIntoView());
+}
+function extendBlock(view, anchor, delta) {
+    moveBlock(view, delta);
+    const from = anchor ?? view.state.selection.from;
+    const to = view.state.selection.to;
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, from, to)).scrollIntoView());
+}
+function insertParagraph(view, side) {
+    const { state } = view;
+    const $from = state.selection.$from;
+    const at = side === 'before' ? $from.before(1) : $from.after(1);
+    const paragraph = state.schema.nodes.paragraph?.create();
+    if (!paragraph)
+        return;
+    const tr = state.tr.insert(at, paragraph);
+    const pos = side === 'before' ? at + 1 : at + paragraph.nodeSize - 1;
+    view.dispatch(tr.setSelection(TextSelection.create(tr.doc, textPosInDoc(tr.doc, pos))).scrollIntoView());
+}
+function collapseSelection(view) {
+    const pos = view.state.selection.to;
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, pos)));
+}
+function moveDocBoundary(view, side) {
+    const pos = side === 'start' ? 1 : view.state.doc.content.size - 1;
+    view.dispatch(view.state.tr
+        .setSelection(TextSelection.create(view.state.doc, textPos(view, pos)))
+        .scrollIntoView());
+}
+function lineBounds(view) {
+    const $from = view.state.selection.$from;
+    return {
+        start: $from.start(),
+        end: $from.end(),
+        offset: $from.parentOffset,
+        text: $from.parent.textContent,
+    };
+}
+function moveLineBoundary(view, side) {
+    const bounds = lineBounds(view);
+    const pos = side === 'start' ? bounds.start : bounds.end;
+    view.dispatch(view.state.tr
+        .setSelection(TextSelection.create(view.state.doc, textPos(view, pos)))
+        .scrollIntoView());
+}
+function extendToLineBoundary(view, anchor, side) {
+    const bounds = lineBounds(view);
+    const to = side === 'start' ? bounds.start : bounds.end;
+    view.dispatch(view.state.tr
+        .setSelection(TextSelection.create(view.state.doc, anchor ?? view.state.selection.from, textPos(view, to)))
+        .scrollIntoView());
+}
+function moveWord(view, direction) {
+    const pos = wordPos(view, direction);
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, pos)).scrollIntoView());
+}
+function extendToWord(view, anchor, direction) {
+    const to = wordPos(view, direction);
+    view.dispatch(view.state.tr
+        .setSelection(TextSelection.create(view.state.doc, anchor ?? view.state.selection.from, to))
+        .scrollIntoView());
+}
+function wordPos(view, direction) {
+    const bounds = lineBounds(view);
+    const nextOffset = wordOffset(bounds.text, bounds.offset, direction);
+    return textPos(view, bounds.start + nextOffset);
+}
+function wordOffset(text, offset, direction) {
+    if (direction === 'next') {
+        const rest = text.slice(offset);
+        const match = /\W+\w|\w+\W+\w/.exec(rest);
+        if (!match)
+            return text.length;
+        return offset + match.index + match[0].length - 1;
+    }
+    if (direction === 'end') {
+        const rest = text.slice(offset + 1);
+        const match = /\w\b/.exec(rest);
+        if (!match)
+            return text.length;
+        return offset + 1 + match.index;
+    }
+    const before = text.slice(0, Math.max(0, offset - 1));
+    const matches = [...before.matchAll(/\b\w/g)];
+    return matches.at(-1)?.index ?? 0;
+}
+function currentBlockText(view) {
+    return view.state.selection.$from.parent.textContent;
+}
+function deleteCurrentBlock(view) {
+    const { state } = view;
+    const $from = state.selection.$from;
+    const from = $from.before();
+    const to = $from.after();
+    const paragraph = state.schema.nodes.paragraph?.create();
+    const tr = state.tr.delete(from, to);
+    if (tr.doc.childCount === 0 && paragraph)
+        tr.insert(0, paragraph);
+    const pos = Math.min(from + 1, tr.doc.content.size - 1);
+    view.dispatch(tr.setSelection(TextSelection.create(tr.doc, textPosInDoc(tr.doc, pos))).scrollIntoView());
+}
+function deleteChar(view) {
+    const { state } = view;
+    const from = state.selection.from;
+    const to = Math.min(from + 1, state.doc.content.size);
+    if (from >= to)
+        return;
+    view.dispatch(state.tr.delete(from, to).scrollIntoView());
+}
+function selectedText(view) {
+    const { from, to } = view.state.selection;
+    return view.state.doc.textBetween(Math.min(from, to), Math.max(from, to), '\n');
+}
+function deleteSelection(view) {
+    const { state } = view;
+    const { from, to } = state.selection;
+    if (from === to)
+        return;
+    view.dispatch(state.tr.delete(Math.min(from, to), Math.max(from, to)).scrollIntoView());
+}
+function pasteYank(view, yank) {
+    if (!yank || !yank.text)
+        return;
+    const { state } = view;
+    if (yank.kind === 'text') {
+        const at = state.selection.to;
+        view.dispatch(state.tr.insertText(yank.text, at).scrollIntoView());
+        return;
+    }
+    const paragraph = state.schema.nodes.paragraph?.create(null, state.schema.text(yank.text));
+    if (!paragraph)
+        return;
+    const at = state.selection.$from.after();
+    const tr = state.tr.insert(at, paragraph);
+    view.dispatch(tr.setSelection(TextSelection.create(tr.doc, textPosInDoc(tr.doc, at + 1))).scrollIntoView());
+}

package/dist/components/metric-grid.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+export type MetricTone = 'neutral' | 'success' | 'warning' | 'danger';
+export interface MetricSectionHeadingProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    title: React.ReactNode;
+    hint?: React.ReactNode;
+    action?: React.ReactNode;
+}
+export declare function MetricSectionHeading({ title, hint, action, className, ...props }: MetricSectionHeadingProps): React.JSX.Element;
+export type MetricGridProps = React.ComponentProps<'div'>;
+export declare function MetricGrid({ className, ...props }: MetricGridProps): React.JSX.Element;
+export interface MetricPanelProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    title?: React.ReactNode;
+    action?: React.ReactNode;
+    padding?: 'none' | 'sm' | 'md';
+}
+export declare function MetricPanel({ title, action, padding, className, children, ...props }: MetricPanelProps): React.JSX.Element;
+export interface MetricTileProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    /** Omit when the value carries its own meaning — a unit suffix can be the whole caption. */
+    label?: React.ReactNode;
+    value: React.ReactNode;
+    suffix?: React.ReactNode;
+    hint?: React.ReactNode;
+    tone?: MetricTone;
+}
+export declare function MetricTile({ label, value, suffix, hint, tone, className, ...props }: MetricTileProps): React.JSX.Element;
+export interface MetricBreakdownItem {
+    key: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    fraction?: number;
+    tone?: MetricTone;
+    title?: string;
+    onSelect?: () => void;
+}
+export interface MetricBreakdownProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    title?: React.ReactNode;
+    items: MetricBreakdownItem[];
+    emptyLabel?: React.ReactNode;
+    showBars?: boolean;
+}
+export declare function MetricBreakdown({ title, items, emptyLabel, showBars, className, ...props }: MetricBreakdownProps): React.JSX.Element;