UI helpers

Higher-level composables and utilities that reduce boilerplate in template development. Import from @lightspeed/crane-api:

import {
  useCurrentLanguage,
  useBackgroundStyle,
  useButtonStyles,
  createTextStyle,
  getColorHex,
  getBackgroundStyle,
  getContrastTextColor,
  isColorDark,
} from '@lightspeed/crane-api';

TypeScript Types

Use inferred section types to keep keys and returned data strongly typed.

import type { InferContentType, InferDesignType } from '@lightspeed/crane-api';
import content from './settings/content';
import design from './settings/design';

type Content = InferContentType<typeof content>;
type Design = InferDesignType<typeof design>;

// Now all composable calls are fully typed:
const title = useInputboxElementContent<Content>('title');
const titleStyle = useTextElementDesign<Design>('title_text');

This approach ensures TypeScript will catch misspelled keys and type mismatches at compile time.