@apptile/types

Type aliases a tile author uses to tell the TilePacket editor which of their component's props are Live-Layer-editable. Each T* alias equates to exactly the runtime value shape the corresponding LL control emits — no phantom brand, no wrapper. TypeScript sees a plain string / number / TTypographyValue etc., so a value passes through with zero cost.

The differentiation is at the declaration site. The editor's auto-wire pass reads the type identifier used in each Props field (title: TText vs. title: TColor) and:

1. Emits a useLiveLayer hook binding that prop to the LL store.
2. Rewrites the JSX site to consume the wired value.
3. Appends a matching field entry to src/live-layer.schema.json — with the type (the LL field type), and where applicable options, format, min, max, etc.

The Live Layer inspector then renders the exact same rich control that the visual builder's right panel uses for that value shape.

Quick start

import type {
  TText, TImage, TColor, TEnum, TSpacing, TShadow,
} from '@apptile/types';

interface Props {
  title:   TText;
  hero:    TImage;
  tint:    TColor;
  size:    TEnum<'sm' | 'md' | 'lg'>;
  padding: TSpacing;
  shadow:  TShadow;
  count?:  number;                 // plain — ignored by auto-wire
}

export default function PromoBanner({
  title, hero, tint, size, padding, shadow,
}: Props) {
  // Values arrive as normal props — the wire path takes care of
  // reading from LL. Nothing to do inside the component.
  return <View style={{ ...padding, ...shadow, backgroundColor: tint }}>…</View>;
}

Drop this tile onto any screen and the LL panel gets a group with six editable fields — text, image, colour, enum dropdown, spacing block, shadow control.

The alias catalogue

Each alias has its own doc — click through for the runtime value type, the LL field it maps to, the inspector renderer used, and a usage example.

Primitive fields

• TText — free-form text
• TTextArea — multi-line text
• TMarkdown — markdown body copy
• TNumber — number with optional min/max
• TBoolean — toggle
• TColor — colour picker
• TImage — asset URI (opens the image modal)
• TUrl — absolute URL
• TDeeplink — deeplink URI
• TAspectRatio — ratio picker
• TShopifyCollection — Shopify collection handle
• TFormatText — validated text (phone / email / address)

Composite fields

• TTypography — font family / weight / size / …
• TList — repeater over a nested item shape
• TEnum — dropdown from a string-literal union

Right-panel parity (added 2026-07)

• TSlider — bounded number on a track
• TAngle — degrees, rotation dial
• TDimension — number | '<n>%' | 'auto'
• TSpacing — padding + margin block
• TBorder — width / color / radius / style
• TShadow — RN shadow props + Android elevation
• TTransform — translate / rotate / scale
• TFlex — flexDirection / justify / align / wrap
• TFlexAlign — single-axis alignment token
• TPosition — absolute-position insets

Notes on the wire path

• Any prop whose type annotation is not one of the T* aliases is left alone by auto-wire. Plain string, number, boolean, custom interface — all ignored. Mix wired and plain props freely.
• Optional wrap is honoured: title?: TText and title: TText | undefined are both detected — the first T* branch wins.
• Auto-wire runs on drop and on delete-cleanup. Editing the file by hand and re-saving is fine too; the runtime scanner (runFilesAstSync.ts) re-scans the file's AST on every tick and re-derives the LL bindings.
• The T_TYPE_MAP registry lives in autoWireLiveLayer.ts. Adding a new alias means (a) exporting it here, (b) a LiveLayerFieldType entry in api/liveLayer.ts, (c) a map entry in T_TYPE_MAP, (d) a switch case in FieldRow.tsx.

Install

npm install @apptile/types

Type-only package — no runtime footprint.