@krapwoo/ds-viewer 0.4.1 → 0.4.2

package/dist/cli/init.js

@@ -2,7 +2,7 @@ import { copyFileSync, existsSync, mkdirSync, readFileSync, readdirSync, writeFi
 import path from 'node:path';
 import { createInterface } from 'node:readline/promises';
 import { execFileSync } from 'node:child_process';
-import { preflight } from "./preflight.js";
+import { formatPreflightIssue, preflight } from "./preflight.js";
 import { detectComponentFolders, detectTokenFiles } from "./detect.js";
 import { ensureAgentsFileSection } from "./agentsFile.js";
 import { ensureGithubAction } from "./githubAction.js";
@@ -51,7 +51,7 @@ function detectIndent(raw) {
 export async function initExistingProject(projectRoot, options = {}) {
     const { errors, warnings } = preflight(projectRoot);
     if (errors.length > 0) {
-        return { messages: errors.map((issue) => `Missing ${issue.package}. Run: ${issue.installCommand}`), written: [], exitCode: 1 };
+        return { messages: errors.map(formatPreflightIssue), written: [], exitCode: 1 };
     }
     const componentFolders = detectComponentFolders(projectRoot, projectRoot);
     const tokenFiles = detectTokenFiles(projectRoot, projectRoot, (file) => readFileSync(file, 'utf8'));
@@ -218,7 +218,7 @@ export default defineConfig({
 export async function initNewProject(projectRoot, options = {}) {
     const { errors, warnings } = preflight(projectRoot);
     if (errors.length > 0) {
-        return { messages: errors.map((issue) => `Missing ${issue.package}. Run: ${issue.installCommand}`), written: [], exitCode: 1 };
+        return { messages: errors.map(formatPreflightIssue), written: [], exitCode: 1 };
     }
     const packageJson = JSON.parse(readFileSync(path.join(projectRoot, 'package.json'), 'utf8'));
     const installedPackages = { ...packageJson.dependencies, ...packageJson.devDependencies };

package/dist/cli/preflight.js

@@ -1,7 +1,11 @@
 import { existsSync, readFileSync } from 'node:fs';
 import path from 'node:path';
+/** One line per issue: the problem (or "Missing <package>.") and the command that fixes it. */
+export function formatPreflightIssue(issue) {
+    return `${issue.problem ?? `Missing ${issue.package}.`} Run: ${issue.installCommand}`;
+}
 const REQUIRED_PACKAGES = ['react-native-web', 'react-dom'];
-// @expo/metro-runtime is recommended, not required: Expo 57 web works without it (verified in the
+// @expo/metro-runtime is recommended, not required: Expo web works without it (verified in the
 // 0.1 spike and in native-preview's own node_modules, which has no @expo/metro-runtime installed
 // either) — design §1 "Host requirements" only warns when it is missing.
 const RECOMMENDED_PACKAGES = {
@@ -9,7 +13,9 @@ const RECOMMENDED_PACKAGES = {
     typescript: 'npm install --save-dev typescript',
 };
 const MIN_NODE = [20, 19, 0];
-const MIN_EXPO = [57, 0, 0];
+// Lowered from 57 in 0.4.2 (owner-approved): sync, doctor, the viewer and Update now were verified
+// end to end on a fresh Expo SDK 54 app and on Skiffr (Expo 54).
+const MIN_EXPO = [54, 0, 0];
 /** Accepts `x.y.z`, and a version with a missing minor/patch (e.g. `"57"`, `"^57"`) by defaulting
  *  the missing segments to 0 — a range specifier like `"^57"` must not be flagged as older than 57. */
 function parseVersion(version) {
@@ -46,7 +52,7 @@ export function preflight(projectRoot) {
         errors.push({ package: 'expo', installCommand: 'npx expo install expo' });
     }
     else if (!atLeast(expoVersion, MIN_EXPO)) {
-        errors.push({ package: 'expo', installCommand: 'Upgrade to Expo SDK 57 or later: npx expo install expo@^57' });
+        errors.push({ package: 'expo', problem: `Expo SDK 54 or later is required (found ${expoVersion}).`, installCommand: 'npx expo install expo@^54' });
     }
     for (const name of REQUIRED_PACKAGES) {
         if (!deps[name])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krapwoo/ds-viewer",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "license": "MIT",
   "type": "module",
   "description": "A browsable, always-current catalog for an Expo / React Native design system.",

package/starter-kit/components/Banner/Banner.tsx

@@ -173,6 +173,11 @@ export function Banner({
   );
 }
 
+/** `StyleSheet.absoluteFill`, spelled out: React Native 0.81's types don't allow spreading
+ *  `StyleSheet.absoluteFill` (and 0.86 removed `absoluteFillObject`), so this one form
+ *  type-checks on both. */
+const FILL = { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 } as const;
+
 const styles = StyleSheet.create({
   actionRow: {
     flexDirection: 'row',
@@ -235,7 +240,7 @@ const styles = StyleSheet.create({
   },
   // Translucent pressed overlay — sits above the banner bg so the tinted bg shows through.
   pressOverlay: {
-    ...StyleSheet.absoluteFill,
+    ...FILL,
     backgroundColor: DS_SEMANTIC.interaction.pressed,
     borderRadius: DS_RADIUS.medium,
   },

package/starter-kit/components/BottomSheet/BottomSheet.tsx

@@ -125,9 +125,14 @@ export function BottomSheet({ visible, onDismiss, header, children, footer, styl
   );
 }
 
+/** `StyleSheet.absoluteFill`, spelled out: React Native 0.81's types don't allow spreading
+ *  `StyleSheet.absoluteFill` (and 0.86 removed `absoluteFillObject`), so this one form
+ *  type-checks on both. */
+const FILL = { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 } as const;
+
 const styles = StyleSheet.create({
-  overlay: { ...StyleSheet.absoluteFill, justifyContent: 'flex-end' },
-  backdrop: { ...StyleSheet.absoluteFill, backgroundColor: DS_SEMANTIC.element.overlayBackdrop },
+  overlay: { ...FILL, justifyContent: 'flex-end' },
+  backdrop: { ...FILL, backgroundColor: DS_SEMANTIC.element.overlayBackdrop },
   sheet: {
     maxHeight: MAX_HEIGHT_PERCENT,
     backgroundColor: DS_SEMANTIC.surface.white,

package/starter-kit/components/Dialog/Dialog.tsx

@@ -63,14 +63,19 @@ export function Dialog({ visible, onDismiss, children, style }: DialogProps) {
   );
 }
 
+/** `StyleSheet.absoluteFill`, spelled out: React Native 0.81's types don't allow spreading
+ *  `StyleSheet.absoluteFill` (and 0.86 removed `absoluteFillObject`), so this one form
+ *  type-checks on both. */
+const FILL = { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 } as const;
+
 const styles = StyleSheet.create({
   overlay: {
-    ...StyleSheet.absoluteFill,
+    ...FILL,
     alignItems: 'center',
     justifyContent: 'center',
     padding: DS_SPACING[800],
   },
-  backdrop: { ...StyleSheet.absoluteFill, backgroundColor: DS_SEMANTIC.element.overlayBackdrop },
+  backdrop: { ...FILL, backgroundColor: DS_SEMANTIC.element.overlayBackdrop },
   card: {
     width: '100%',
     maxWidth: 400,