@expokit/cli 0.4.4 → 0.5.0

package/bin/lib.mjs

@@ -2,6 +2,7 @@
  * Pure helpers for the expo-kit CLI (no I/O, no dependencies) — kept separate so they can be unit-tested.
  */
 
+import { createHash } from 'node:crypto';
 import path from 'node:path';
 
 /** Thrown for user-facing errors; the CLI entry point prints `message` and exits 1. */
@@ -346,13 +347,122 @@ export function needsDevBuild(deps) {
 
 /**
  * The component a file is named for: the PascalCase export matching one of `names` ("Grain Gradient" or
- * "grain-gradient" → GrainGradient), else the first PascalCase export (never a CONSTANT).
+ * "grain-gradient" → GrainGradient), then one that starts with it (Toast → Toaster, not ToastProvider: the shortest),
+ * else the first PascalCase export (never a CONSTANT).
  */
 export function pickMainExport(source, names = []) {
   const exports = [...source.matchAll(/export (?:function|const) ([A-Z][A-Za-z0-9]*[a-z][A-Za-z0-9]*)\b/g)].map((m) => m[1]);
   const pascal = (s) => String(s ?? '').split(/[^A-Za-z0-9]+/).filter(Boolean).map((w) => w[0].toUpperCase() + w.slice(1)).join('');
-  const wanted = names.map(pascal).map((n) => n.toLowerCase());
-  return exports.find((e) => wanted.includes(e.toLowerCase())) ?? exports[0] ?? null;
+  const wanted = names.map(pascal).map((n) => n.toLowerCase()).filter(Boolean);
+  const exact = exports.find((e) => wanted.includes(e.toLowerCase()));
+  if (exact) return exact;
+  const prefixed = exports.filter((e) => wanted.some((w) => e.toLowerCase().startsWith(w))).sort((a, b) => a.length - b.length);
+  return prefixed[0] ?? exports[0] ?? null;
+}
+
+// ---------------------------------------------------------------------------
+// add: clashes, kit files, packages, suggestions, --dir
+// ---------------------------------------------------------------------------
+
+/**
+ * The entry in a folder listing that differs from `name` only by case (`Skeleton.tsx` for `skeleton.tsx`), or null.
+ * macOS and Windows treat the two as one file, so writing ours would replace theirs; on Linux both would live side
+ * by side and break the repo for anyone who clones it on a Mac.
+ */
+export function caseClash(entries, name) {
+  const lower = name.toLowerCase();
+  return entries.find((e) => e !== name && e.toLowerCase() === lower) ?? null;
+}
+
+/** Whether a file came from ExpoKit (kit.tsx itself, or a component built on it) rather than being the user's own. */
+export function looksLikeKitFile(text) {
+  return /\bfrom\s+['"][^'"]*\/lib\/kit['"]/.test(text) || kitVersion(text) !== null;
+}
+
+const bareName = (spec) => spec.replace(/^(@?[^@]+)@.*$/, '$1');
+
+/** `deps` (npm specs, `pkg@1.2` allowed) that package.json doesn't list yet, deduped by package name. */
+export function missingPackages(deps, pkg) {
+  const has = (name) =>
+    [pkg?.dependencies, pkg?.devDependencies].some((d) => d && typeof d === 'object' && Object.hasOwn(d, name));
+  const seen = new Set();
+  return (deps ?? []).filter((spec) => {
+    const name = bareName(spec);
+    if (seen.has(name) || has(name)) return false;
+    seen.add(name);
+    return true;
+  });
+}
+
+function editDistance(a, b) {
+  let prev = Array.from({ length: b.length + 1 }, (_, j) => j);
+  for (let i = 1; i <= a.length; i += 1) {
+    const row = [i];
+    for (let j = 1; j <= b.length; j += 1) {
+      row[j] = Math.min(prev[j] + 1, row[j - 1] + 1, prev[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+    }
+    prev = row;
+  }
+  return prev[b.length];
+}
+
+/** Up to 3 item names close to a mistyped one ("buton" → button, "sheet-bottom" → bottom-sheet), closest first. */
+export function suggestItemNames(input, names) {
+  const want = String(input).toLowerCase();
+  const sorted = (s) => s.split('-').filter(Boolean).sort().join('-');
+  const flat = (s) => s.replace(/-/g, '');
+  const scored = [];
+  for (const name of new Set(names)) {
+    const d = editDistance(want, name);
+    let score = null;
+    if (sorted(want) === sorted(name) || flat(want) === flat(name)) score = 0;
+    else if (Math.min(want.length, name.length) >= 3 && (want.includes(name) || name.includes(want))) score = 1;
+    else if (d <= Math.max(1, Math.floor(want.length / 3))) score = 1 + d;
+    if (score !== null) scored.push({ name, score, d });
+  }
+  return scored
+    .sort((a, b) => a.score - b.score || a.d - b.d || a.name.localeCompare(b.name))
+    .slice(0, 3)
+    .map((s) => s.name);
+}
+
+/**
+ * Registry files import each other as `@/components/…` and `@/lib/…`. When components.json maps those to other
+ * aliases (or `add --dir` moved the components), point the imports there. Leaves everything else untouched.
+ */
+export function rewriteKitImports(text, aliases) {
+  let out = text;
+  for (const key of ['components', 'lib', 'hooks']) {
+    const to = aliases?.[key];
+    if (typeof to !== 'string' || to === `@/${key}`) continue;
+    out = out.replace(new RegExp(`(['"])@/${key}/`, 'g'), (_, q) => `${q}${to.replace(/\/+$/, '')}/`);
+  }
+  return out;
+}
+
+/**
+ * The folder `@/*` points at in a parsed tsconfig ("src" for `./src/*`, "" for `./*`), or null when there is no
+ * such alias. Used to tell whether an `add --dir` folder can be imported as `@/…`.
+ */
+export function aliasRootFromTsconfig(tsconfig) {
+  const target = tsconfig?.compilerOptions?.paths?.['@/*']?.[0];
+  if (typeof target !== 'string' || !target.endsWith('*')) return null;
+  const base = typeof tsconfig.compilerOptions.baseUrl === 'string' ? tsconfig.compilerOptions.baseUrl : '.';
+  const joined = path.posix.normalize(path.posix.join(base, target.slice(0, -1)));
+  const clean = joined.replace(/\/+$/, '');
+  return clean === '.' ? '' : clean;
+}
+
+/**
+ * `@/…` alias for a project-relative folder under the alias root (`src/components/kit` → `@/components/kit` when
+ * `@/*` is `./src/*`), or null when the folder is outside it, is the root itself, or isn't a plain folder path.
+ */
+export function aliasTargetForDir(dir, aliasRoot) {
+  const rel = String(dir).replace(/\\/g, '/').replace(/^\.\//, '').replace(/\/+$/, '');
+  if (!rel || rel.startsWith('/') || /^[A-Za-z]:/.test(rel) || !/^[A-Za-z0-9._()/-]+$/.test(rel)) return null;
+  if (rel.split('/').some((seg) => seg === '..' || seg === '.' || seg === '')) return null;
+  if (!aliasRoot) return `@/${rel}`;
+  return rel.startsWith(`${aliasRoot}/`) ? `@/${rel.slice(aliasRoot.length + 1)}` : null;
 }
 
 /** Union of dependency lists, order preserved. */
@@ -364,6 +474,203 @@ export function mergeDependencies(...lists) {
   return out;
 }
 
+// ---------------------------------------------------------------------------
+// Install records (components.json `files` / `installed`), diffs, init theme
+// ---------------------------------------------------------------------------
+
+/** sha256 (hex) of a file's text, line endings normalised so a git autocrlf checkout hashes the same. */
+export function contentHash(text) {
+  return createHash('sha256').update(String(text).replace(/\r\n/g, '\n'), 'utf8').digest('hex');
+}
+
+const HASH = /^[0-9a-f]{64}$/;
+
+/**
+ * The hash components.json recorded for a project file, or null. The file comes from the repo, so it is untrusted:
+ * only own, well-formed entries count, and its keys are only ever looked up — never used as paths to read or write.
+ */
+export function recordedHash(files, rel) {
+  if (!files || typeof files !== 'object' || Array.isArray(files) || !Object.hasOwn(files, rel)) return null;
+  const value = files[rel];
+  return typeof value === 'string' && HASH.test(value) ? value : null;
+}
+
+/**
+ * A project file against the registry's copy:
+ *   current (same as upstream) · pristine (as the CLI wrote it, upstream moved on) ·
+ *   modified (changed since it was written) · untracked (differs, and there is no record to tell why)
+ */
+export function fileStatus(recorded, have, upstream) {
+  const norm = (t) => String(t).replace(/\r\n/g, '\n');
+  if (norm(have) === norm(upstream)) return 'current';
+  if (!recorded) return 'untracked';
+  return contentHash(have) === recorded ? 'pristine' : 'modified';
+}
+
+/**
+ * components.json `installed`, cleaned: `{ name: { version?, kitVersion?, dir? } }`. Older CLIs stored just the
+ * version string. Unknown names and odd values are dropped (the file is untrusted); `dir` is checked where it's used.
+ */
+export function normalizeInstalled(raw) {
+  const out = {};
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return out;
+  for (const [name, value] of Object.entries(raw)) {
+    if (!isValidItemName(name)) continue;
+    if (typeof value === 'string') {
+      out[name] = value.length <= 40 ? { version: value } : {};
+      continue;
+    }
+    if (!value || typeof value !== 'object' || Array.isArray(value)) continue;
+    const entry = {};
+    if (typeof value.version === 'string' && value.version.length <= 40) entry.version = value.version;
+    if (Number.isInteger(value.kitVersion) && value.kitVersion > 0) entry.kitVersion = value.kitVersion;
+    if (typeof value.dir === 'string' && value.dir.length <= 200) entry.dir = value.dir;
+    out[name] = entry;
+  }
+  return out;
+}
+
+const splitLines = (text) => {
+  const lines = String(text).replace(/\r\n/g, '\n').split('\n');
+  if (lines[lines.length - 1] === '') lines.pop();
+  return lines;
+};
+
+/** Edit script (' ', '-', '+' per line) by LCS; past `maxCells` the changed middle is one remove + add block. */
+function diffOps(a, b, maxCells) {
+  let pre = 0;
+  while (pre < a.length && pre < b.length && a[pre] === b[pre]) pre += 1;
+  let suf = 0;
+  while (suf < a.length - pre && suf < b.length - pre && a[a.length - 1 - suf] === b[b.length - 1 - suf]) suf += 1;
+  const x = a.slice(pre, a.length - suf);
+  const y = b.slice(pre, b.length - suf);
+  const ops = a.slice(0, pre).map((line) => [' ', line]);
+  if (x.length * y.length > maxCells) {
+    ops.push(...x.map((line) => ['-', line]), ...y.map((line) => ['+', line]));
+  } else {
+    const w = y.length + 1;
+    const lcs = new Uint32Array((x.length + 1) * w);
+    for (let i = x.length - 1; i >= 0; i -= 1) {
+      for (let j = y.length - 1; j >= 0; j -= 1) {
+        lcs[i * w + j] = x[i] === y[j] ? lcs[(i + 1) * w + j + 1] + 1 : Math.max(lcs[(i + 1) * w + j], lcs[i * w + j + 1]);
+      }
+    }
+    let i = 0;
+    let j = 0;
+    while (i < x.length || j < y.length) {
+      if (i < x.length && j < y.length && x[i] === y[j]) {
+        ops.push([' ', x[i]]);
+        i += 1;
+        j += 1;
+      } else if (i < x.length && (j === y.length || lcs[(i + 1) * w + j] >= lcs[i * w + j + 1])) {
+        ops.push(['-', x[i]]);
+        i += 1;
+      } else {
+        ops.push(['+', y[j]]);
+        j += 1;
+      }
+    }
+  }
+  ops.push(...a.slice(a.length - suf).map((line) => [' ', line]));
+  return ops;
+}
+
+/** A unified diff (`--- from` / `+++ to` / `@@` hunks) of two texts, or '' when they match (CRLF vs LF is no change). */
+export function unifiedDiff(a, b, { from = 'a', to = 'b', context = 3, maxCells = 4_000_000 } = {}) {
+  const na = String(a).replace(/\r\n/g, '\n');
+  const nb = String(b).replace(/\r\n/g, '\n');
+  if (na === nb) return '';
+  const head = `--- ${from}\n+++ ${to}\n`;
+  const ops = diffOps(splitLines(na), splitLines(nb), maxCells);
+  const changed = ops.flatMap((op, i) => (op[0] === ' ' ? [] : [i]));
+  if (!changed.length) return `${head}(only the newline at the end of the file differs)\n`;
+
+  // Line numbers before each op, for the @@ headers.
+  const at = [];
+  let la = 1;
+  let lb = 1;
+  for (const [kind] of ops) {
+    at.push([la, lb]);
+    if (kind !== '+') la += 1;
+    if (kind !== '-') lb += 1;
+  }
+  let out = head;
+  let k = 0;
+  while (k < changed.length) {
+    const start = Math.max(0, changed[k] - context);
+    let end = changed[k];
+    while (k + 1 < changed.length && changed[k + 1] - end <= context * 2 + 1) end = changed[(k += 1)];
+    k += 1;
+    end = Math.min(ops.length - 1, end + context);
+    const slice = ops.slice(start, end + 1);
+    const countA = slice.filter(([kind]) => kind !== '+').length;
+    const countB = slice.filter(([kind]) => kind !== '-').length;
+    const [sa, sb] = at[start];
+    out += `@@ -${countA ? sa : sa - 1},${countA} +${countB ? sb : sb - 1},${countB} @@\n`;
+    out += slice.map(([kind, line]) => `${kind}${line}\n`).join('');
+  }
+  return out;
+}
+
+/** `init` theme answers, checked: they are written into a .tsx file, so only plain values get through. */
+export function themeOptions({ brand, font, radius, scheme } = {}) {
+  const out = { brand: null, font: null, radius: null, scheme: 'system' };
+  if (brand !== undefined && brand !== null && brand !== '') {
+    const hex = String(brand).trim().replace(/^#?/, '#').toLowerCase();
+    if (!/^#([0-9a-f]{3}|[0-9a-f]{6})$/.test(hex)) throw new CliError(`--brand must be a hex colour like #6366f1 (got ${JSON.stringify(brand)}).`);
+    out.brand = hex.length === 4 ? `#${[...hex.slice(1)].map((c) => c + c).join('')}` : hex;
+  }
+  if (font !== undefined && font !== null && font !== '') {
+    const name = String(font).trim();
+    if (!/^[A-Za-z0-9][A-Za-z0-9 _-]{0,63}$/.test(name)) throw new CliError(`--font must be a font family name like Inter (got ${JSON.stringify(font)}).`);
+    out.font = name;
+  }
+  if (radius !== undefined && radius !== null && radius !== '') {
+    const text = String(radius).trim();
+    if (!/^\d{1,2}$/.test(text) || Number(text) > 48) throw new CliError(`--radius must be a whole number of points from 0 to 48 (got ${JSON.stringify(radius)}).`);
+    out.radius = Number(text);
+  }
+  if (scheme !== undefined && scheme !== null && scheme !== '') {
+    const s = String(scheme).trim().toLowerCase();
+    if (!['system', 'light', 'dark'].includes(s)) throw new CliError(`--scheme must be light, dark or system (got ${JSON.stringify(scheme)}).`);
+    out.scheme = s;
+  }
+  return out;
+}
+
+/** The `AppTheme` wrapper `init` writes next to kit.tsx: KitProvider with the chosen theme, and a place for your tokens. */
+export function kitThemeSource({ brand, font, radius, scheme }, libAlias = '@/lib') {
+  const props = [`scheme="${scheme}"`];
+  if (brand) props.push(`accent="${brand}"`);
+  if (radius !== null && radius !== undefined) props.push(`radius={${radius}}`);
+  if (font) props.push(`fontFamily="${font}"`);
+  return `import type { ReactNode } from 'react';
+
+import { KitProvider } from '${String(libAlias).replace(/\/+$/, '')}/kit';
+
+/**
+ * Your app's ExpoKit theme, written by \`expo-kit init\`. Wrap your root layout in it:
+ *   <AppTheme><Stack /></AppTheme>
+ * Already have a design system? Point the kit tokens at it in \`colors\`:
+ * https://expokit.in/docs/design-tokens
+ */
+export function AppTheme({ children }: { children: ReactNode }) {
+  return (
+    <KitProvider
+      ${props.join('\n      ')}
+      colors={{
+        // light: { background: tokens.surface, foreground: tokens.text, muted: tokens.subtle, border: tokens.line },
+        light: {},
+        dark: {},
+      }}
+    >
+      {children}
+    </KitProvider>
+  );
+}
+`;
+}
+
 // ---------------------------------------------------------------------------
 // Site URL + token guard
 // ---------------------------------------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expokit/cli",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "mcpName": "io.github.Anshkaran7/expokit",
   "description": "Animated UI components for Expo and React Native — a shadcn-style CLI that copies buttons, inputs, cards, charts and full screens into your app",
   "license": "MIT",

package/registry/_docs/action-sheet.json

@@ -35,7 +35,7 @@
     [
       "cancelLabel",
       "string | null",
-      "\"Cancel\"",
+      "labels.cancel",
       "Separate cancel button; null hides it."
     ],
     [

package/registry/_docs/alert.json

@@ -86,6 +86,12 @@
       "tone colour",
       "Override the tone colour."
     ],
+    [
+      "dismissLabel",
+      "string",
+      "labels.dismiss",
+      "Screen-reader name of the dismiss button. Set it app-wide with KitProvider's labels."
+    ],
     [
       "style",
       "StyleProp<ViewStyle>",

package/registry/_docs/bottom-sheet.json

@@ -68,6 +68,12 @@
       "with a title",
       "Round ✕ in the header (shown when dismissible, there's a title and no headerRight)."
     ],
+    [
+      "closeLabel",
+      "string",
+      "labels.close",
+      "Screen-reader name of the close button (default: the kit's labels.close)."
+    ],
     [
       "handle",
       "boolean",

package/registry/_docs/bullet.json

@@ -25,6 +25,12 @@
       "string",
       "auto summary",
       "What screen readers announce; defaults to a summary of the data."
+    ],
+    [
+      "accessibilityHint",
+      "string",
+      "\"Swipe up or down to read each …\"",
+      "Screen-reader hint for the swipe-to-read gesture; pass your own to translate it."
     ]
   ],
   "behavior": [],

package/registry/_docs/dialog.json

@@ -71,7 +71,7 @@
     [
       "confirmLabel / cancelLabel",
       "string / string | null",
-      "\"Continue\" / \"Cancel\"",
+      "labels.continue (destructive: labels.delete) / labels.cancel",
       "Labels for the default buttons; cancelLabel null leaves a single button."
     ],
     [

package/registry/_docs/drawer.json

@@ -95,7 +95,7 @@
     [
       "accessibilityLabel",
       "string",
-      "\"Navigation drawer\"",
+      "labels.navigationDrawer",
       "Panel label."
     ],
     [
@@ -112,9 +112,9 @@
     ],
     [
       "DrawerHeader",
-      "{ title?, subtitle?, leading?, showClose?, onClose? }",
+      "{ title?, subtitle?, leading?, showClose?, onClose?, closeLabel? }",
       "—",
-      "Title chrome for the header slot."
+      "Title chrome for the header slot. closeLabel names the close button (default labels.closeMenu)."
     ],
     [
       "DrawerItem",

package/registry/_docs/glass-search-bar.json

@@ -17,7 +17,7 @@
     [
       "placeholder",
       "string",
-      "\"Search\"",
+      "labels.search",
       "Placeholder, also the field's accessibility label."
     ],
     [

package/registry/_docs/grain.json

@@ -1,7 +1,12 @@
 {
   "name": "grain",
   "category": "Display",
-  "aliases": [],
+  "aliases": [
+    "grain-gradient",
+    "gradient",
+    "mesh-gradient",
+    "noise"
+  ],
   "exportName": "GrainGradient",
   "files": [
     "src/components/ui/grain.tsx"

package/registry/_docs/isometric-bar.json

@@ -73,6 +73,12 @@
       "string",
       "auto summary",
       "What screen readers announce; defaults to a summary of the data."
+    ],
+    [
+      "accessibilityHint",
+      "string",
+      "\"Swipe up or down to read each …\"",
+      "Screen-reader hint for the swipe-to-read gesture; pass your own to translate it."
     ]
   ],
   "behavior": [],

package/registry/_docs/liquidglass-tab.json

@@ -25,7 +25,7 @@
     {
       "name": "Preview",
       "title": "Preview",
-      "code": "import React, { useEffect, useRef, useState } from 'react';\nimport { Animated, Image, Platform, Pressable, ScrollView, StyleSheet, Text, View, type LayoutChangeEvent, type NativeScrollEvent, type NativeSyntheticEvent } from 'react-native';\nimport { BlurView } from 'expo-blur';\nimport Svg, { Circle, Path } from 'react-native-svg';\nimport { useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\nconst FONT_CAP = 1.35;\n\ntype TabKey = 'index' | 'explore' | 'alerts' | 'profile';\n\nconst TABS: { key: TabKey; title: string; badge?: string; icon: (c: string) => React.ReactNode }[] = [\n  { key: 'index', title: 'Home', icon: (c) => <Path d=\"M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z\" stroke={c} strokeWidth={2} strokeLinejoin=\"round\" fill=\"none\" /> },\n  {\n    key: 'explore',\n    title: 'Explore',\n    icon: (c) => (\n      <>\n        <Circle cx={12} cy={12} r={9} stroke={c} strokeWidth={2} fill=\"none\" />\n        <Path d=\"m15.5 8.5-2 5-5 2 2-5z\" stroke={c} strokeWidth={2} strokeLinejoin=\"round\" fill=\"none\" />\n      </>\n    ),\n  },\n  { key: 'alerts', title: 'Alerts', badge: '3', icon: (c) => <Path d=\"M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21h4\" stroke={c} strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\" /> },\n  {\n    key: 'profile',\n    title: 'Profile',\n    icon: (c) => (\n      <>\n        <Circle cx={12} cy={8} r={4} stroke={c} strokeWidth={2} fill=\"none\" />\n        <Path d=\"M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6\" stroke={c} strokeWidth={2} strokeLinecap=\"round\" fill=\"none\" />\n      </>\n    ),\n  },\n];\n\nconst PHOTOS = [\n  'photo-1501785888041-af3ef285b470',\n  'photo-1469474968028-56623f02e42e',\n  'photo-1500530855697-b586d89ba3ee',\n  'photo-1470071459604-3b5ec3a7fe05',\n  'photo-1441974231531-c6227db76b6e',\n].map((id) => `https://images.unsplash.com/${id}?w=700&auto=format&fit=crop`);\n\nconst COPY: Record<TabKey, { title: string; sub: string }> = {\n  index: { title: 'For you', sub: 'Places picked for this weekend' },\n  explore: { title: 'Explore', sub: 'Trending trails near you' },\n  alerts: { title: 'Alerts', sub: '3 new since yesterday' },\n  profile: { title: 'Profile', sub: 'Trips, saves and settings' },\n};\n\nconst BAR_H = 64;\n\nfunction GlassBar({\n  value,\n  onChange,\n  dark,\n  collapsed,\n  onExpand,\n}: {\n  value: TabKey;\n  onChange: (k: TabKey) => void;\n  dark: boolean;\n  collapsed: boolean;\n  onExpand: () => void;\n}) {\n  const [w, setW] = useState(0);\n  // 0 = full bar, 1 = folded into a circle (JS driver: it animates the bar's width).\n  const fold = useRef(new Animated.Value(0)).current;\n  useEffect(() => {\n    Animated.spring(fold, { toValue: collapsed ? 1 : 0, useNativeDriver: false, damping: 29, stiffness: 220, mass: 0.9 }).start();\n  }, [collapsed, fold]);\n  const width = fold.interpolate({ inputRange: [0, 1], outputRange: [w || 1, BAR_H] });\n  const rowOpacity = fold.interpolate({ inputRange: [0, 0.45], outputRange: [1, 0], extrapolate: 'clamp' });\n  const dotOpacity = fold.interpolate({ inputRange: [0.55, 1], outputRange: [0, 1], extrapolate: 'clamp' });\n  const dotScale = fold.interpolate({ inputRange: [0.55, 1], outputRange: [0.6, 1], extrapolate: 'clamp' });\n  const active = TABS.find((t) => t.key === value) ?? TABS[0];\n  const x = useRef(new Animated.Value(0)).current;\n  const stretch = useRef(new Animated.Value(1)).current;\n  const index = TABS.findIndex((t) => t.key === value);\n  const itemW = w ? (w - 8) / TABS.length : 0;\n  const tint = dark ? '#0a84ff' : '#007aff';\n  const inactive = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';\n\n  useEffect(() => {\n    if (!itemW) return;\n    Animated.parallel([\n      Animated.spring(x, { toValue: index * itemW, useNativeDriver: true, damping: 29, stiffness: 220, mass: 0.9 }),\n      Animated.sequence([\n        Animated.timing(stretch, { toValue: 1.22, duration: 110, useNativeDriver: true }),\n        Animated.spring(stretch, { toValue: 1, useNativeDriver: true, damping: 33, stiffness: 260 }),\n      ]),\n    ]).start();\n  }, [index, itemW, x, stretch]);\n\n  return (\n    <View pointerEvents=\"box-none\" style={styles.host} onLayout={(e: LayoutChangeEvent) => setW(Math.round(e.nativeEvent.layout.width))}>\n      <Animated.View style={[styles.shadow, dark ? styles.shadowDark : styles.shadowLight, w ? { width } : null]}>\n        <View style={[styles.glass, { borderColor: dark ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.8)' }]}>\n          <BlurView intensity={Platform.OS === 'ios' ? 70 : 40} tint={dark ? 'dark' : 'light'} style={[StyleSheet.absoluteFill, styles.round]} />\n          <View style={[StyleSheet.absoluteFill, { backgroundColor: dark ? 'rgba(28,28,34,0.5)' : 'rgba(255,255,255,0.55)' }]} />\n          <View style={[styles.rim, { backgroundColor: dark ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.95)' }]} />\n          {itemW ? (\n            <Animated.View\n              style={[\n                styles.bubble,\n                {\n                  width: itemW,\n                  backgroundColor: dark ? 'rgba(255,255,255,0.14)' : 'rgba(0,0,0,0.06)',\n                  transform: [{ translateX: x }, { scaleX: stretch }, { scaleY: stretch.interpolate({ inputRange: [1, 1.22], outputRange: [1, 0.88] }) }],\n                },\n              ]}\n            />\n          ) : null}\n          <Animated.View pointerEvents={collapsed ? 'none' : 'auto'} style={[styles.row, w ? { width: w } : null, { opacity: rowOpacity }]}>\n            {TABS.map((t) => {\n              const on = t.key === value;\n              const c = on ? tint : inactive;\n              return (\n                <Pressable\n                  key={t.key}\n                  onPress={() => onChange(t.key)}\n                  accessibilityRole=\"tab\"\n                  accessibilityState={{ selected: on }}\n                  accessibilityLabel={t.title}\n                  style={styles.item}\n                >\n                  <View>\n                    <Svg width={24} height={24} viewBox=\"0 0 24 24\">\n                      {t.icon(c)}\n                    </Svg>\n                    {t.badge ? (\n                      <View style={styles.badge}>\n                        <Text maxFontSizeMultiplier={FONT_CAP} style={styles.badgeText}>{t.badge}</Text>\n                      </View>\n                    ) : null}\n                  </View>\n                  <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.label, { color: c }]}>{t.title}</Text>\n                </Pressable>\n              );\n            })}\n          </Animated.View>\n          <Animated.View pointerEvents={collapsed ? 'auto' : 'none'} style={[styles.dot, { opacity: dotOpacity, transform: [{ scale: dotScale }] }]}>\n            <Pressable onPress={onExpand} accessibilityRole=\"button\" accessibilityLabel={`${active.title}. Show tab bar`} style={styles.dotPress}>\n              <Svg width={26} height={26} viewBox=\"0 0 24 24\">\n                {active.icon(tint)}\n              </Svg>\n            </Pressable>\n          </Animated.View>\n        </View>\n      </Animated.View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  root: { flex: 1 },\n  feed: { paddingHorizontal: 16, paddingTop: 12, paddingBottom: 120, gap: 12 },\n  large: { fontSize: 32, lineHeight: 38, letterSpacing: -0.8, fontWeight: '400' },\n  sub: { fontSize: 15, marginTop: -6, marginBottom: 6 },\n  card: { height: 190, borderRadius: 22, overflow: 'hidden', justifyContent: 'flex-end', padding: 16 },\n  cardShade: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.18)' },\n  cardTitle: { color: '#ffffff', fontSize: 20, fontWeight: '400', letterSpacing: -0.3 },\n  host: { position: 'absolute', left: 20, right: 20, bottom: 24 },\n  shadow: { height: BAR_H, borderRadius: BAR_H / 2 },\n  shadowLight: { boxShadow: '0 10px 28px -8px rgba(0,0,0,0.22)' },\n  shadowDark: { boxShadow: '0 10px 28px -8px rgba(0,0,0,0.7)' },\n  glass: { flex: 1, borderRadius: 32, overflow: 'hidden', borderWidth: StyleSheet.hairlineWidth * 2 },\n  round: { borderRadius: 32 },\n  rim: { position: 'absolute', top: 0, left: 24, right: 24, height: 1 },\n  bubble: { position: 'absolute', top: 4, bottom: 4, left: 4, borderRadius: 28 },\n  row: { flex: 1, flexDirection: 'row', paddingHorizontal: 4 },\n  dot: { position: 'absolute', top: 0, left: 0, width: BAR_H, height: BAR_H },\n  dotPress: { flex: 1, alignItems: 'center', justifyContent: 'center' },\n  item: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 2 },\n  label: { fontSize: 10.5, fontWeight: '400' },\n  badge: { position: 'absolute', top: -4, right: -10, minWidth: 17, minHeight: 17, borderRadius: 9, paddingHorizontal: 4, backgroundColor: '#ff3b30', alignItems: 'center', justifyContent: 'center' },\n  badgeText: { color: '#ffffff', fontSize: 10.5, fontWeight: '400' },\n});\n\nexport default function Preview() {\n  const { dark } = useKit();\n  const [tab, setTab] = useState<TabKey>('index');\n  const [collapsed, setCollapsed] = useState(false);\n  const lastY = useRef(0);\n  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {\n    const y = e.nativeEvent.contentOffset.y;\n    const dy = y - lastY.current;\n    lastY.current = y;\n    if (y < 24) setCollapsed(false);\n    else if (dy > 6) setCollapsed(true);\n    else if (dy < -6) setCollapsed(false);\n  };\n  const fg = dark ? '#ffffff' : '#1c1c1e';\n  const sub = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';\n  const offset = TABS.findIndex((t) => t.key === tab);\n  const copy = COPY[tab];\n\n  return (\n    <View style={[styles.root, { backgroundColor: dark ? '#000000' : '#f2f2f7' }]}>\n      <ScrollView contentContainerStyle={styles.feed} showsVerticalScrollIndicator={false} onScroll={onScroll} scrollEventThrottle={16}>\n        <Text style={[styles.large, { color: fg }]}>{copy.title}</Text>\n        <Text style={[styles.sub, { color: sub }]}>{copy.sub}</Text>\n        {[0, 1, 2, 3, 4].map((i) => {\n          const p = PHOTOS[(i + offset) % PHOTOS.length];\n          return (\n            <View key={`${tab}-${i}`} style={styles.card}>\n              <Image source={{ uri: p }} alt=\"\" style={StyleSheet.absoluteFill} resizeMode=\"cover\" />\n              <View style={styles.cardShade} />\n              <Text maxFontSizeMultiplier={FONT_CAP} style={styles.cardTitle}>{['Lake Braies', 'Dolomites', 'Valley trail', 'Blue ridge', 'Old forest'][(i + offset) % 5]}</Text>\n            </View>\n          );\n        })}\n      </ScrollView>\n      <GlassBar value={tab} onChange={setTab} dark={dark} collapsed={collapsed} onExpand={() => setCollapsed(false)} />\n    </View>\n  );\n}\n"
+      "code": "import React, { useEffect, useRef, useState } from 'react';\nimport { Animated, Image, Platform, Pressable, ScrollView, StyleSheet, Text, View, type LayoutChangeEvent, type NativeScrollEvent, type NativeSyntheticEvent } from 'react-native';\nimport { BlurView } from 'expo-blur';\nimport Svg, { Circle, Path } from 'react-native-svg';\nimport { useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\nconst FONT_CAP = 1.35;\n\ntype TabKey = 'index' | 'explore' | 'alerts' | 'profile';\n\ntype DemoTab = { key: TabKey; title: string; badge?: string; icon: (c: string) => React.ReactNode };\n\nconst TABS: [DemoTab, ...DemoTab[]] = [\n  { key: 'index', title: 'Home', icon: (c) => <Path d=\"M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z\" stroke={c} strokeWidth={2} strokeLinejoin=\"round\" fill=\"none\" /> },\n  {\n    key: 'explore',\n    title: 'Explore',\n    icon: (c) => (\n      <>\n        <Circle cx={12} cy={12} r={9} stroke={c} strokeWidth={2} fill=\"none\" />\n        <Path d=\"m15.5 8.5-2 5-5 2 2-5z\" stroke={c} strokeWidth={2} strokeLinejoin=\"round\" fill=\"none\" />\n      </>\n    ),\n  },\n  { key: 'alerts', title: 'Alerts', badge: '3', icon: (c) => <Path d=\"M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21h4\" stroke={c} strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\" /> },\n  {\n    key: 'profile',\n    title: 'Profile',\n    icon: (c) => (\n      <>\n        <Circle cx={12} cy={8} r={4} stroke={c} strokeWidth={2} fill=\"none\" />\n        <Path d=\"M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6\" stroke={c} strokeWidth={2} strokeLinecap=\"round\" fill=\"none\" />\n      </>\n    ),\n  },\n];\n\nconst PHOTOS = [\n  'photo-1501785888041-af3ef285b470',\n  'photo-1469474968028-56623f02e42e',\n  'photo-1500530855697-b586d89ba3ee',\n  'photo-1470071459604-3b5ec3a7fe05',\n  'photo-1441974231531-c6227db76b6e',\n].map((id) => `https://images.unsplash.com/${id}?w=700&auto=format&fit=crop`);\n\nconst COPY: Record<TabKey, { title: string; sub: string }> = {\n  index: { title: 'For you', sub: 'Places picked for this weekend' },\n  explore: { title: 'Explore', sub: 'Trending trails near you' },\n  alerts: { title: 'Alerts', sub: '3 new since yesterday' },\n  profile: { title: 'Profile', sub: 'Trips, saves and settings' },\n};\n\nconst BAR_H = 64;\n\nfunction GlassBar({\n  value,\n  onChange,\n  dark,\n  collapsed,\n  onExpand,\n}: {\n  value: TabKey;\n  onChange: (k: TabKey) => void;\n  dark: boolean;\n  collapsed: boolean;\n  onExpand: () => void;\n}) {\n  const [w, setW] = useState(0);\n  // 0 = full bar, 1 = folded into a circle (JS driver: it animates the bar's width).\n  const fold = useRef(new Animated.Value(0)).current;\n  useEffect(() => {\n    Animated.spring(fold, { toValue: collapsed ? 1 : 0, useNativeDriver: false, damping: 29, stiffness: 220, mass: 0.9 }).start();\n  }, [collapsed, fold]);\n  const width = fold.interpolate({ inputRange: [0, 1], outputRange: [w || 1, BAR_H] });\n  const rowOpacity = fold.interpolate({ inputRange: [0, 0.45], outputRange: [1, 0], extrapolate: 'clamp' });\n  const dotOpacity = fold.interpolate({ inputRange: [0.55, 1], outputRange: [0, 1], extrapolate: 'clamp' });\n  const dotScale = fold.interpolate({ inputRange: [0.55, 1], outputRange: [0.6, 1], extrapolate: 'clamp' });\n  const active = TABS.find((t) => t.key === value) ?? TABS[0];\n  const x = useRef(new Animated.Value(0)).current;\n  const stretch = useRef(new Animated.Value(1)).current;\n  const index = TABS.findIndex((t) => t.key === value);\n  const itemW = w ? (w - 8) / TABS.length : 0;\n  const tint = dark ? '#0a84ff' : '#007aff';\n  const inactive = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';\n\n  useEffect(() => {\n    if (!itemW) return;\n    Animated.parallel([\n      Animated.spring(x, { toValue: index * itemW, useNativeDriver: true, damping: 29, stiffness: 220, mass: 0.9 }),\n      Animated.sequence([\n        Animated.timing(stretch, { toValue: 1.22, duration: 110, useNativeDriver: true }),\n        Animated.spring(stretch, { toValue: 1, useNativeDriver: true, damping: 33, stiffness: 260 }),\n      ]),\n    ]).start();\n  }, [index, itemW, x, stretch]);\n\n  return (\n    <View pointerEvents=\"box-none\" style={styles.host} onLayout={(e: LayoutChangeEvent) => setW(Math.round(e.nativeEvent.layout.width))}>\n      <Animated.View style={[styles.shadow, dark ? styles.shadowDark : styles.shadowLight, w ? { width } : null]}>\n        <View style={[styles.glass, { borderColor: dark ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.8)' }]}>\n          <BlurView intensity={Platform.OS === 'ios' ? 70 : 40} tint={dark ? 'dark' : 'light'} style={[StyleSheet.absoluteFill, styles.round]} />\n          <View style={[StyleSheet.absoluteFill, { backgroundColor: dark ? 'rgba(28,28,34,0.5)' : 'rgba(255,255,255,0.55)' }]} />\n          <View style={[styles.rim, { backgroundColor: dark ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.95)' }]} />\n          {itemW ? (\n            <Animated.View\n              style={[\n                styles.bubble,\n                {\n                  width: itemW,\n                  backgroundColor: dark ? 'rgba(255,255,255,0.14)' : 'rgba(0,0,0,0.06)',\n                  transform: [{ translateX: x }, { scaleX: stretch }, { scaleY: stretch.interpolate({ inputRange: [1, 1.22], outputRange: [1, 0.88] }) }],\n                },\n              ]}\n            />\n          ) : null}\n          <Animated.View pointerEvents={collapsed ? 'none' : 'auto'} style={[styles.row, w ? { width: w } : null, { opacity: rowOpacity }]}>\n            {TABS.map((t) => {\n              const on = t.key === value;\n              const c = on ? tint : inactive;\n              return (\n                <Pressable\n                  key={t.key}\n                  onPress={() => onChange(t.key)}\n                  accessibilityRole=\"tab\"\n                  accessibilityState={{ selected: on }}\n                  accessibilityLabel={t.title}\n                  style={styles.item}\n                >\n                  <View>\n                    <Svg width={24} height={24} viewBox=\"0 0 24 24\">\n                      {t.icon(c)}\n                    </Svg>\n                    {t.badge ? (\n                      <View style={styles.badge}>\n                        <Text maxFontSizeMultiplier={FONT_CAP} style={styles.badgeText}>{t.badge}</Text>\n                      </View>\n                    ) : null}\n                  </View>\n                  <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.label, { color: c }]}>{t.title}</Text>\n                </Pressable>\n              );\n            })}\n          </Animated.View>\n          <Animated.View pointerEvents={collapsed ? 'auto' : 'none'} style={[styles.dot, { opacity: dotOpacity, transform: [{ scale: dotScale }] }]}>\n            <Pressable onPress={onExpand} accessibilityRole=\"button\" accessibilityLabel={`${active.title}. Show tab bar`} style={styles.dotPress}>\n              <Svg width={26} height={26} viewBox=\"0 0 24 24\">\n                {active.icon(tint)}\n              </Svg>\n            </Pressable>\n          </Animated.View>\n        </View>\n      </Animated.View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  root: { flex: 1 },\n  feed: { paddingHorizontal: 16, paddingTop: 12, paddingBottom: 120, gap: 12 },\n  large: { fontSize: 32, lineHeight: 38, letterSpacing: -0.8, fontWeight: '400' },\n  sub: { fontSize: 15, marginTop: -6, marginBottom: 6 },\n  card: { height: 190, borderRadius: 22, overflow: 'hidden', justifyContent: 'flex-end', padding: 16 },\n  cardShade: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.18)' },\n  cardTitle: { color: '#ffffff', fontSize: 20, fontWeight: '400', letterSpacing: -0.3 },\n  host: { position: 'absolute', left: 20, right: 20, bottom: 24 },\n  shadow: { height: BAR_H, borderRadius: BAR_H / 2 },\n  shadowLight: { boxShadow: '0 10px 28px -8px rgba(0,0,0,0.22)' },\n  shadowDark: { boxShadow: '0 10px 28px -8px rgba(0,0,0,0.7)' },\n  glass: { flex: 1, borderRadius: 32, overflow: 'hidden', borderWidth: StyleSheet.hairlineWidth * 2 },\n  round: { borderRadius: 32 },\n  rim: { position: 'absolute', top: 0, left: 24, right: 24, height: 1 },\n  bubble: { position: 'absolute', top: 4, bottom: 4, left: 4, borderRadius: 28 },\n  row: { flex: 1, flexDirection: 'row', paddingHorizontal: 4 },\n  dot: { position: 'absolute', top: 0, left: 0, width: BAR_H, height: BAR_H },\n  dotPress: { flex: 1, alignItems: 'center', justifyContent: 'center' },\n  item: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 2 },\n  label: { fontSize: 10.5, fontWeight: '400' },\n  badge: { position: 'absolute', top: -4, right: -10, minWidth: 17, minHeight: 17, borderRadius: 9, paddingHorizontal: 4, backgroundColor: '#ff3b30', alignItems: 'center', justifyContent: 'center' },\n  badgeText: { color: '#ffffff', fontSize: 10.5, fontWeight: '400' },\n});\n\nexport default function Preview() {\n  const { dark } = useKit();\n  const [tab, setTab] = useState<TabKey>('index');\n  const [collapsed, setCollapsed] = useState(false);\n  const lastY = useRef(0);\n  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {\n    const y = e.nativeEvent.contentOffset.y;\n    const dy = y - lastY.current;\n    lastY.current = y;\n    if (y < 24) setCollapsed(false);\n    else if (dy > 6) setCollapsed(true);\n    else if (dy < -6) setCollapsed(false);\n  };\n  const fg = dark ? '#ffffff' : '#1c1c1e';\n  const sub = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';\n  const offset = TABS.findIndex((t) => t.key === tab);\n  const copy = COPY[tab];\n\n  return (\n    <View style={[styles.root, { backgroundColor: dark ? '#000000' : '#f2f2f7' }]}>\n      <ScrollView contentContainerStyle={styles.feed} showsVerticalScrollIndicator={false} onScroll={onScroll} scrollEventThrottle={16}>\n        <Text style={[styles.large, { color: fg }]}>{copy.title}</Text>\n        <Text style={[styles.sub, { color: sub }]}>{copy.sub}</Text>\n        {[0, 1, 2, 3, 4].map((i) => {\n          const p = PHOTOS[(i + offset) % PHOTOS.length];\n          return (\n            <View key={`${tab}-${i}`} style={styles.card}>\n              <Image source={{ uri: p }} alt=\"\" style={StyleSheet.absoluteFill} resizeMode=\"cover\" />\n              <View style={styles.cardShade} />\n              <Text maxFontSizeMultiplier={FONT_CAP} style={styles.cardTitle}>{['Lake Braies', 'Dolomites', 'Valley trail', 'Blue ridge', 'Old forest'][(i + offset) % 5]}</Text>\n            </View>\n          );\n        })}\n      </ScrollView>\n      <GlassBar value={tab} onChange={setTab} dark={dark} collapsed={collapsed} onExpand={() => setCollapsed(false)} />\n    </View>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/password-input.json

@@ -35,7 +35,7 @@
     [
       "matchMessage / mismatchMessage",
       "string",
-      "\"Passwords match\" / \"Passwords don't match\"",
+      "labels.passwordsMatch / labels.passwordsDontMatch",
       "Copy for confirm mode."
     ],
     [

package/registry/_docs/pixel-bar.json

@@ -67,6 +67,12 @@
       "string",
       "auto summary",
       "What screen readers announce; defaults to a summary of the data."
+    ],
+    [
+      "accessibilityHint",
+      "string",
+      "\"Swipe up or down to read each …\"",
+      "Screen-reader hint for the swipe-to-read gesture; pass your own to translate it."
     ]
   ],
   "behavior": [],

package/registry/_docs/polar-area.json

@@ -79,6 +79,12 @@
       "string",
       "auto summary",
       "What screen readers announce; defaults to a summary of the data."
+    ],
+    [
+      "accessibilityHint",
+      "string",
+      "\"Swipe up or down to read each …\"",
+      "Screen-reader hint for the swipe-to-read gesture; pass your own to translate it."
     ]
   ],
   "behavior": [],

package/registry/_docs/qr-code-button.json

@@ -17,21 +17,27 @@
     [
       "label",
       "string",
-      "'Show QR Code'",
+      "labels.showQrCode",
       "Text on the pill."
     ],
     [
       "copyLabel",
       "string",
-      "'Copy'",
+      "labels.copy",
       "Copy button text."
     ],
     [
       "copiedLabel",
       "string",
-      "'Copied'",
+      "labels.copied",
       "Shown after Copy is pressed."
     ],
+    [
+      "closeLabel",
+      "string",
+      "labels.close",
+      "Screen-reader name of the card's close button. Set it app-wide with KitProvider's labels."
+    ],
     [
       "onCopy",
       "(value: string) => void",

package/registry/_docs/scratch-card.json

@@ -26,6 +26,12 @@
       "\"Scratch to reveal\" / —",
       "Printed on the foil."
     ],
+    [
+      "revealHint",
+      "string",
+      "\"Double-tap to reveal\"",
+      "Screen-reader hint on the foil; pass your own to translate it."
+    ],
     [
       "threshold",
       "number",
@@ -102,7 +108,7 @@
     ],
     [
       "Screen readers",
-      "The foil is a button labelled with label and sublabel, with the hint 'Double-tap to reveal'."
+      "The foil is a button labelled with label and sublabel, with the hint revealHint (default 'Double-tap to reveal')."
     ]
   ],
   "usage": null,

package/registry/_docs/search-bar.json

@@ -41,7 +41,7 @@
     [
       "cancelLabel",
       "string",
-      "\"Cancel\"",
+      "labels.cancel",
       "Cancel button text."
     ],
     [

package/registry/_docs/select.json

@@ -76,7 +76,7 @@
     [
       "placeholder",
       "string",
-      "\"Select…\"",
+      "labels.selectPlaceholder",
       "Shown in the field while open with nothing selected."
     ],
     [
@@ -106,7 +106,7 @@
     [
       "searchPlaceholder",
       "string",
-      "\"Search\"",
+      "labels.search",
       "Placeholder of the filter field."
     ],
     [