@appinternalleads/ui 0.2.0

package/src/values/ValueView.tsx

@@ -0,0 +1,220 @@
+import { Box, Icon, Text, openURL, type TextVariant } from '../core';
+import { useDs, type Status } from '../tokens';
+import { formatCount, formatCurrency, formatTimestamp, type ValueKind } from './format';
+
+/**
+ * **Tier 3 — one value, rendered by its kind.**
+ *
+ * Widgets call `ValueView` rather than switching themselves, so a new kind lands in one place.
+ * Ported from `canvas-app/packages/ds/src/values.tsx` onto the primitive layer; every colour and
+ * size that was a literal there is a token name here.
+ *
+ * Two rules the whole tier obeys:
+ *
+ * 1. **A number the machine computed is mono with tabular figures.** Prose stays in the sans
+ *    face. Values stack into columns, and proportional figures make a column wobble.
+ * 2. **A glyph is an Icon, never a character.** The one character used here is an em dash, and
+ *    it is typography for *absent*, not a stand-in for a mark.
+ */
+
+type ValueProps = { align?: 'left' | 'right'; compact?: boolean };
+
+/** `compact` is the `comparison` table's cell size — that widget shrinks the VALUES, never the labels. */
+const numeric = (compact?: boolean): TextVariant => (compact ? 'caption' : 'body');
+
+export function CountValue({ value, align = 'right', compact }: ValueProps & { value: number }) {
+  return <Text variant={numeric(compact)} mono numeric align={align}>{formatCount(value)}</Text>;
+}
+
+export function CurrencyValue({ value, align = 'right', compact }: ValueProps & { value: number | string }) {
+  return <Text variant={numeric(compact)} mono numeric align={align}>{formatCurrency(value)}</Text>;
+}
+
+export function PercentageValue({ value, align = 'right', compact }: ValueProps & { value: string | number }) {
+  const text = typeof value === 'number' ? `${formatCount(value)}%` : value.trim();
+  return <Text variant={numeric(compact)} mono numeric align={align}>{text}</Text>;
+}
+
+export function TimestampValue({ value, align = 'right', compact }: ValueProps & { value: string }) {
+  return (
+    <Text variant={numeric(compact)} mono numeric align={align} color="textSecondary">
+      {formatTimestamp(value)}
+    </Text>
+  );
+}
+
+/**
+ * True is a mark; false is an em dash.
+ *
+ * **A red cross for `false` would be wrong.** Most false values are simply *not set* rather than
+ * failures, and the error red is the loudest thing in the palette. The dash says absent without
+ * passing judgement.
+ */
+export function BooleanValue({ value }: { value: boolean }) {
+  if (!value) return <Text mono color="textTertiary">—</Text>;
+  return <Icon name="tick" size={16} label="yes" />;
+}
+
+/** Explicit empty. A slot that renders nothing at all reads as a layout bug. */
+export function NoValue() {
+  return <Text mono color="textTertiary">—</Text>;
+}
+
+/**
+ * An unordered enum as a pill. `tone` maps onto the status ramp because severity shares it —
+ * one ramp, two jobs, per the contract.
+ */
+export function StateValue({ children, tone = 'queued' }: { children: string; tone?: Status }) {
+  return (
+    <Box alignSelf="flex-start" bg={`statusBg.${tone}`} radius="part.pill" px="s2" py="s1">
+      <Text variant="monoId" mono color={`status.${tone}`}>{children}</Text>
+    </Box>
+  );
+}
+
+/** A machine string — a slug, a run id, an API constant — in the reference chip. */
+export function ReferenceValue({ children }: { children: string }) {
+  return (
+    <Box alignSelf="flex-start" bg="referenceBg" radius="part.pill" px="s2" py="s1">
+      <Text variant="monoId" mono numeric color="reference">{children}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Tail-truncated, accent **ink** — never the fill, which fails as text on the surfaces it meets.
+ *
+ * `interactive={false}` renders the same link inert, and that is not a styling nicety: a link
+ * inside a row that itself continues to a detail screen steals most of the row's tap target, so
+ * the row silently stops working over half its width. Inside a pressable row the link is a
+ * *value*; opening it is the detail screen's job.
+ */
+export function LinkValue({
+  value, interactive = true, lines = 1,
+}: { value: string; interactive?: boolean; lines?: number }) {
+  return (
+    <Text
+      variant="caption"
+      color="accentInk"
+      numberOfLines={lines}
+      role={interactive ? 'link' : undefined}
+      onPress={interactive ? () => openURL(value) : undefined}>
+      {value}
+    </Text>
+  );
+}
+
+/** Prose. No `compact` — caption size already, so there is nothing to shrink. */
+export function TextValue({ value, lines = 3 }: { value: string; lines?: number }) {
+  return <Text variant="caption" numberOfLines={lines}>{value}</Text>;
+}
+
+/* ── Bar-backed values ───────────────────────────────────────────────────── */
+
+function Bar({ ratio, width }: { ratio: number; width: number }) {
+  return (
+    <Box width={width} height={4} radius="part.skeleton" bg="surfaceSunken" style={{ overflow: 'hidden' }}>
+      {/* **A zero score still draws its track at 2%.** A bar that disappears entirely reads as
+          MISSING DATA rather than as zero, and the two mean opposite things — one says the
+          automation could not measure this, the other says it measured it and it was nothing. */}
+      <Box height="100%" width={`${Math.max(2, ratio * 100)}%`} radius="part.skeleton" bg="accentFill" />
+    </Box>
+  );
+}
+
+/**
+ * **`score` — a number and its bar.**
+ *
+ * Two colours, and swapping them is a contrast failure rather than a preference: the numeral is
+ * `accentInk` because `accentFill` is under the floor on the page and on its own tint; the bar is
+ * `accentFill` because a bar is a background and backgrounds may use it.
+ */
+export function ScoreValue({ value, max = 100, width = 88 }: { value: number; max?: number; width?: number }) {
+  const ratio = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
+  return (
+    <Box row align="center" gap="s2">
+      <Text mono numeric color="accentInk">{formatCount(value)}</Text>
+      <Bar ratio={ratio} width={width} />
+    </Box>
+  );
+}
+
+/**
+ * **`proportion` — `8 of 24`, with the bar.**
+ *
+ * Distinct from `score` because the denominator is real and worth printing. A score of 69 is 69
+ * out of an implied 100; `8 of 24` is eight actual things out of twenty-four, and collapsing it
+ * to 33% loses both counts.
+ */
+export function ProportionValue({
+  value, total, width = 88,
+}: { value: number; total: number; width?: number }) {
+  const ratio = total > 0 ? Math.min(1, Math.max(0, value / total)) : 0;
+  return (
+    <Box row align="center" gap="s2">
+      <Text mono numeric color="textSecondary">{`${formatCount(value)} of ${formatCount(total)}`}</Text>
+      <Bar ratio={ratio} width={width} />
+    </Box>
+  );
+}
+
+/**
+ * **`delta` — movement since the previous run, as a tinted pill.**
+ *
+ * A pill *beneath* the value rather than inline beside it: inline, the eye reads
+ * `₹52,04,300 +3.2%` as one number and has to work out where it breaks.
+ *
+ * **`flat` is not "no change is bad".** A zero delta takes the queued ramp, because nothing moved
+ * and neither green nor red is true of that.
+ *
+ * **`variance` is a different widget with the same appearance** — this compares to the previous
+ * run, `variance` compares to a target, and the sign conventions differ. *"We're up 3%"* and
+ * *"we're 3% short"* are not the same sentence.
+ */
+export function DeltaPill({
+  direction, children,
+}: { direction: 'up' | 'down' | 'flat'; children: string }) {
+  const tone: Status = direction === 'up' ? 'executed' : direction === 'down' ? 'error' : 'queued';
+  const { colors } = useDs();
+  const arrow = direction === 'up' ? 'trend-up' : direction === 'down' ? 'trend-down' : 'arrow-r';
+  return (
+    <Box row align="center" gap="s1" alignSelf="flex-start" bg={`statusBg.${tone}`} radius="part.pill" px="s2" py="s1">
+      <Icon name={arrow} size={11} color={colors.status[tone]} />
+      <Text variant="monoId" mono numeric color={`status.${tone}`}>{children}</Text>
+    </Box>
+  );
+}
+
+export function ValueView({
+  value, kind, lines, interactive = true, align = 'right', compact = false,
+}: {
+  value: unknown;
+  kind: ValueKind;
+  lines?: number;
+  /**
+   * False when the value sits inside something already pressable. Only `link` currently cares,
+   * but the prop belongs on the dispatcher rather than at each call site so a future tappable
+   * kind cannot reintroduce the same swallowed-tap bug.
+   */
+  interactive?: boolean;
+  /**
+   * Numerals right-align by default, correct in a COLUMN — a table or a field well, where the
+   * decimal points line up down the page. In a `stats` tile there is no column: the value sits
+   * under its own label, and left-aligning is what makes the pair read as one thing.
+   */
+  align?: 'left' | 'right';
+  compact?: boolean;
+}) {
+  switch (kind) {
+    case 'none': return <NoValue />;
+    case 'boolean': return <BooleanValue value={Boolean(value)} />;
+    case 'count':
+    case 'number': return <CountValue value={Number(value)} align={align} compact={compact} />;
+    case 'currency': return <CurrencyValue value={value as number | string} align={align} compact={compact} />;
+    case 'percentage': return <PercentageValue value={value as string | number} align={align} compact={compact} />;
+    case 'timestamp': return <TimestampValue value={String(value)} align={align} compact={compact} />;
+    case 'link': return <LinkValue value={String(value)} interactive={interactive} lines={lines ?? 1} />;
+    case 'state': return <StateValue>{String(value)}</StateValue>;
+    case 'text': return <TextValue value={String(value)} lines={lines} />;
+  }
+}

package/src/values/format.ts

@@ -0,0 +1,108 @@
+/**
+ * **Tier 3 of the widget contract — the shared value vocabulary, and its pure half.**
+ *
+ * Zero platform dependencies, so it runs anywhere: node, a test, a server. The contract says to
+ * build this tier before any output widget and gives the reason — doing it per-consumer *"is how
+ * a product ends up with four incompatible currency formatters and three ideas of what
+ * 2 minutes ago looks like."*
+ *
+ * Ported from `canvas-app/packages/ds/src/values.tsx`.
+ */
+
+export type ValueKind =
+  | 'count' | 'number' | 'currency' | 'percentage' | 'boolean'
+  | 'timestamp' | 'link' | 'state' | 'text' | 'none';
+
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}(?:[T ]\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?)?$/;
+const URL_LIKE = /^https?:\/\/\S+$/i;
+const MONEY_PREFIXED = /^\s*(?:[₹$€£¥]|Rs\.?|INR|USD|EUR|GBP)\s*[\d,.]+\s*$/i;
+const PERCENT_SUFFIXED = /^\s*[+-]?[\d,.]+\s*%\s*$/;
+
+/**
+ * Keys that name money. Needed because a bare `48500` carries no currency information at all —
+ * inference from the value alone can only ever guess, so the key is the one honest signal
+ * available. A wrong guess renders a count as rupees, which is why the list is deliberately short
+ * and unambiguous rather than clever.
+ */
+const MONEY_KEY = /(^|_)(amount|total|price|cost|subtotal|balance|revenue|fee|salary)s?($|_)/i;
+
+/**
+ * Best-effort typing of an untyped payload value.
+ *
+ * **This is inference and it will sometimes be wrong** — a string that looks like a date renders
+ * as a timestamp, a count named `total` renders as currency. Acceptable only because the widget
+ * consuming it is `fallback`, whose whole contract is *structure without claimed semantics* and
+ * whose pill says `RAW`, so a wrong inference reads as the fallback being approximate rather than
+ * as the product being confused. **Never route a declared widget's typed field through this.**
+ */
+export function inferValueKind(value: unknown, key?: string): ValueKind {
+  if (value === null || value === undefined || value === '') return 'none';
+  if (typeof value === 'boolean') return 'boolean';
+  if (typeof value === 'number') {
+    if (!Number.isFinite(value)) return 'text';
+    if (key && MONEY_KEY.test(key)) return 'currency';
+    return Number.isInteger(value) ? 'count' : 'number';
+  }
+  if (typeof value === 'string') {
+    const s = value.trim();
+    if (URL_LIKE.test(s)) return 'link';
+    if (MONEY_PREFIXED.test(s)) return 'currency';
+    if (PERCENT_SUFFIXED.test(s)) return 'percentage';
+    /* Epoch numbers are deliberately NOT inferred as timestamps: `1754000000` and a count of
+       1.75 million are the same bytes, and rendering a count as a date is worse than rendering
+       a date as a count. */
+    if (ISO_DATE.test(s)) return 'timestamp';
+    return 'text';
+  }
+  return 'text';
+}
+
+/**
+ * Indian digit grouping — `52,04,300` rather than `5,204,300`. Lakh and crore are how the amounts
+ * in this product are read aloud, and Western grouping makes a reader re-count.
+ */
+export function formatIndianNumber(n: number): string {
+  const neg = n < 0;
+  const [whole = '', frac] = Math.abs(n).toString().split('.');
+  const last3 = whole.slice(-3);
+  const rest = whole.slice(0, -3);
+  const grouped = rest ? `${rest.replace(/\B(?=(\d{2})+(?!\d))/g, ',')},${last3}` : last3;
+  return `${neg ? '-' : ''}${grouped}${frac ? `.${frac}` : ''}`;
+}
+
+/** Integers group; everything else keeps up to two decimals. */
+export function formatCount(n: number): string {
+  return Number.isInteger(n) ? formatIndianNumber(n) : formatIndianNumber(Math.round(n * 100) / 100);
+}
+
+export function formatCurrency(value: number | string): string {
+  if (typeof value === 'string') return value.trim();
+  return `₹${formatIndianNumber(Math.round(value * 100) / 100)}`;
+}
+
+/**
+ * `recipient_email` → `Recipient email`. Only the first word is capitalised: title case would
+ * claim these are proper labels, and they are machine keys the fallback is guessing at.
+ */
+export function humaniseKey(key: string): string {
+  const words = key
+    .replace(/[_-]+/g, ' ')
+    .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+    .trim()
+    .toLowerCase();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+
+/**
+ * A clock reading, absolute rather than relative.
+ *
+ * Deliberately not "2h ago": a value inside a payload is usually a date the automation produced
+ * — a meeting time, a due date — where *"in 3 days"* is a worse answer than the date itself.
+ */
+export function formatTimestamp(value: string): string {
+  const ms = Date.parse(value);
+  if (Number.isNaN(ms)) return value;
+  return new Date(ms).toLocaleString(undefined, {
+    day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit',
+  });
+}

package/src/values/index.ts

@@ -0,0 +1,6 @@
+export * from './format';
+export { ranAt } from './relativeTime';
+export {
+  BooleanValue, CountValue, CurrencyValue, DeltaPill, LinkValue, NoValue, PercentageValue,
+  ProportionValue, ReferenceValue, ScoreValue, StateValue, TextValue, TimestampValue, ValueView,
+} from './ValueView';

package/src/values/relativeTime.ts

@@ -0,0 +1,27 @@
+/**
+ * "ran 09:02 today", "ran 2d ago", "never run" — the Pine note line under an automation.
+ *
+ * Copy rule: state the fact, not the mechanism, and keep it short enough to sit on one
+ * mono line at 9.5px.
+ */
+export function ranAt(iso: string | null | undefined, now = new Date()): string {
+  if (!iso) return 'never run';
+  const then = new Date(iso);
+  if (Number.isNaN(then.getTime())) return 'never run';
+
+  const sameDay =
+    then.getFullYear() === now.getFullYear() &&
+    then.getMonth() === now.getMonth() &&
+    then.getDate() === now.getDate();
+  if (sameDay) {
+    const hh = String(then.getHours()).padStart(2, '0');
+    const mm = String(then.getMinutes()).padStart(2, '0');
+    return `ran ${hh}:${mm} today`;
+  }
+
+  const days = Math.floor((now.getTime() - then.getTime()) / 86_400_000);
+  if (days <= 1) return 'ran yesterday';
+  if (days < 30) return `ran ${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `ran ${months}mo ago`;
+}

package/src/widgets/01-TextInputField.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { Box, Text } from '../core';
+import type { Driven } from './driven';
+import { WidgetCard } from './WidgetCard';
+import { WidgetInput } from './WidgetInput';
+
+/**
+ * **01 · Text Input Field** — `TEXT`, returns `string`.
+ *
+ * The primitive with **no label and no helper** — for search bars and composers where the
+ * surround already says what the field is. That absence is the whole widget: 02 is the same
+ * input with a label and a helper, and the two exist separately because a labelled field inside
+ * a search bar is a label repeated.
+ *
+ * The handoff renders both shapes side by side to show they are one control.
+ */
+export function TextInputFieldWidget({
+  value = '', onChange, pillValue = '', onPillChange, prompt, onMenu,
+  pill: pillLabel, title, label, hint, shape,
+}: Driven & {
+  value?: string;
+  onChange?: (v: string) => void;
+  pillValue?: string;
+  onPillChange?: (v: string) => void;
+  /**
+   * **Driven from JSON, this renders ONE input, not two.** The fixture shows both shapes because
+   * the handoff's point is that they are one control — but an ask has one answer, and drawing a
+   * second empty box beside it would invent a field the spec never declared.
+   */
+  shape?: 'rect' | 'pill';
+}) {
+  const [rect, setRect] = useState(value);
+  const [pill, setPill] = useState(pillValue);
+  return (
+    <WidgetCard
+      pill={pillLabel ?? 'TEXT'}
+      title={title ?? 'Text Input Field'}
+      prompt={prompt ?? (shape ? undefined : 'Find me three copywriters who have shipped fintech onboarding.')}
+      onMenu={onMenu}
+      testID="widget-01">
+      {shape ? (
+        <Box style={{ gap: 9 }}>
+          {label ? (
+            <Text style={{ fontSize: 12.5, lineHeight: 12.5, fontWeight: '600' }}>{label}</Text>
+          ) : null}
+          <WidgetInput
+            value={rect}
+            onChangeText={v => { setRect(v); onChange?.(v); }}
+            placeholder={hint}
+            shape={shape}
+            ariaLabel={label || title || 'Answer'}
+            testID="w01-input"
+          />
+        </Box>
+      ) : (
+      <Body
+        rect={rect}
+        pill={pill}
+        onRect={v => { setRect(v); onChange?.(v); }}
+        onPill={v => { setPill(v); onPillChange?.(v); }}
+      />
+      )}
+    </WidgetCard>
+  );
+}
+
+function Body({
+  rect, pill, onRect, onPill,
+}: { rect: string; pill: string; onRect: (v: string) => void; onPill: (v: string) => void }) {
+  return (
+    <Box style={{ gap: 11 }}>
+      <WidgetInput
+        value={rect}
+        onChangeText={onRect}
+        placeholder="Type a candidate name"
+        ariaLabel="Type a candidate name"
+        testID="w01-rect"
+      />
+      <WidgetInput
+        value={pill}
+        onChangeText={onPill}
+        placeholder="Pill shape, for search"
+        shape="pill"
+        ariaLabel="Pill shape, for search"
+        testID="w01-pill"
+      />
+      <Text
+        color="textSecondary"
+        style={{ fontSize: 12, lineHeight: 12 * 1.5 }}>
+        One control, two shapes. The rectangle sits in a form; the pill sits in a search bar.
+      </Text>
+    </Box>
+  );
+}

package/src/widgets/02-03-Text.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react';
+import { Box, Text } from '../core';
+import { useDs } from '../tokens';
+import type { Driven } from './driven';
+import { WidgetCard } from './WidgetCard';
+import { WidgetInput } from './WidgetInput';
+import { widgetRadius } from './tokens';
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+/**
+ * **02 · TextField** — `TEXT` → `string` + label + helper.
+ *
+ * 01 with the two things 01 leaves out. **The helper's height is reserved from first paint** —
+ * an error must never shift layout under a finger already moving toward the button. That is why
+ * the helper renders at `minHeight` even when it has nothing to say.
+ *
+ * Validation: on blur for a first entry, on every keystroke once already wrong, never on the
+ * first keystroke.
+ */
+export function TextFieldWidget({
+  value = '', onChange, prompt, onMenu,
+  pill: pillLabel, title: cardTitle, label, hint,
+}: Driven & { value?: string; onChange?: (v: string) => void
+}) {
+  const [v, setV] = useState(value);
+  const [touched, setTouched] = useState(false);
+  const invalid = touched && v !== '' && !EMAIL.test(v);
+
+  return (
+    <WidgetCard
+      pill={pillLabel ?? 'TEXT'}
+      title={cardTitle ?? 'TextField'}
+      prompt={prompt ?? "Send the shortlist to my hiring manager when it's ready."}
+      onMenu={onMenu}
+      testID="widget-02">
+      <Box style={{ gap: 9 }}>
+        {label === '' ? null : (
+          <Text style={{ fontSize: 12.5, lineHeight: 12.5, fontWeight: '600' }}>
+            {label ?? 'Manager email'}
+          </Text>
+        )}
+        <WidgetInput
+          value={v}
+          onChangeText={t => { setV(t); onChange?.(t); }}
+          onBlur={() => setTouched(true)}
+          placeholder="name@company.com"
+          invalid={invalid}
+          ariaLabel={label || cardTitle || 'Manager email'}
+          testID="w02-input"
+        />
+        {/* Reserved from first paint. The copy changes; the height does not. */}
+        <Box style={{ minHeight: 17, justifyContent: 'center' }}>
+          <Text
+            color={invalid ? 'status.error' : 'textSecondary'}
+            style={{ fontSize: 12, lineHeight: 12 * 1.4 }}>
+            {invalid
+              ? 'That needs an @ and a domain.'
+              : hint ?? 'They get a copy of the shortlist, nothing else.'}
+          </Text>
+        </Box>
+      </Box>
+    </WidgetCard>
+  );
+}
+
+/**
+ * **03 · TextArea** — `TEXT` → multi-line `string`.
+ *
+ * **"Optional. Skipping is a valid answer."** is the footer copy, verbatim, and it is doing real
+ * work: every default is a working default, so a widget that only says what it wants and never
+ * that it can be left alone reads as required.
+ */
+export function TextAreaWidget({
+  value = '', onChange, limit = 400, prompt, onMenu,
+  pill: pillLabel, title: cardTitle, label, hint,
+}: Driven & {
+  value?: string; onChange?: (v: string) => void; limit?: number
+}) {
+  const { colors } = useDs();
+  const [v, setV] = useState(value);
+  const atLimit = v.length >= limit;
+
+  return (
+    <WidgetCard
+      pill={pillLabel ?? 'TEXT'}
+      title={cardTitle ?? 'TextArea'}
+      prompt={prompt ?? 'Draft the outreach note for the three I keep.'}
+      onMenu={onMenu}
+      testID="widget-03">
+      <Box style={{ gap: 9 }}>
+        {label === '' ? null : (
+          <Text style={{ fontSize: 12.5, lineHeight: 12.5, fontWeight: '600' }}>
+            {label ?? 'Anything the note must say'}
+          </Text>
+        )}
+        <WidgetInput
+          value={v}
+          onChangeText={t => { setV(t.slice(0, limit)); onChange?.(t.slice(0, limit)); }}
+          placeholder="Tone, deadline, links to include…"
+          multiline
+          minHeight={92}
+          ariaLabel={label || cardTitle || 'Anything the note must say'}
+          testID="w03-input"
+        />
+        <Box row align="center" style={{ gap: 11 }}>
+          <Box flex={1}>
+            <Text color="textSecondary" style={{ fontSize: 12, lineHeight: 12 * 1.4 }}>
+              {hint ?? 'Optional. Skipping is a valid answer.'}
+            </Text>
+          </Box>
+          <Text
+            mono
+            numeric
+            style={{
+              fontSize: 11.5,
+              lineHeight: 11.5,
+              color: atLimit ? colors.accentInk : colors.textSecondary,
+            }}>
+            {`${v.length} / ${limit}`}
+          </Text>
+        </Box>
+      </Box>
+    </WidgetCard>
+  );
+}
+
+export const TEXTAREA_RADIUS = widgetRadius.inset;