@krapwoo/ds-viewer 0.6.6 → 0.6.8

package/README.md

@@ -622,6 +622,16 @@ Downloads the target version, runs its own `migrate --from <your version>`, upgr
 whichever package manager your lockfile names, re-runs `migrate` for real, then `doctor`. Changes
 are left uncommitted — review them like any other change.
 
+The upgrade keeps the package in whichever section your `package.json` already declares it in,
+rather than always writing a devDependency.
+
+If that spec is a local one — `file:`, `link:`, `workspace:`, `portal:`, or a bare path — `update`
+refuses and tells you how to proceed, because installing a published version would replace the
+checkout your project deliberately points at. The catalog would keep running while no longer
+reflecting the source you are editing, which is hard to notice. `--force` does not override this:
+it exists for uncommitted files, not for changing where the package comes from. The update page's
+**Update now** refuses the same way, reporting it as a failed install step.
+
 ### `npx ds-viewer migrate --from <version>`
 
 Runs every migration introduced after `<version>` — `update` calls this for you; run it directly

package/dist/cli/dev.js

@@ -14,7 +14,8 @@ import { readOwnVersion } from "./packageVersion.js";
 import { createUpdateEndpoint } from "./endpoint.js";
 import { buildUpdatePlan } from "./updatePlan.js";
 import { lastSummaryLine } from "./doctor.js";
-import { detectPackageManager, installUpgradeCommand, platformCommand } from "./packageManager.js";
+import { declaredDependency, detectPackageManager, installUpgradeCommand, isLocalSpec, platformCommand } from "./packageManager.js";
+import { localInstallRefusal } from "./update.js";
 import { DEFAULT_WORKSPACE_DIR, RENDER_WORKSPACE_DIR } from "./types.js";
 export class LocalInstallMissingError extends Error {
 }
@@ -142,7 +143,22 @@ export async function performUpdate(config, currentVersion, plan, deps) {
     });
     report(startAt);
     if (startAt <= 1) {
-        const { command, args } = installUpgradeCommand(pm, '@krapwoo/ds-viewer', plan.latest);
+        // The same refusal the CLI gives: installing a registry version over a `file:`/`link:`/
+        // `workspace:` spec would replace the local checkout the project points at, and the catalog
+        // would keep serving while no longer reflecting the source being edited. Reported as a
+        // failure of the install step, so the page offers its normal recovery rather than appearing
+        // to succeed.
+        const declared = declaredDependency(config.projectRoot, '@krapwoo/ds-viewer');
+        if (declared && isLocalSpec(declared.spec)) {
+            deps.onStatus({
+                phase: 'failure',
+                log: localInstallRefusal(declared.spec, plan.latest),
+                failedStep: stepDefs[1].failLabel ?? stepDefs[1].label,
+                step: 'install',
+            });
+            return;
+        }
+        const { command, args } = installUpgradeCommand(pm, '@krapwoo/ds-viewer', plan.latest, declared?.section);
         try {
             await deps.execImpl(command, args, { cwd: config.projectRoot, encoding: 'utf8' });
         }

package/dist/cli/packageManager.js

@@ -15,17 +15,52 @@ export function detectPackageManager(projectRoot) {
     }
     return 'npm'; // package-lock.json, or no lockfile at all (npm's own documented default either way).
 }
+/** How `pkg` is declared in this project, or undefined when it is not declared at all.
+ *  `dependencies` wins when both sections name it, matching npm's own resolution. */
+export function declaredDependency(projectRoot, pkg) {
+    const packageJsonPath = path.join(projectRoot, 'package.json');
+    if (!existsSync(packageJsonPath))
+        return undefined;
+    let parsed;
+    try {
+        parsed = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+    }
+    catch {
+        return undefined; // An unreadable package.json is not this function's error to report.
+    }
+    const fromDeps = parsed.dependencies?.[pkg];
+    if (typeof fromDeps === 'string')
+        return { section: 'dependencies', spec: fromDeps };
+    const fromDevDeps = parsed.devDependencies?.[pkg];
+    if (typeof fromDevDeps === 'string')
+        return { section: 'devDependencies', spec: fromDevDeps };
+    return undefined;
+}
+/** A spec that resolves to something other than a published version: the local source tree, a
+ *  linked folder, or another package in the same workspace. Installing a registry version over one
+ *  of these replaces the thing the project is deliberately pointing at, so `update` refuses rather
+ *  than doing it silently. `npm:` aliases and plain ranges are registry-backed and not local. */
+export function isLocalSpec(spec) {
+    const value = spec.trim();
+    if (/^(file|link|workspace|portal):/i.test(value))
+        return true;
+    // A bare relative or absolute path is a file dependency too — npm accepts `../pkg` unprefixed.
+    return value.startsWith('./') || value.startsWith('../') || value.startsWith('/') || value.startsWith('~/');
+}
 /** The one command `cli/update.ts`'s "Upgrades with the project's package manager" step (design
  *  §5 "`npx ds-viewer update`" step 3) runs, for whichever manager `detectPackageManager` found.
- *  Yarn (classic and Berry both) use the same `yarn add --dev` syntax for upgrading a single
- *  package to an exact version. */
-export function installUpgradeCommand(pm, pkg, version) {
+ *  Yarn (classic and Berry both) use the same `yarn add` syntax for upgrading a single package to
+ *  an exact version. `section` keeps the package in the section it is already declared in; it
+ *  defaults to `devDependencies`, which is where `init` puts it. */
+export function installUpgradeCommand(pm, pkg, version, section = 'devDependencies') {
     const spec = `${pkg}@${version}`;
+    const dev = section === 'devDependencies';
     if (pm === 'npm')
-        return { command: 'npm', args: ['install', '--save-dev', spec] };
+        return { command: 'npm', args: ['install', dev ? '--save-dev' : '--save-prod', spec] };
     if (pm === 'pnpm')
-        return { command: 'pnpm', args: ['add', '--save-dev', spec] };
-    return { command: 'yarn', args: ['add', '--dev', spec] };
+        return { command: 'pnpm', args: ['add', dev ? '--save-dev' : '--save-prod', spec] };
+    // Yarn has no --save-prod: a plain `yarn add` is already a production dependency.
+    return { command: 'yarn', args: dev ? ['add', '--dev', spec] : ['add', spec] };
 }
 const WINDOWS_SHIMS = new Set(['npm', 'npx', 'pnpm', 'yarn']);
 /** On Windows, `npm`, `npx`, `pnpm` and `yarn` are `.cmd` shims, which Node refuses to run

package/dist/cli/update.js

@@ -4,7 +4,7 @@ import { createInterface } from 'node:readline/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { buildUpdatePlan, isAlreadyUpToDate } from "./updatePlan.js";
-import { detectPackageManager, installUpgradeCommand, platformCommand } from "./packageManager.js";
+import { declaredDependency, detectPackageManager, installUpgradeCommand, isLocalSpec, platformCommand } from "./packageManager.js";
 import { readOwnVersion } from "./packageVersion.js";
 import { lastSummaryLine } from "./doctor.js";
 function formatPlanHuman(plan) {
@@ -32,6 +32,22 @@ async function defaultConfirm(message) {
 function installedMainJs(projectRoot) {
     return path.join(projectRoot, 'node_modules', '@krapwoo', 'ds-viewer', 'dist', 'cli', 'main.js');
 }
+/** Why an update cannot run over a local checkout, and what to do instead. Shared by the CLI and
+ *  the update page so both refuse in the same words. */
+export function localInstallRefusal(spec, latest) {
+    return [
+        `Refusing: @krapwoo/ds-viewer is installed from "${spec}", not from the registry.`,
+        '',
+        'Updating would install the published package over it, replacing the local checkout this',
+        'project deliberately points at — the catalog would keep running while no longer reflecting',
+        'the source being edited.',
+        '',
+        `To move this project onto the published ${latest}, change the dependency yourself:`,
+        `  npm install --save-dev @krapwoo/ds-viewer@${latest}`,
+        '',
+        'To stay on local source, pull and rebuild it instead.',
+    ].join('\n');
+}
 /** Design §5 "`npx ds-viewer update`", steps 1-6. */
 export async function runUpdate(config, options = {}) {
     const currentVersion = options.currentVersion ?? readOwnVersion(path.dirname(fileURLToPath(import.meta.url)));
@@ -41,6 +57,14 @@ export async function runUpdate(config, options = {}) {
     const planText = formatPlanHuman(plan);
     if (options.dryRun)
         return { output: planText, exitCode: 0 };
+    // Refused before the dirty-file check and before any prompt: a `--yes --force` script must not
+    // be able to swap a local checkout for a registry copy either. `--force` deliberately does not
+    // override this — it exists for uncommitted files, not for changing where the package comes
+    // from, which is a decision the project's own package.json already recorded.
+    const declared = declaredDependency(config.projectRoot, '@krapwoo/ds-viewer');
+    if (declared && isLocalSpec(declared.spec)) {
+        return { output: `${planText}\n\n${localInstallRefusal(declared.spec, plan.latest)}`, exitCode: 1 };
+    }
     // Step 2: refuses on any dirty planned file, unless --force — checked before the confirmation
     // prompt, so a script passing --yes without --force still gets refused instead of silently
     // overwriting uncommitted work.
@@ -59,7 +83,9 @@ export async function runUpdate(config, options = {}) {
         const run = platformCommand(cmd, args);
         return execFileSync(run.command, run.args, { ...opts, encoding: 'utf8', shell: run.shell });
     });
-    const { command, args } = installUpgradeCommand(detectPackageManager(config.projectRoot), '@krapwoo/ds-viewer', plan.latest);
+    const { command, args } = installUpgradeCommand(detectPackageManager(config.projectRoot), '@krapwoo/ds-viewer', plan.latest, 
+    // Keep it in the section the project already declared, instead of forcing devDependencies.
+    declared?.section);
     try {
         execImpl(command, args, { cwd: config.projectRoot, encoding: 'utf8' });
     }

package/native/catalog/SectionBlock.tsx

@@ -113,22 +113,21 @@ function Preview({ render, widths, surface, layout }: { render: () => React.Reac
   if (widths === 'full') return <SpecimenSurface surface={kind} style={styles.previewCard}>{render()}</SpecimenSurface>;
   if (layout === 'table') return <TablePreview render={render} widths={widths} surface={kind} />;
   return (
-    <View style={styles.previewCard}>
+    <SpecimenSurface surface={kind} style={styles.previewCard}>
       <View style={styles.frames}>
         {widths.map((width, i) => (
-          <SpecimenSurface
+          <View
             key={`${width}-${i}`}
-            surface={kind}
             // Two live instances of the same component: name each so assistive tech can tell them apart.
             {...(widths.length > 1 ? ({ role: 'group', 'aria-label': frameLabel(width) } as Record<string, unknown>) : null)}
             style={[styles.frame, { width }]}
           >
             {widths.length > 1 && <Text style={styles.frameLabel}>{frameLabel(width)}</Text>}
             {render()}
-          </SpecimenSurface>
+          </View>
         ))}
       </View>
-    </View>
+    </SpecimenSurface>
   );
 }
 

package/native/catalog/SpecimenSurface.tsx

@@ -116,25 +116,30 @@ function readTree(root: MeasurableNode, browser: Browser): LayoutBox {
 }
 
 export function SpecimenContent({ fill, align, capped = true, children }: { fill?: boolean; align?: SpecimenAlign; /** Phone-width cap for a filled example; off for page-width cells. */ capped?: boolean; children: React.ReactNode }) {
-  // After layout (browser only): a `fill` example whose visible content is narrower than the cell
-  // (a fixed-width skeleton, a tooltip around a small trigger) is centred instead of sitting
-  // against the leading edge; an explicit `align` always wins. And in development, an example
+  // After layout (browser only): a genuinely narrow `fill` root (a fixed-width skeleton) is
+  // centred. Narrow text/icons inside a full-width layout do not collapse that layout's root.
+  // An explicit `align` always wins. And in development, an example
   // wider than its cell logs a warning naming a wider `specimenSize`.
   const address = useSpecimenAddress();
   const ref = useRef<View>(null);
   const [centerNarrow, setCenterNarrow] = useState(false);
   const warned = useRef(false);
+  useEffect(() => {
+    setCenterNarrow(false);
+  }, [fill, capped, align]);
   const measure = useCallback(() => {
     const browser = globalThis as unknown as Browser;
     const node = ref.current as unknown as MeasurableNode | null;
     if (!browser.Element || !browser.getComputedStyle || !node?.getBoundingClientRect) return;
     const wrapperWidth = node.getBoundingClientRect().width;
-    const visible = paintedExtent(visibleBoxes(readTree(node, browser)));
+    const tree = readTree(node, browser);
+    const visible = paintedExtent(visibleBoxes(tree));
+    const rootWidth = Math.max(0, ...tree.children.map((child) => child.right - child.left));
     // Only for a phone-width cell. Centring exists for a small control adrift in a wide cell (a
     // tooltip, a fixed-width skeleton); a 'page' cell holds a layout, whose own content is
     // supposed to sit at the left of its own measure, and centring it collapses it to the width of
     // whatever it happens to have painted.
-    if (capped && fill && align === undefined && !centerNarrow && shouldCenterFilledContent(visible, wrapperWidth)) setCenterNarrow(true);
+    if (capped && fill && align === undefined && !centerNarrow && shouldCenterFilledContent(visible, wrapperWidth, rootWidth)) setCenterNarrow(true);
     if ((globalThis as { __DEV__?: boolean }).__DEV__ && !warned.current && overflowsCell(visible, wrapperWidth)) {
       warned.current = true;
       console.warn(
@@ -143,7 +148,7 @@ export function SpecimenContent({ fill, align, capped = true, children }: { fill
     }
   }, [capped, fill, align, centerNarrow, address]);
   if (fill) {
-    const alignItems = centerNarrow ? 'center' : specimenContentAlignItems(fill, align);
+    const alignItems = capped && align === undefined && centerNarrow ? 'center' : specimenContentAlignItems(fill, align);
     return <View ref={ref} onLayout={measure} style={[SPECIMEN_SURFACE_WIDTH_STYLE, filledContentStyle(capped), { alignItems }]}>{children}</View>;
   }
   return <View ref={ref} onLayout={measure} style={specimenContentBoundedStyle(align)}>{children}</View>;

package/native/catalog/specimenSurfaceStyle.ts

@@ -89,12 +89,12 @@ export function specimenContentBoundedStyle(align: SpecimenAlign | undefined) {
  *  `specimenFill.ts`). A page can force a fill with `specimenSurface`. */
 export const DEFAULT_SPECIMEN_SURFACE: SpecimenSurfaceKind = 'auto';
 
-/** A `fill` example stretches to its cell, but one with its own fixed width (a 160-point skeleton
- *  bar) stays that width; it should then sit in the middle of the cell, not against its leading
- *  edge. True when the measured example is narrower than its wrapper (by more than rounding). */
-export function shouldCenterFilledContent(contentWidth: number, wrapperWidth: number): boolean {
-  if (!(contentWidth > 0) || !(wrapperWidth > 0)) return false;
-  return contentWidth < wrapperWidth - 1;
+/** Center genuinely narrow filled examples, not narrow paint inside a full-width fluid layout.
+ *  The latter must retain stretch: centering its root would collapse it to its intrinsic width.
+ *  Callers without a separate root measurement retain the established fixed-width behavior. */
+export function shouldCenterFilledContent(contentWidth: number, wrapperWidth: number, rootWidth = contentWidth): boolean {
+  if (!(contentWidth > 0) || !(wrapperWidth > 0) || !(rootWidth > 0)) return false;
+  return contentWidth < wrapperWidth - 1 && rootWidth < wrapperWidth - 1;
 }
 
 /** The width of what's actually visible in an example: from the leftmost to the rightmost painted

package/package.json

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