Values

A value is app data that a pattern draws: how far an upload is, how loud the user speaks, how good the connection is. Values are plain props on the component, and they can change every frame.

import { SinuaView } from "@sinua/web/react";

// One value: how much of the ring is filled (0 to 1).
export function Upload({ fraction }: { fraction: number }) {
  return <SinuaView pattern="completing" overrides={{ progress: fraction }} style={{ width: 64, height: 64 }} />;
}

// One value per ring: `progress0` is the outermost. `ringCount` sets how many are drawn.
export function ActivityRings({ move, exercise, stand }: { move: number; exercise: number; stand: number }) {
  return (
    <SinuaView
      pattern="tracking"
      overrides={{ ringCount: 3, progress0: move, progress1: exercise, progress2: stand }}
      style={{ width: 96, height: 96 }}
    />
  );
}

Every value

Which patterns read which value, with its range. Everything outside the range is clamped by the engine.

Lists of values

Some patterns take one value per item. tracking draws up to four activity rings, so progress is a list with one entry per ring (the length follows ringCount). A ring's value past 1 draws extra laps, up to 3.

{
  "fxSpec": "1.8",
  "object": "ring",
  "pattern": "tracking",
  "params": {
    "ringCount": 3,
    "progress": [
      0.8,
      0.45,
      1.2
    ]
  }
}

In a binding, address one ring with progress[0], progress[1], … (see Bindings).

Values vs style

Every prop in the catalog is either a value (app data, above) or style (how it looks: shape, colour, materials, speed). Values change with your data. Style is a design decision you usually set once, or per state.

Catching mistakes

The engine clamps every value to its range. Typed components (Swift, Kotlin, React Native) catch unknown names and wrong types at compile time. A view doesn't validate plain-pattern props at runtime: warnings (unknown names, out-of-range numbers, fractions for whole-number props) come from resolving an FX Spec, or from checking a set of props yourself. The visual still renders either way:

import { checkOverrides } from "@sinua/core";

// Warnings only: the frame still renders, and the engine clamps out-of-range values.
const warnings = checkOverrides("breathing", 64, { lanse: 6 });
for (const w of warnings) {
  console.warn(`${w.path}: ${w.message}`);
  // → /lanse: unknown key `lanse` for orb/breathing (did you mean `lanes`?)
}

The full list of messages is in Diagnostics.