@expokit/cli 0.4.3 → 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. */
@@ -312,7 +313,7 @@ export function kitVersion(text) {
 }
 
 /**
- * Packages a registry item may depend on that work in the Expo Go app (SDK 57): native modules Expo Go
+ * Packages a registry item may depend on that work in the Expo Go app (SDK 58): native modules Expo Go
  * ships, plus pure-JS packages. Anything else needs a development build (`npx expo run:ios|android`).
  * Keep in sync with the Expo Go module list when the SDK moves.
  */
@@ -320,8 +321,10 @@ export const EXPO_GO_PACKAGES = new Set([
   '@expo/vector-icons',
   '@react-native-async-storage/async-storage',
   '@shopify/react-native-skia',
+  'expo-audio',
   'expo-blur',
   'expo-charts',
+  'expo-file-system',
   'expo-glass-effect',
   'expo-haptics',
   'expo-router',
@@ -344,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. */
@@ -362,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.3",
+  "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/flip-calendar.json

@@ -0,0 +1,106 @@
+{
+  "name": "flip-calendar",
+  "category": "Inputs",
+  "aliases": [
+    "flip-date-picker",
+    "desk-calendar",
+    "daily-calendar",
+    "page-calendar",
+    "tear-off-calendar"
+  ],
+  "exportName": "FlipCalendar",
+  "files": [
+    "src/components/ui/flip-calendar.tsx"
+  ],
+  "summary": "A desk calendar: lift a page to flip it over the rings, pull down to bring it back.",
+  "props": [
+    [
+      "value",
+      "Date",
+      "—",
+      "Controlled date; its time of day is kept on every change."
+    ],
+    [
+      "defaultValue",
+      "Date",
+      "today",
+      "Initial date when uncontrolled."
+    ],
+    [
+      "onChange",
+      "(date: Date) => void",
+      "—",
+      "Called when a page turns over (next day) or back (previous day)."
+    ],
+    [
+      "minDate",
+      "Date",
+      "—",
+      "Earliest day; pulling back past it only nudges the page."
+    ],
+    [
+      "maxDate",
+      "Date",
+      "—",
+      "Latest day; lifting past it only raises the page a little."
+    ],
+    [
+      "locale",
+      "string",
+      "device",
+      "Weekday and month names (Intl), English where Intl isn't available."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Month band and Sunday colour (try colors.danger for the classic red)."
+    ],
+    [
+      "maxWidth",
+      "number",
+      "300",
+      "Widest the pad grows; it fills its container up to this."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "A tick as a page passes upright and a soft thud when it lands."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "'Date'",
+      "Name read by screen readers."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root container."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Drag up to lift today's page; past upright (or with a flick) it turns over to the next day, otherwise it settles back. Drag down to bring yesterday's page back over the rings. The point you grab stays under your finger. A hard flick turns up to six more pages. At minDate / maxDate the page only lifts or nudges a little."
+    ],
+    [
+      "Motion",
+      "Pages hinge on the rings in 3D on the native driver, darken as they turn away from the light and swap to their plain back exactly at upright. Every page keeps its own angle, so the page underneath is already in place when one turns. Reduce Motion swaps the turn for an instant change."
+    ],
+    [
+      "Screen readers",
+      "One adjustable element whose value is the full date; increment turns to the next day, decrement turns back, within the limits."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { FlipCalendar } from '@/components/ui/flip-calendar';\n\nconst [date, setDate] = useState(new Date());\n<FlipCalendar value={date} onChange={setDate} minDate={new Date()} />",
+  "examples": [
+    {
+      "name": "Desk",
+      "title": "Desk",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { FlipCalendar } from '@/components/ui/flip-calendar';\nimport { useKit } from '@/lib/kit';\n\n/** Controls stop at iOS's largest standard text size; content text stays uncapped. */\nconst FONT_CAP = 1.35;\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nconst atMidnight = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());\n\n/** \"Today\", \"Tomorrow\", \"In 5 days\" or \"3 days ago\". */\nfunction relative(date: Date, today: Date) {\n  const n = Math.round((atMidnight(date).getTime() - atMidnight(today).getTime()) / 86400000);\n  if (n === 0) return 'Today';\n  if (n === 1) return 'Tomorrow';\n  if (n === -1) return 'Yesterday';\n  return n > 0 ? `In ${n} days` : `${-n} days ago`;\n}\n\nconst s = StyleSheet.create({\n  frame: { alignSelf: 'stretch', minHeight: 520, alignItems: 'center', justifyContent: 'center', gap: 18, paddingTop: 24, paddingHorizontal: 24 },\n  frameScreen: { flex: 1 },\n  head: { alignItems: 'center', gap: 2 },\n  title: { fontSize: 22, fontWeight: '700' },\n  sub: { fontSize: 15 },\n  hint: { fontSize: 13, textAlign: 'center' },\n  button: { minHeight: 40, paddingHorizontal: 18, alignItems: 'center', justifyContent: 'center', borderWidth: StyleSheet.hairlineWidth },\n  buttonText: { fontSize: 14, fontWeight: '600' },\n});\n\nexport default function Desk({ screen, bottomInset = 0 }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [today] = useState(() => new Date());\n  const [date, setDate] = useState(today);\n  return (\n    <View\n      style={[\n        s.frame,\n        { backgroundColor: colors.muted, paddingBottom: 24 + bottomInset },\n        screen ? s.frameScreen : { borderRadius: radius.xl, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth },\n      ]}\n    >\n      <View style={s.head}>\n        <Text style={[s.title, { color: colors.foreground }]}>Pick-up date</Text>\n        <Text style={[s.sub, { color: colors.mutedForeground }]}>{relative(date, today)}</Text>\n      </View>\n      <FlipCalendar value={date} onChange={setDate} accent={colors.danger} accessibilityLabel=\"Pick-up date\" />\n      <Text style={[s.hint, { color: colors.mutedForeground }]}>Lift a page to turn it · pull down to go back</Text>\n      <Pressable\n        accessibilityRole=\"button\"\n        onPress={() => setDate(today)}\n        style={({ pressed }) => [s.button, { borderColor: colors.border, backgroundColor: colors.card, borderRadius: radius.capsule(40), opacity: pressed ? 0.7 : 1 }]}\n      >\n        <Text maxFontSizeMultiplier={FONT_CAP} style={[s.buttonText, { color: colors.foreground }]}>Back to today</Text>\n      </Pressable>\n    </View>\n  );\n}\n"
+    }
+  ]
+}

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"
     }
   ]
 }