All Projects

Loom SDK

9-package TypeScript SDK -React 19, Next.js 16, Tailwind 4, Zustand 5, TanStack Query 5

9 independent TypeScript packages for frontend.

  • •Type-safe API client with SSE and Spool response unwrapping
  • •React hooks: useDebounce, useClickOutside, useUrlState, useWebSocket
  • •Tailwind CSS 4 UI component library
  • •Zustand 5 store factories with persist middleware
  • •Zod + react-hook-form validation, auth provider with protected routes
  • •TanStack Query factories, 7 of 9 packages zero-dependency
Private RepositoryThis is a private repository. You need collaborator access to view the source code on GitHub.
9
Packages
7/9
Zero-dep
3 SDKs
Ecosystem
0.1.0
Version
Stable
Status

Tech Stack

TypeScript 5React 19Next.js 16Tailwind CSS 4TanStack Query 5Zustand 5Zodpnpm + Turborepo

How It Works

Ecosystem
🌐 Loom · React
🍎 Weave · iOS
🤖 Warp · Android
🔧 Spool · Backend (ErrorCode source)
Data Flow
🔧
Spool API
NestJS backend
🌐
@loom/api-client
Auto-unwrap envelope
🔄
@loom/query
TanStack Query cache
🎨
@loom/ui
React components
Packages (9)
🔧
@loom/utils
cn(), formatters, logger
⚙
@loom/config
Zod env validation, flags
✓
@loom/validation
Zod + react-hook-form
🌐
@loom/api-client
Fetch wrapper, SSE, ApiError
🪝
@loom/hooks
useDebounce, useClickOutside
→ @loom/api-client
📦
@loom/store
Zustand factories + persist
→ @loom/utils
🔑
@loom/auth
AuthProvider, ProtectedRoute
→ @loom/utils
🔄
@loom/query
TanStack Query factories
→ @loom/api-client
🎨
@loom/ui
Button, Card, Modal, Badge
→ @loom/utils
4 of 9 packages have zero internal dependencies

Features

Modular Architecture

9 independent packages with opt-in imports.

  • •7 of 9 have zero internal dependencies
  • •@loom/api-client and @loom/hooks share a thin utils dependency
  • •pnpm workspaces + Turborepo, tsup for ESM + CJS dual output

@loom/api-client -Type-Safe Fetch

Type-safe HTTP client with Spool SDK integration.

  • •Automatic response envelope unwrapping
  • •SSE streaming, structured error mapping
  • •Request/response interceptors, retry with exponential backoff

@loom/hooks -React Hooks Library

Production-ready React 19 hooks.

  • •useDebounce, useClickOutside, useUrlState
  • •useWebSocket, useSSE, useMediaQuery
  • •useIntersectionObserver and more
  • •Zero dependencies beyond React 19

@loom/ui -Component Library

Tailwind CSS 4 component library.

  • •Button, Card, Table, Modal, Badge, Toast, Input, Select, and more
  • •Dark mode, responsive, and accessible
  • •Composable slot-based API pattern

@loom/store -State Management

Zustand 5 store factories.

  • •TypeScript inference with persist middleware
  • •Slice pattern for modular stores
  • •DevTools integration out of the box

@loom/auth -Authentication

Authentication provider for React.

  • •AuthProvider context with login/logout/refresh flows
  • •ProtectedRoute component for guarded navigation
  • •Token management with automatic refresh
  • •Pairs with @spool/auth on the backend

@loom/query -TanStack Query Factories

TanStack Query factories.

  • •Type-safe hierarchical query key builder
  • •Factory functions for queries, mutations, and infinite queries
  • •Automatic cache invalidation patterns
  • •Pairs with @loom/api-client for end-to-end type safety

@loom/validation

Zod + react-hook-form integration.

  • •Type-safe form validation
  • •Formatted error messages
  • •Schema-driven input components

@loom/config

Client environment and feature flags.

  • •Zod-based env validation
  • •Feature flag support with defaults
  • •Runtime config without redeploy

@loom/utils

Shared utility functions.

  • •cn() class merging (clsx + tailwind-merge)
  • •Date, number, string formatters
  • •Storage wrappers and structured logger
Back to overview