API Reference

DEJA.js organizes its shared code into workspace packages under the @repo/ scope. This page documents the public API for each package -- the composables, components, types, and utilities that apps import and use.

@repo/modules -- Core Business Logic

The central package for domain-specific composables and types. Organized by feature domain.

import { useLocos, useTurnouts, useEfx, useSignals, useLayout, useRoutes } from '@repo/modules'

Composables

`useLocos()`

Locomotive management. Returns functions for reading and managing the locomotive roster.

getThrottles() -- Returns reactive throttle data from Firestore.

`useFunctions()`

Locomotive function management (headlights, horns, bells, etc.).

`useFunctionIcon()`

Maps DCC function numbers to Material Design icon names for UI rendering.

`useTurnouts()`

Turnout state management.

getTurnouts() -- Returns reactive turnout collection from Firestore.

`useEfx()`

Effect management for lights, sounds, animations, and relays.

getEffects() -- Returns reactive effects collection from Firestore.
getGuestEffects() -- Returns only guest-accessible effects (used by the Tour app).

`useSignals()`

Signal state management.

getSignals() -- Returns reactive signal collection from Firestore.

`useLayout()`

Layout configuration and device management.

getLayout() -- Returns reactive layout document from Firestore.
getDevices() -- Returns reactive devices collection from Firestore.

`useRoutes()`

Route preset management for saved turnout configurations.

`useLayoutRoutes()`

Layout-specific route management that ties routes to the current layout.

Exported Types

Each domain exports its TypeScript types and interfaces:

effects/types -- Effect interfaces and enums.
effects/constants -- Effect category constants.
layouts/types -- Layout, device, and configuration interfaces.
layouts/constants -- Layout-related constants.
locos/types -- Locomotive, throttle, and function interfaces.
locos/constants -- Loco-related constants.
turnouts/types -- Turnout state interfaces.
signals/types -- Signal state interfaces.
routes/types -- Route and route step interfaces.
routes/constants -- Route-related constants.

@repo/dccex -- DCC-EX Integration

Provides the composable for sending DCC-EX commands from frontend apps to the server via Firebase RTDB.

import { useDcc } from '@repo/dccex'

`useDcc()`

The primary interface for sending DCC commands. Commands are written to dccCommands/{layoutId} in Firebase Realtime Database, where the server picks them up and dispatches them to the CommandStation over serial.

Returned functions:

Function	Signature	Description
`setFunction`	`(address: number, func: number, state: boolean) => Promise<void>`	Toggle a locomotive function (headlight, horn, bell, etc.)
`setPower`	`(payload: object) => Promise<void>`	Send a power command (on/off, main/prog track)
`sendOutput`	`(pin: number, state: boolean) => Promise<void>`	Control an accessory output pin
`sendDccCommand`	`({ action, payload }: DccCommand) => Promise<void>`	Send an arbitrary DCC command
`send`	`(action: string, payload?: object) => Promise<void>`	General-purpose command sender that routes through cloud, serial, or emulator based on mode

The composable reads the layout ID from local storage (@DEJA/layoutId) and supports three modes:

Cloud mode (default) -- Writes commands to Firebase RTDB.
Emulated mode -- Logs commands without sending them (for development).
Serial mode -- Direct serial communication (when available).

`defaultCommands`

An array of predefined DCC-EX command objects for common operations (power on/off, reset, status query, save EEPROM, etc.). Exported from @repo/dccex/constants.

@repo/deja -- DEJA Core

The core composable for writing DEJA system commands to Firebase.

import { useDejaJS } from '@repo/deja'

`useDejaJS()`

Writes commands to the dejaCommands/{layoutId} queue in Firebase RTDB. These commands handle system-level operations that do not go to the DCC serial port:

Device connection and disconnection.
Serial port listing.
Server status queries.

@repo/ui -- Shared Vue Components

A library of reusable Vue 3 components shared across all frontend apps.

import { LocoAvatar, TurnoutList, TrackPower } from '@repo/ui'

Components

Component	Description
`AppHeader`	Application header bar
`LocoAvatar`	Locomotive image/icon display
`Consist`	Multi-locomotive consist display
`EditConsist`	Editable consist configuration
`MiniConsist`	Compact consist display
`Functions`	Locomotive function button grid
`FunctionList`	Function list display
`FunctionsSpeedDial`	Speed dial for quick function access
`TurnoutList`	List of turnouts with state indicators
`TurnoutItem`	Single turnout list item
`TurnoutSwitch`	Toggle switch for turnout control
`TurnoutCard`	Card-style turnout display
`TurnoutButton`	Button for throwing/closing turnouts
`TurnoutRaw`	Raw turnout data display
`TurnoutTable`	Table view of turnouts
`TurnoutLabels`	Printable turnout label generator
`EffectList`	List of effects with state indicators
`EffectItem`	Single effect list item
`EffectSwitch`	Toggle switch for effect control
`EffectCard`	Card-style effect display
`EffectButton`	Button for activating/deactivating effects
`EffectRaw`	Raw effect data display
`EffectTable`	Table view of effects
`GuestEffectCard`	Guest-friendly effect card (used in Tour app)
`TrackPower`	Track power on/off control
`SignalList`	Signal state display list
`SelectLayout`	Layout selection dropdown
`LayoutChip`	Compact layout identifier chip
`UserProfile`	User profile display
`SignOut`	Sign out button
`ViewJson`	JSON data viewer for debugging
`ListMenu`	Generic list menu component
`DeviceStatusItem`	Single device connection status
`DeviceStatusList`	List of device statuses
`EmptyState`	Empty state placeholder
`ModuleList`	Generic module list
`LocoList`	Locomotive roster list
`Menu`	Application navigation menu
`Stat`	Statistics display card
`BackgroundDecor`	Decorative background element
`BackgroundFallingStars`	Animated falling stars background
`NotificationContainer`	Toast notification container

Animation Utilities

The @repo/ui package also exports animation utilities from @repo/ui/animations:

DURATION, EASING, SPRING, GLOW -- Animation timing constants.
presets -- Named animation presets.
useReducedMotion -- Composable that respects the user's reduced motion preference.
StatusPulse, TransitionFade, TransitionSlide, TransitionExpand, TransitionList -- Transition wrapper components.

Composables

useColors() -- Returns color utilities for consistent theming.
useNotification() / provideNotifications() -- Toast notification system.

@repo/auth -- Authentication

Firebase Auth integration with Vue Router guards and authentication UI components.

import { requireAuth, requireLayout, Login } from '@repo/auth'

Route Guards

Guard	Description
`requireAuth`	Redirects to login if the user is not authenticated
`requireDccEx`	Ensures a DCC-EX connection is available
`requireLayout`	Requires a layout to be selected
`requireApproval`	Checks that the user's account is approved
`requireOnboarding`	Redirects to onboarding if not completed
`redirectIfAuthenticated`	Redirects away from login if already authenticated

Components

Component	Description
`Login`	Firebase authentication login form
`Signup`	Account registration form
`ForgotPassword`	Password reset form
`Signout`	Sign out button

@repo/firebase-config -- Firebase Initialization

Exports configured Firebase instances for both browser and server use.

// Browser client
import { db, rtdb } from '@repo/firebase-config'

// Server (Node.js with Admin SDK)
import { db, rtdb } from '@repo/firebase-config/firebase-admin-node'

db -- Firestore database instance.
rtdb -- Realtime Database instance.

@repo/utils -- Common Utilities

Shared utility functions used across multiple packages.

import { createLogger, slugify } from '@repo/utils'

createLogger(namespace) -- Creates a namespaced logger instance for consistent debug output.
slugify(text) -- Converts text to a URL-friendly slug.