@threadlabs/looma

Looma

A stack-agnostic UI library built on web standards and Open UI principles.

Documentation · Getting started · Issues

Install

pnpm add @threadlabs/looma

import "@threadlabs/looma/tokens.css";
import "@threadlabs/looma/vue.css";
import { Button, TopBar } from "@threadlabs/looma/vue";

Import the tokens, one theme, and the components once in your browser entry. See the getting-started guide for the exact imports and a Vue example.

The root package and the CSS subpaths need no framework. @threadlabs/looma/vue adds only Vue 3.5 or newer. The editor is built on Tiptap: its extension preset ships inside the editor subpath, and editor consumers supply a compatible Tiptap 2 core. @threadlabs/looma/vue/editor exports a turnkey LoomaEditor component and uses @tiptap/vue-3@^2.11.5.

Package

Looma ships as a single package, @threadlabs/looma:

Looma is pre-1.0: APIs may still change between minor versions. See the support matrix for what each component currently promises. React support is in development.

Principles

• Accessibility first and mobile first.
• Progressive enhancement with SSR-first markup.
• HTML and CSS first, JavaScript as enhancement.
• Composition over configuration.
• No global magical state.
• No external margins in components.

Documentation

• Getting started
• Theming: global, group, and component values
• Release 1 support
• Architecture
• Adapters
• Known follow-ups

License

MIT. See LICENSE.

Compact rich text

Import LoomaCompactEditor and LoomaCompactContent from @threadlabs/looma/vue/editor/compact. Bind a Tiptap JSON document through v-model; use label for the accessible textbox name and id for an external label. The editor owns its instance and supports paragraphs, hard breaks, bold, italic, inline code, Markdown typing rules and undo/redo without toolbars. Enter creates a paragraph; Shift+Enter creates a line break. The editable prop defaults to true, matching the document editor. focus() focuses the field.

The compact field uses the same field surface, border, radius and focus tokens as Textarea. Its text grows inside a bounded scrolling field; narrow/coarse-pointer use keeps body-sized type. The renderer emits escaped Vue nodes and works in SSR. It renders only the basic supported nodes and marks; it does not interpret HTML.

Optional extensions are installed at creation, and ready emits the Tiptap instance. Hosts can use these for domain-specific reference pickers while keeping lookup and persistence outside the shared editor. Extension configuration is fixed for an instance; remount to change it. Hosts adding new node types own their serialization and read rendering. This entry loads no document toolbar, slash menu, tables, image controls or syntax highlighting. Its CSS is included in @threadlabs/looma/vue.css, alongside the other Vue component styles.